Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ピピピのPWA

 ピピピのPWA

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

Dcbb7171913db2969bd56554ab751b9a?s=128

Matsuo Obu

July 23, 2018
Tweet

More Decks by Matsuo Obu

Other Decks in Programming

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