ピピピのPWA

PWAの入り口を最小限で実装した話。「We Are JavaScripters! @22nd」で発表 (2018-07-23)

Transcript

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