PWAによるオフライン時のPVカウント実装 `sw-offline-google-analytics`

Googleのオフィシャルで昨年アナウンスのあったnpmモジュール `sw-offline-google-analytics` を利用したオフライン実装は皆さん述べられている通り非常に簡単でしたのでメモ。


# 準備
## localhostにサンプルのPWAサイトを導入

1. node.jsをローカルへインストール
2. localの適当なディレクトリにPWAコンテンツを格納
3. `sw-offline-google-analytics` を導入

`npm install --save-dev sw-offline-google-analytics`

# service-worker.js を変更
## Googleドキュメントの通り service-worker.js に2行追加

※まだ最新版のバージョンは v0.0.25

## 計測が分かりやすいようにGA / GTMを設定
### Google Analytics側はカスタムディメンションを設定

### Google Tag Manager側は navigator.onLine でステータス把握
#### variable

#### tag側はカスタムディメンションにセット

# 実際の動きを確認
## ONLINE
通常どおりGA側にPVが送られている

## OFFLINE
GAへの送信がコケる

同時にIndexedDBへ格納される(4回OFFLINEアクセスをしてコケた時のキャプチャ)

## OFFLINE to ONLINE
まとめて送信される

# まとめ
moduleのバージョンが0.0.25なので今後のUpdateなども行われそうですが実装的には非常に簡単にできそうです。計測も問題はなかったのですが、数秒以内に何度もOFFLINEでアクセスをするといった場合はPVカウントがイマイチな気も少ししました(ネットワーク側の問題かも？)。ここは要検証。

ただ…注意事項としては

You should note that Google Analytics hits older than four hours are not guaranteed to be processed, but resending somewhat older hits "just in case" shouldn't hurt.

の部分です。 4時間より以前のものに関しては保証されないというヤツですね。再送信可能と書かれているものの `保証されない` だけで二重にカウントされるのも嫌ですしね。
IndexedDBから送信された分だけ消えるのかとか、その辺りも確認が必要かもしれないですね。