ServiceWorker を SSR 中心の Blog に組み込む際に調べたこと、感想等

この Blog に ServiceWorker の組み込みを行なっています。
以下2点はある程度実装しました。

• ホーム画面への追加
• WebPush 通知

実装するにあたり調べたこと、感想等を記載します。

---

SerivceWorker ができること

一言でいうと、ServiceWorker を使用することで、Web アプリケーションをオフライン時も動作させることができます。

• オフラインキャッシュ
  インターネット接続がない状況でも、Web アプリケーションへのアクセスを提供できます。

• オフライン時のデータの同期
  IndexDB を使用し、オフライン時のデータを記録してオンラインになったタイミングで送信できます。

• WebPush 通知
  サイトを閲覧していない場合でも、WebPush 通知 でサイトからの情報をユーザーに通知できます。

• window.postMessage で Dom オブジェクトとの相互のやりとり
  ServiceWorker からは、直接 Dom にアクセスできない、window.postMesasge でやりとりを行えます。

---

ServiceWorker 関連のライブラリ

2018/02/24 日時点での記載です。
少し前まで、pw-で始まるライブラリがよく使われていたようですが、現在はworkbox/packages at v3 · GoogleChrome/workbox がよく使われているように思いました。
個人的に、Manifest ファイル の自動生成も実施したかったため、danethurber/webpack-manifest-plugin: webpack plugin for generating asset manifests を使い、Workbox webpack Plugins  |  Workbox  |  Google Developers で Workbox と連携するようにしました。

Workbox は、以下の複数のモジュールに分かれています。

Workbox のモジュール

静的 Cache、動的 Cache、オフラインリクエストのキューイングに関連する機能が提供されています。

モジュール名	説明
Workbox Core
Workbox Precaching	静的Cache モジュール
Workbox Routing	動的Cache モジュール
Workbox Strategies	Cache 動作の制御用モジュール
Workbox Cache Expiration	Cache の有効期限の制御モジュール
Workbox Background Sync	リクエストキューでオフライン時のリクエストを溜めておけるモジュール
Workbox Google Analytics	オフライン時のGAイベントを溜めておけるモジュール
Workbox Cacheable Response	Cacheすべきレスポンスコードの設定、Cache の Responseヘッダの設定ができるモジュール
Workbox Broadcast Cache Update	Cache のUpdate をBroadcast API でブラウザに通知できるモジュール
Workbox CLI	Workbox のコマンドライン ツール
Workbox webpack Plugins	Workbox の WebPack Plugin

generateSW モードと、injectManifest モード

generateSW モード は、 動的 Cache、静的 Cache の設定を持つ、ServiceWorker を自動生成してくれます。
injectManifest モード は、静的 Cache の定義 を 既に存在する ServiceWorker に挿入してくれます。
generateSW モード のオプションで、importScripts の指定ができるので、大概の場合は自動生成で OK に思います。¹

---

SSR での ServiceWorker の利用について

組み込みを行なった感想になります。
HTML のレンダリングは、クライアントが担う SPA な作りのアプリケーションだと App Shell が効果的に効いてくるのかなと思いました。

• オフラインキャッシュ機能は限定的な利用になる
  AppShell に該当するパーツを Blog Top として実装を進めましたが、動的 Cache 設定する必要があり、Offline アプリとして、LightHouse のチェックを突破したり、しなかったりします。静的リソースの Cache は有効に効いていそうで、リソースの先読み等でスピードアップが見込めると思いました。

• WebPush通知は使える
  WebPush通知は、通知受信後の Action に問題が発生する可能性がありますが、通知自体は使用できるかと思います。
  オンラインで、WebPush通知受信、オフライン時にユーザが気づいて通知をクリック、Cache が効いていない URL にアクセス。「現在オフラインになっています。」になるのは、許容するかそうはならないようにするか工夫が必要に思います。

• リクエストキューはオフライン状態での動作が実現できない、且つ 更新系の操作がないので使うシュチュエーションがない
  オフラインでページの要求があったことを記録しておいて、オンラインで、ページ更新、WebPush 通知送付等をしてもいいかもしれません。
  私の想像力が不足しているだけかもですが、有効利用できる使用可能なユースケースが思い浮かびませんでした。

• BroadCast Update 使えそう
  SSR のページでも一部画面要素は非同期化を行う場合があります。
  前回表示した情報を一旦表示、その後、裏では最新リソースの取得を行い更新したら対象要素に変更を反映する という挙動が実現できそうに思います。

---

今後実施したいこと

今後実施したいことは以下になります。

• WebPush 通知の深掘り実装、情報収集

• SerivceWorker を generateSW モード で作成する

• SSR の Javaアプリケーションの場合、組み込みがどうなるか 思いを巡らす

以上です。