この Blog に
以下2点は
- ホーム画面への
追加 - WebPush 通知
実装するに
[TOC]
SerivceWorker が できる こと
一言で
オフラインキャッシュ
インターネット接続が ない 状況でも、 Web アプリケーションへの アクセスを 提供できます。 オフライン時の
データの 同期
IndexDB を使用し、 オフライン時の データを 記録して オンラインに なった タイミングで 送信できます。 WebPush 通知
サイトを閲覧していない 場合でも、 WebPush 通知 で サイトからの 情報を ユーザーに 通知できます。 window.postMessage で
Dom オブジェクトとの 相互の やりとり
ServiceWorker からは、直接 Dom に アクセスできない、 window.postMesasge で やりとりを 行えます。
ServiceWorker 関連の ライブラリ
2018/02/24 日時点での
少しpw-
で
個人的に、
Workbox は、
Workbox の モジュール
静的 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 モード は、
injectManifest モード は、
generateSW モード の
SSR での ServiceWorker の 利用に ついて
組み込みを
HTML の
オフラインキャッシュ機能は
限定的な 利用に なる
AppShell に該当する パーツを Blog Top と して 実装を 進めましたが、 動的 Cache 設定する 必要が あり、 Offline アプリと して、 LightHouse の チェックを 突破したり、 しなかったりします。 静的リソースの Cache は 有効に 効いていそうで、 リソースの 先読み等で スピードアップが 見込めると 思いました。 WebPush通知は
使える
WebPush通知は、通知受信後の Action に 問題が 発生する 可能性が ありますが、 通知自体は 使用できるかと 思います。
オンラインで、WebPush通知受信、 オフライン時に ユーザが 気づいて 通知を クリック、 Cache が 効いていない URL に アクセス。 「現在オフラインに なっています。」になるのは、 許容するかそうは ならないように するか 工夫が 必要に 思います。 リクエストキューは
オフライン状態での 動作が 実現できない、 且つ 更新系の 操作が ないので 使う シュチュエーションが ない
オフラインでページの 要求が あった ことを 記録して おいて、 オンラインで、 ページ更新、 WebPush 通知送付等を しても いいかもしれません。
私の想像力が 不足しているだけかもですが、 有効利用できる 使用可能な ユースケースが 思い浮かびませんでした。 BroadCast Update 使えそう
SSR のページでも 一部画面要素は 非同期化を 行う 場合が あります。
前回表示した情報を 一旦表示、 その 後、 裏では 最新リソースの 取得を 行い 更新したら 対象要素に 変更を 反映する と いう 挙動が 実現できそうに 思います。
今後実施したいこと
今後実施したいことは
WebPush 通知の
深掘り 実装、 情報収集 SerivceWorker を
generateSW モード で 作成する SSR の
Javaアプリケーションの 場合、 組み込みが どうなるか 思いを 巡らす
以上です。
この記事を
書くまで、 importScripts を オプション指定できるのを 知らず、 injectManifest モード で ServiceWorker は 作成しました。 ↩
コメント