当ブログサイト(DevelopersIO)におけるPWAサポート終了のおしらせ

当ブログサイト (DevelopersIO)では 2018年より　プログレッシブ ウェブアプリ (PWA)をサポート。 記事表示の高速化手段として Service Worker のキャッシュを利用していました。

今回、Node18対応のため、パッケージのバージョンアップを含むメンテナンスを実施した後、意図したPWAのキャッシュが利用ができない事象が発生。 その対策として PWAのサポートを終了するに至った経緯について紹介させて頂きます。

発端

Nodeバージョンを16 → 18 への更新と、パッケージのバージョンアップのメンテナンスを実施しました。

メンテナンス実施の翌日、ブログのトップページが更新されない報告があがりました。

ServiceWorker応答

• Date、Expiresとも前日のコンテンツが、ServiceWorkerのキャッシュ応答により表示される状態でした。

Webサーバからの応答

• キャッシュを迂回するスーパーリロードを行うと、正しい最新のコンテンツが取得できる状態でした。

原因

Nuxt関連パッケージの更新

revision 付与が 必須となる仕様変更を含むパッケージへのアップデートが原因でした。

NuxtでPWAが更新されない問題の調査

キャッシュ設定

当サイトのサービスワーカーのキャッシュ設定はデフォルト。キャッシュの最大有効期限を明示しない状態で利用していた事で、サービスワーカーのキャッシュが長時間残りやすい状況に至ったと推測されます。

確認

対処方針を決定するため、PWA、サービスワーカーを撤去した検証環境となるサーバを用意。 Chromeブラウザの開発者ツールを利用して、JSファイルの転送時間を比較しました。

キャッシュなし

サービスワーカー、ブラウザキャッシュが共に機能しない場合、応答時間は200ms前後でした。

サービスワーカー

サービスワーカーのキャッシュが再利用された場合、応答時間は 4ms 前後でした

ブラウザキャッシュ

ブラウザキャッシュ、メモリキャッシュが再利用された場合、応答時間は 0ms と表示されました。

ディスクキャッシュが再利用された場合、6ms 前後でした。

ブラウザキャッシュ(メモリ) < サービスワーカー ≒ ブラウザキャッシュ (ディスク) <<< キャッシュなし との結果が得られました。

ブラウザキャッシュが十分に高速である事が確認できたため、 Service Worker を撤去、PWAサポートを終了する対策を取る事としました。

対処

フロントアプリケーション

nuxt.config.js から PWA設定を削除したアプリケーションをデプロイしました。

CloudFront設定

ブラウザから当サイトのサービスワーカーを削除するため、「https://dev.classmethod.jp」のレスポンスヘッダーに「Clear-Site-Data: "storage"」を付与する設定を行いました。

• Clear-Site-Data

Behavior 「/」の レスポンスヘッダーポリシーとして設定しました。

JavaScriptを用いたサービスワーカーの解除方法について社内より情報提供を受けましたが、設定の簡易性、反映の確実性を優先し CloudFrontを利用する措置を取りました。

• How to Uninstall, Unregister or Remove a Service Worker [With Example Code]

まとめ

正常動作しない サービスワーカーを読み込み 当サイトのトップページに古いコンテンツが表示されている場合、まずブラウザのスーパーリロード操作をお試しください。

スーパーリロードの効果がない場合、お手数ですがブラウザからサービスワーカーの解除をお試しください。

デベロッパーツールの Application - Cache - Cache Storage の該当部分を削除し、Application - Service Workers の該当部分を Unregister しました。

Chromeで(いわゆる)スーパーリロードとキャッシュクリアを少しでも楽に行いたい