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

33.7K Views

October 17, 21

スライド概要

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

profile-image

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

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
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もよろしくおねがいします!!