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

PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022

Chinen
December 03, 2022

PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022

PWA Night CONFERENCE 2022の登壇資料です。

Chinen

December 03, 2022
Tweet

More Decks by Chinen

Other Decks in Technology

Transcript

  1. 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic • 沖縄でリモートワーク/元・美容師

    • 技術コミュニティ運営 ◦ PWA Night(東京)/ v-okinawa(沖縄) • Vue.js/Nuxt/Jamstack/セマンティックHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/CMS • 最近のハマり ◦ スプラトゥーン3(弓S+17 XP1900) ◦ ポケモン スカーレット
  2. manifest.jsonに登録するアイコンの画像サイズ • 最低限用意するサイズは192pxと512px ◦ https://web.dev/install-criteria/ を参照 ◦ その他、対応端末に合わせて複数のサイズを追加する • 通常のアイコンと、maskable

    iconsの設定が必要 ◦ https://web.dev/maskable-icon/ を参照 ◦ maskable iconsがなくてもインストール自体は可能だが、 Lighthouseのチェックは通らない
  3. PWAのコアとなる技術要素 • WebページのJavaScriptとは別にバックグラウンドで実行される • プッシュ通知やキャッシュ操作もService Workerを使って実現 • HTTPSの環境が必要(localhostは例外) Service Workerとは

    WebブラウザとWebサーバーの間でプロキシとして機能する特殊なJavaScriptア セットです。オフラインでのアクセスを提供することで信頼性を向上させ、ペー ジのパフォーマンスを向上させることを目的としています。 https://developer.chrome.com/docs/workbox/service-worker-overview/ より引用
  4. 全部キャッシュすれば良いのでは? • ブラウザによって最大値が決められている ◦ https://web.dev/storage-for-the-web/ 参考 ◦ 端末のストレージを圧迫する ◦ 大量のファイルは通信量にも影響する

    • 更新したはずのページが更新されないなどの不具合が起こる可能性 ◦ キャッシュ削除タイミングを間違えると古いキャッシュのまま表示される メリット・デメリットを考えて使おう
  5. まとめ • まずは既存のWebアプリやWebサイトをPWA化することから始めよう ◦ すでに作成したアプリやサイトがあればすぐに取り組める ◦ Next.js/NuxtのようなフレームワークやWordPressのようなCMSならプラグイン有り • PWAの実装は小さく始めることができる ◦

    必要な機能だけの実装でもOK ◦ ホームに追加する機能だけでも良いし、オフライン対応だけでも良い PWAの開発に興味を持ったら、 ぜひPWA Night通常回にも遊びにきてください!毎月第3水曜日!