WorkboxでキャッシュをコントロールするFirebaseServiceWorkerPWAFirebaseCloudMessagingWorkboxはじめに既存サイトをPWA化しServiceWorkerでキャッシュのコントロールとプッシュ通知を受け取れるプロトタイプを作ったのでそれについてまとめました。Firebaseを利用したプッシュ通知の配信基盤も作ったのでそれについても後日書きます。前提NuxtやGatsbyなどのフレームワークを使っていないプロジェクトへの導入です。以下の実装をゴールとします。この記事では上の3つまでをゴールとして進めていきます。既存サイトをPWA化するWorkboxを使ってキャッシュをコントロールするオフラインで閲覧できるようにするプッシュ通知を受信できるようにするプッシュ通知の配信基盤をFirebaseで構築するPWA化するまず既存サイトをPWA化していきます。詳しくは以下を参照してください。Workerが有効にならないので注意manifest.jsonアプリケーションの情報(名前、説明、アイコン)やカラーや初期表示ページのURL等を記述し設定するjsonファイルです。詳しくは以下を参照してください。MDN導入するサイトのルートディレクトリにmanifest.jsonを作成します。"103953800507"}設定した属性の内容は次の通りです。Analytics用のパラメータを埋め込みたい場合は、start_urlで指定する。Messaging(FCM)を利用する場合は、gcm_sender_idの値は103953800507で固定になるので注意。この他にも設定できる項目があるので、詳しくは以下を参照してください。MDNmanifest.jsonを作成したらheadタグで以下のように読み込みます。href="manifest.json">手で書くのがめんどくさかったらこんな便利なものもある。中身は空でもOK})この程度の単純な作業で済みます。デメリットも特になさそうなので、とりあえず実装しておきます。Workerの準備をする以下を実現するために準備をしていきます。WorkerとはWebページとは別にバックグラウンドで実行するJavaScriptキャッシュ管理、プッシュ通知、バックグラウンド同期などを行えるようにする基盤技術HTTPSを介して提供されるページかlocalhostでしか登録できない詳しくは以下を参照してください。Workerの登録サイトのルートディレクトリにsw.jsを作成します。Workerとして登録します。});}</script>Workboxによるキャッシュのコントロールそれでは実際にsw.jsにキャッシュのコントロールの処理を実装していきます。Strategiesを使います。以下のようなパターンがあるので、それぞれ用途によって使い分ける必要があります。Stale-While-Revalidateキャッシュを優先して返す。キャッシュがなければネットワークから返す。ネットワークへリクエストしてキャッシュを更新する。Firstキャッシュを優先して返す。キャッシュがあればネットワークへリクエストしない。キャッシュはない場合、ネットワークから返す。Firstネットワークから優先して返す。失敗した場合はキャッシュを返す。Onlyネットワークからのみ返す。Onlyキャッシュのみ返す。今回の場合は、基本的にStaleWhileRevalidateで設定しています。Storageを確認。キャッシュできていることが確認できます。cacheNameで指定した名前にファイルが格納されています。Workerからキャッシュを返せていることが確認できます。Workerからキャッシュを返せています。ここまでのまとめこれでPWA化とServiceWorkerを登録してWorkboxでキャッシュのコントロールをすることまでが実現できました。この記事では基本的なキャッシュの処理しかしていませんが、要件によっては処理が複雑になることもあると思います。既存サイトをPWA化させることができました。requestStockLike1@dnrsmWeb制作会社にてフロントエンドエンジニアをしています。Follow株式会社トライム目黒にあるWeb制作会社です。upLoginユーザーは見つかりませんでした。