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

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もよろしくおねがいします!!