PWAのキャッシュにハマり、敗北したはなし

タグ
スライド概要

PWA Night MATSURI(2021.10.16)の登壇資料です。

profile-image

きらぷか

@kira_puka

作者について:

よろしくおねがいします!

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2021-10-17 14:45:42

各ページのテキスト

1. PWAのキャッシュにハマり 敗北したはなし PWA Night MATSURI 2021/10/16(土) きらぷか(@kira_puka)

2. アジェンダ 1. きらぷかとは? 2. PWAとわたし 3. キャッシュ周りで起こった問題 4. Service Worker更新の流れ 5. 更新時の対応方法 6. まとめ

3. きらぷかとは? きらぷか (@kira_puka) ● ● ● ● 合同会社めもらば WebサービスやAndroidアプリの開発 妻とふたりの娘 趣味: 読書とゲームと個人開発

4. PWAとわたし PWAを使ってつくったサービスたち(Nuxt+Firebase) 積読ハウマッチ カブれこ SSSAPI 総額がわかる書籍管理アプリ あつ森のカブ価記録アプリ スプシのAPI化サービス

5. PWAとわたし|積読ハウマッチ 積読ハウマッチ ● ● ● 総額がわかる書籍管理アプリ Nuxt.js+Firebase製 プッシュ通知などでPWAを利用

6. PWAとわたし|カブれこ カブれこ ● ● ● あつ森のカブ価を記録・予測するアプリ Nuxt.js+Firebase製 PWAをGoogle Play Storeで配信

7. PWAとわたし|SSSAPI SSSAPI ● ● ● GoogleスプレッドシートのAPI化サービス Nuxt.js+Firebase製 今回お話するキャッシュ周りで苦労したサービス。。

8. SSSAPIとは? GoogleスプレッドシートのURLを登録すると JSON APIを簡単に作れるサービス

9. SSSAPI|APIでできる操作 1件取得 ページング フィルター ソート

10. SSSAPI|利用シーン お知らせや更新情報などのちょっとしたCMSや システム内で利用する設定情報、 プロト開発時のモックなどとしても便利です!

11. SSSAPI|ユーザ募集中です!! 現在、β版公開中!! ご利用お待ちしております!!

12. 本題

13. PWAは簡単にはじめられる Nuxt.jsだと「nuxt/pwa」パッケージがあり、 Zero configでPWAを導入できる。 ⇒ PWAやService Worker、Workboxを よく知らなくても、簡単にはじめられる。 ただ、よく知らないために思わぬところで、 想定してない動きになってることも。。

14. キャッシュ周りで起こった問題 SSSAPIの開発中のこと ➢ 「あれ?デプロイしたのに古いのが表示されてる?」 ➢ 「あれ?たまにファイルが見つからない?」 ➢ 「でも、再読込するとちゃんと表示される?」

15. キャッシュ周りで起こった問題|当時の構成 そのときのシステム構成 ● ● ● SPAのNuxt.js + nuxt/pwa Firebase Hostingにホスティング Cloudflareでのカスタムドメイン

16. キャッシュ周りで起こった問題 CloudflareとFirebase Hostingでキャッシュしていた ➢ ➢ Firebase Hostingのキャッシュをやめる ⇒ 変わらない。。 Cloudflareもキャッシュをやめてみる ⇒ 変わらない。。

17. キャッシュ周りで起こった問題 ➢ もしかして?PWAのキャッシュ戦略の問題? (NetworkFirst / CacheFirst / NetworkOnly etc..) https://developers.google.com/web/tools/workbox/modules/workbox-strategies

18. Workboxのキャッシュ戦略|NetworkFirst Network First (ネットからの取得に失敗したらキャッシュを使う) - nuxt/pwaのデフォルト設定 https://developers.google.com/web/tools/workbox/modules/workbox-strategies

19. Workboxのキャッシュ戦略|CacheFirst Cache First (キャッシュがなかったら、ネットから取得する) https://developers.google.com/web/tools/workbox/modules/workbox-strategies

20. Workboxのキャッシュ戦略|Network Only Network Only(ネットからの取得のみ。キャッシュは利用しない) https://developers.google.com/web/tools/workbox/modules/workbox-strategies

21. キャッシュ周りで起こった問題 キャッシュ戦略を変えて試してみる ➢ Network First ⇒ NG ➢ Network Only ⇒ NG

22. Service Worker 更新の流れ 公式ドキュメントを読み直す https://developers.google.com/web/fundamentals/primers/service-workers

23. Service Worker 更新の流れ https://developers.google.com/web/fundamentals/primers/service-workers

24. Service Worker 更新の流れ https://developers.google.com/web/fundamentals/primers/service-workers

25. Service Worker 更新の流れ New 更新があるかをチェック 新しいSWは待機

26. Service Worker 更新の流れ ページを開き直すと 新しいSWを利用される New 再度開き直すと更新後のページが表示されるのは、この仕組みのためのよう

27. 更新時の対応方法 変更があったら通知してページを更新してもらう 1. Workbox Windowを使って、更新されたら通知 2. バージョンファイルを用意し、更新されたら通知 外部にJSONファイルなどを用意しておき、 環境変数で設定しておいたバージョンと比較

28. 更新時の対応方法|Workbox Window ● Workbox Window ○ ○ window内で利用できるパッケージ Service Workerのライフサイクルのリスナーが存在

29. 実際におこなった方法 キャッシュ、あきらめました。。 ➢ LPなどはユーザに更新を促す通知は出しづらい。。 ➢ 静的ページでよい部分を分離し、CloudflareのCDNでカバー

30. まとめ ● PWAは簡単にはじめられる ○ ○ Nuxt.jsなら、nuxt/pwaモジュールをいれるだけ Webアプリでもプッシュ通知やストア公開もできる ● どのような動きをするかは確認が大事 ○ ○ テストをしっかりして思った挙動かを確認大切 PWA/Service Worker/Workboxのガイドは一読 ● 使いやすいところだけ、使うのも一つの手 ○ 無理に導入せず、部分的/段階的でもよい ○ より理解を深めて、再度試すというのもあり ご清聴ありがとうございまいした!! SSSAPIもよろしくおねがいします!!