プログレッシブ ウェブアプリは、オフラインで動作可能な Service Worker を備えています。ありがとうございます。また、ウェブアプリ用に既存の Google アナリティクスを設定済みで、オフライン中に発生した分析データを逃さず捉えられるようにします。しかし、オフライン中に Google アナリティクスにデータを送信しようとすると、リクエストは失敗し、データは失われます。
驚くことではありませんが、その解決策は Service Worker です。具体的には、Google アナリティクスのリクエストを（IndexedDB を使用して）保存し、ネットワークが利用可能になったときに再試行するためのコードを Service Worker に追加します。このロジックを処理するコードをオープンソースの Google I/O ウェブアプリの一部として公開しましたが、これは便利なパターンであり、コードをコピーして貼り付けると脆弱になる可能性があることがわかりました。
本日、Service Worker 内でオフラインの 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 によって、Service Worker に新しい fetch イベント ハンドラが設定されます。このハンドラは、Google アナリティクス ドメインに対するリクエストに応答します。（ライブラリは Google アナリティクス以外のリクエストを無視するため、Service Worker の他の fetch イベント ハンドラは、それらのリソースに適切な戦略を実装できます）。まず、ネットワークに対するリクエストの実行を試みます。ユーザーがオンラインの場合は、通常どおり処理が行われます。
ネットワーク リクエストが失敗した場合、ライブラリは IndexedDB へのリクエストに関する情報を自動的に保存し、リクエストが最初に行われた時点を示すタイムスタンプを付加します。Service Worker が起動するたびに、ライブラリはキューに入っているリクエストを確認し、追加の Google アナリティクス パラメータとともにリクエストの再送信を試行します。
qtパラメータ。リクエストが最初に試行されてからの経過時間に設定され、元の時間が適切に関連付けられるようにします。goog.offlineGoogleAnalytics.initialize()に渡される設定オブジェクトのparameterOverridesプロパティに指定された追加のパラメータと値。たとえば、カスタム ディメンションを追加すると、Service Worker から再送信されたリクエストと、すぐに送信されたリクエストを区別できます。
リクエストの再送信が成功すれば、完了です。リクエストが IndexedDB から削除されます。再試行に失敗し、最初のリクエストが 24 時間以内に行われていた場合は、IndexedDB に保持され、次に Service Worker が起動したときに再試行されます。なお、Google アナリティクスで 4 時間以上経過したヒットは、必ず処理される保証はありません。ただし、念のため、やや古いヒットを再送信しても問題はありません。
また、sw-offline-google-analytics は、Google アナリティクスをブートストラップするために必要な実際の analytics.js JavaScript コードに対して、「ネットワーク優先、キャッシュへのフォールバック」戦略をimplementsしています。
今後さらに追加される予定です。
sw-offline-google-analytics は、大規模な sw-helpers プロジェクトの一部です。このプロジェクトは、既存の Service Worker の実装にドロップイン拡張機能を提供するライブラリのコレクションです。
また、このプロジェクトには sw-appcache-behavior も含まれています。これは、Service Worker 内の既存の AppCache マニフェストで定義されているキャッシュ戦略を実装するライブラリです。少なくとも最初は、一貫したキャッシュ戦略を維持しながら、AppCache から Service Worker に移行できるようにすることを目的としています。
他に図書館のアイデアがありましたら、ぜひお聞かせください。Issue Tracker でリクエストをお送りください。