これで、オフラインで動作できる プログレッシブ ウェブアプリが完成しました。Service Worker も追加されています。これで、また、ウェブアプリ用に Google アナリティクスをすでに設定しており、オフラインでの使用から得られる分析情報を逃したくありません。ただし、オフラインの状態で Google アナリティクスにデータを送信しようとすると、リクエストは失敗し、データは失われます。
解決策は、Service Worker です。具体的には、サービス ワーカーにコードを追加して、Google アナリティクスのリクエストを（IndexedDB を使用して）保存し、ネットワークが利用可能になったときに再試行します。オープンソースの Google I/O ウェブアプリの一部として、このロジックを処理するコードを共有しましたが、これは便利なパターンであり、コードのコピーと貼り付けは脆弱になる可能性があると判断しました。
本日、サービス ワーカー内でオフラインの Google アナリティクス リクエストを処理するために必要なものがすべて、npm パッケージ npm install --save-dev sw-offline-google-analytics にバンドルされました。
sw-offline-google-analytics を使用する
既存の Service Worker コード内に、次のコードを追加します。
// This code should live inside your service worker JavaScript, ideally
// before any other 'fetch' event handlers are defined:
// First, import the library into the service worker global scope:
importScripts('path/to/offline-google-analytics-import.js');
// Then, call goog.offlineGoogleAnalytics.initialize():
// See https://github.com/GoogleChrome/workbox/tree/main/packages/workbox-google-analytics
goog.offlineGoogleAnalytics.initialize();
// At this point, implement any other service worker caching strategies
// appropriate for your web app.
これで操作は完了です。
バックグラウンドで行われていること
sw-offline-google-analytics は、サービス ワーカーに新しい fetch イベント ハンドラを設定します。このハンドラは、Google アナリティクスのドメインに対して行われたリクエストに応答します。（このライブラリは Google アナリティクス以外のリクエストを無視するため、サービス ワーカーの他の fetch イベント ハンドラがそれらのリソースに適切な戦略を実装できます）。最初に、ネットワークに対してリクエストの処理が試行されます。ユーザーがオンラインであれば、通常どおりに処理されます。
ネットワーク リクエストが失敗した場合、ライブラリはリクエストに関する情報を IndexedDB に自動的に保存し、リクエストが最初に行われた時刻を示すタイムスタンプも保存します。サービス ワーカーが起動するたびに、ライブラリはキューに追加されたリクエストをチェックし、追加の Google アナリティクス パラメータとともにリクエストの再送信を試みます。
qtパラメータ: リクエストが最初に試行されてから経過した時間に設定します。これにより、元の時間が適切に割り当てられます。goog.offlineGoogleAnalytics.initialize()に渡される構成オブジェクトのparameterOverridesプロパティで指定された追加パラメータと値。たとえば、カスタム ディメンションを追加して、サービス ワーカーから再送信されたリクエストとすぐに送信されたリクエストを区別できます。
リクエストの再送信が成功した場合は、リクエストは IndexedDB から削除されます。再試行が失敗し、最初のリクエストが 24 時間以内に行われた場合、そのリクエストは IndexedDB に保持され、次回 Service Worker の起動時に再試行されます。なお、4 時間以上経過した Google アナリティクスのヒットは必ずしも処理されるとは限りません。ただし、念のため、それより古いヒットを再送信しても問題はありません。
また、sw-offline-google-analytics は、Google アナリティクスのブートストラップに必要な実際の analytics.js JavaScript コードに対して、「ネットワーク優先、キャッシュにフォールバック」戦略をimplementsします。
今後も、さらに追加される予定です。
sw-offline-google-analytics は、既存のサービス ワーカーの実装にドロップインで拡張機能を提供するライブラリのコレクションである、より大きな sw-helpers プロジェクトの一部です。
このプロジェクトには、Service Worker 内に既存の AppCache マニフェストで定義されたキャッシュ戦略を実装するライブラリである sw-appcache-behavior も含まれています。これは、少なくとも最初は、一貫したキャッシュ戦略を維持しながら、AppCache から Service Worker に移行できるようにすることを目的としています。
他にもライブラリに関するアイデアがございましたら、ぜひお聞かせください。Issue Tracker でリクエストを送信してください。