33.7K Views
October 17, 21
スライド概要
PWA Night MATSURI(2021.10.16)の登壇資料です。
よろしくおねがいします!
PWAのキャッシュにハマり 敗北したはなし PWA Night MATSURI 2021/10/16(土) きらぷか(@kira_puka)
アジェンダ 1. きらぷかとは? 2. PWAとわたし 3. キャッシュ周りで起こった問題 4. Service Worker更新の流れ 5. 更新時の対応方法 6. まとめ
きらぷかとは? きらぷか (@kira_puka) ● ● ● ● 合同会社めもらば WebサービスやAndroidアプリの開発 妻とふたりの娘 趣味: 読書とゲームと個人開発
PWAとわたし PWAを使ってつくったサービスたち(Nuxt+Firebase) 積読ハウマッチ カブれこ SSSAPI 総額がわかる書籍管理アプリ あつ森のカブ価記録アプリ スプシのAPI化サービス
PWAとわたし|積読ハウマッチ 積読ハウマッチ ● ● ● 総額がわかる書籍管理アプリ Nuxt.js+Firebase製 プッシュ通知などでPWAを利用
PWAとわたし|カブれこ カブれこ ● ● ● あつ森のカブ価を記録・予測するアプリ Nuxt.js+Firebase製 PWAをGoogle Play Storeで配信
PWAとわたし|SSSAPI SSSAPI ● ● ● GoogleスプレッドシートのAPI化サービス Nuxt.js+Firebase製 今回お話するキャッシュ周りで苦労したサービス。。
SSSAPIとは? GoogleスプレッドシートのURLを登録すると JSON APIを簡単に作れるサービス
SSSAPI|APIでできる操作 1件取得 ページング フィルター ソート
SSSAPI|利用シーン お知らせや更新情報などのちょっとしたCMSや システム内で利用する設定情報、 プロト開発時のモックなどとしても便利です!
SSSAPI|ユーザ募集中です!! 現在、β版公開中!! ご利用お待ちしております!!
本題
PWAは簡単にはじめられる Nuxt.jsだと「nuxt/pwa」パッケージがあり、 Zero configでPWAを導入できる。 ⇒ PWAやService Worker、Workboxを よく知らなくても、簡単にはじめられる。 ただ、よく知らないために思わぬところで、 想定してない動きになってることも。。
キャッシュ周りで起こった問題 SSSAPIの開発中のこと ➢ 「あれ?デプロイしたのに古いのが表示されてる?」 ➢ 「あれ?たまにファイルが見つからない?」 ➢ 「でも、再読込するとちゃんと表示される?」
キャッシュ周りで起こった問題|当時の構成 そのときのシステム構成 ● ● ● SPAのNuxt.js + nuxt/pwa Firebase Hostingにホスティング Cloudflareでのカスタムドメイン
キャッシュ周りで起こった問題 CloudflareとFirebase Hostingでキャッシュしていた ➢ ➢ Firebase Hostingのキャッシュをやめる ⇒ 変わらない。。 Cloudflareもキャッシュをやめてみる ⇒ 変わらない。。
キャッシュ周りで起こった問題 ➢ もしかして?PWAのキャッシュ戦略の問題? (NetworkFirst / CacheFirst / NetworkOnly etc..) https://developers.google.com/web/tools/workbox/modules/workbox-strategies
Workboxのキャッシュ戦略|NetworkFirst Network First (ネットからの取得に失敗したらキャッシュを使う) - nuxt/pwaのデフォルト設定 https://developers.google.com/web/tools/workbox/modules/workbox-strategies
Workboxのキャッシュ戦略|CacheFirst Cache First (キャッシュがなかったら、ネットから取得する) https://developers.google.com/web/tools/workbox/modules/workbox-strategies
Workboxのキャッシュ戦略|Network Only Network Only(ネットからの取得のみ。キャッシュは利用しない) https://developers.google.com/web/tools/workbox/modules/workbox-strategies
キャッシュ周りで起こった問題 キャッシュ戦略を変えて試してみる ➢ Network First ⇒ NG ➢ Network Only ⇒ NG
Service Worker 更新の流れ 公式ドキュメントを読み直す https://developers.google.com/web/fundamentals/primers/service-workers
Service Worker 更新の流れ https://developers.google.com/web/fundamentals/primers/service-workers
Service Worker 更新の流れ https://developers.google.com/web/fundamentals/primers/service-workers
Service Worker 更新の流れ New 更新があるかをチェック 新しいSWは待機
Service Worker 更新の流れ ページを開き直すと 新しいSWを利用される New 再度開き直すと更新後のページが表示されるのは、この仕組みのためのよう
更新時の対応方法 変更があったら通知してページを更新してもらう 1. Workbox Windowを使って、更新されたら通知 2. バージョンファイルを用意し、更新されたら通知 外部にJSONファイルなどを用意しておき、 環境変数で設定しておいたバージョンと比較
更新時の対応方法|Workbox Window ● Workbox Window ○ ○ window内で利用できるパッケージ Service Workerのライフサイクルのリスナーが存在
実際におこなった方法 キャッシュ、あきらめました。。 ➢ LPなどはユーザに更新を促す通知は出しづらい。。 ➢ 静的ページでよい部分を分離し、CloudflareのCDNでカバー
まとめ ● PWAは簡単にはじめられる ○ ○ Nuxt.jsなら、nuxt/pwaモジュールをいれるだけ Webアプリでもプッシュ通知やストア公開もできる ● どのような動きをするかは確認が大事 ○ ○ テストをしっかりして思った挙動かを確認大切 PWA/Service Worker/Workboxのガイドは一読 ● 使いやすいところだけ、使うのも一つの手 ○ 無理に導入せず、部分的/段階的でもよい ○ より理解を深めて、再度試すというのもあり ご清聴ありがとうございまいした!! SSSAPIもよろしくおねがいします!!