ピピピのPWA
by
Matsuo Obu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ピピピの PWA @ 1q7s82!2 2!18 !7 23 W/ Ar/ JavaScr037/rs !
Slide 2
Slide 2 text
まつおちゃん @mqtsuo0 フリ2ランス Webエンジニア React と ReactNati0e @やっている @boiyaa さんと仕事している
Slide 3
Slide 3 text
LTのテーマ とりあえ.PWAっぽいことがしたくて... 「ホーム画面にA加」を実装してみた
Slide 4
Slide 4 text
できたAの -02su/02.gi2hub.i//add-h/-e--i.i-u-/ ホーP画面にアイコン スプラッシュ(一瞬見える) アドレスバーのないページ PWAやってるW
Slide 5
Slide 5 text
ソースコード gi2hub.c/-/-02su/02/add-h/-e--i.i-u- やったこと • 適当にページを作る • -a.ifes2ファイルを作る • i.dex.h2-lに読み込む
Slide 6
Slide 6 text
manifestファイルとは ? • ホームアイコンとか • スプラッシュとか • 起動後のブラウザとか JSON形式の設定ファイル
Slide 7
Slide 7 text
m nifestの設定項目 short_n me … アイコンの下に表示されるアプリ名 icons … 複数サイズのアイコンを指定 theme_color … ツールバーの色 displ y … st nd lone にするとブラウザ感がなくなる orient tion … 画面の縦横向き指定
Slide 8
Slide 8 text
manifestファイルを作る Web pp Manifest Gene.ato. 入力にもとづいて manifest.json と サイA別アイコンが 自動生Gされる
Slide 9
Slide 9 text
index.html に読み込む linkタグ.manifest.jsonを指定
Slide 10
Slide 10 text
やったこと 以上 !!
Slide 11
Slide 11 text
これだけで ホームに追加して アイコンをタップすれば スプラッシュが出て ネイティブアプリっぽい感じで表示できる
Slide 12
Slide 12 text
iOS Android
Slide 13
Slide 13 text
Aとめ manifestファイルを作れば WAっぽいものができる (入り口だけ) Service Worker は 「明Pからがんばる」
Slide 14
Slide 14 text
発表は以上です
Slide 15
Slide 15 text
宣伝 (1) 技術書55でPWA本を1(うと思)てます!!
Slide 16
Slide 16 text
R伝 (2 プロジェCFメNGー募QSです!! R2a0t)ativ2 R2a0t Go Kotlin(S2rv2rSid2 GraphQ( Auth0 GCP Git(ab Fabri0 P員でAフLーKNスでA
Slide 17
Slide 17 text
ありがとうございました
Slide 18
Slide 18 text
サイズ h1 タイトル 96 h ラベル 66 h3 テキスト 44