知ってた人には今さらーって感じかもやけど。
正月休み最後の日ということで、何か新しい目のやつを学びたいなあと思い。
ServiceWorkerでできることやデザインについては追ってたつもりやったけど、実際にコード書いたことはないなということで。
スーパーイカメーカーとかいう丁度よい題材も手元にあることやので、これにServiceWorkerを適応するならどんな感じかとやってみた。
ただ結局リリースはしてなくて、その紆余曲折もまとめてメモ。
ServiceWorkerでやりたかったこと
主にはCache APIによるオフライン対応。
もはや更新の予定がないのでプッシュ通知もいらないし、他のテクいことにも使えなさそう。
最初は勉強がてら手書きで全部いこうかと思ったけど、細かいとこまで考慮しようとすると色んなイベントで色んなことが必要なのと、キャッシュしたいパスをコードに手書きするのはアレやなーってところで、`sw-precache`なるツールがあるのを発見。
これは便利なのでは・・！
sw-precache
- 設定ファイルにキャッシュしたいパスやら設定を指定
- それでもって実行すると、`serviceworker.js`が生成される
- あとはそれを`navigator.ServiceWorker.register()`でロード
静的コンテンツのキャッシュのためだけのツールチェインやけど、今回の要件には必要十分。
// sw-precache-config.js module.exports = { swFile: 'sw.js', staticFileGlobs: [ '**.html', 'dist/**.*', 'font/**/*', 'img/**/*', ], cacheId: 'v1', };
ってのを用意したうえで、これを実行。
sw-precache --config=./sw-precache-config.js --verbose
すると、この場合は`sw.js`ってのが生成される。
あとはクライアントで読み込むだけ。
sw-precache/service-worker-registration.js at master · GoogleChrome/sw-precache · GitHub
これの通りにやっとけばよさそう。
ちなみにCLIからじゃなくてgulpからももちろん使える。
リリースしなかったわけ
既存の作りとの兼ね合い
トップページ -> ボーイ or ガールを作るページっていう2段構えになってて、
- トップひらく
- 規約よむ
- そこからページ遷移
ってのを強制してるので、ページ遷移が必要 = SPAではないのです。
で、どうせオフライン対応するなら`apple-mobile-web-app-capable`的なこともしたい・・、でも作り直すのは面倒よなーと。
そもそもAndroidでホームに追加しようと思ったらなんたらマニフェストとかも必要よね、これは1日で終わらんし、いろいろやっぱ面倒くさい。
完全にオフライン対応するには
例えばGAのjsとかCDNから読んでるファイルとか、いわゆる3rdなドメインに対するリクエストも制御できるように作らないとダメ。
これは後からさくっとやってさくっと対応！みたいな話ではない。
ServiceWorkerの学び方
ことCacheするだけの場合で、今日一日振り返って見て何してたか。
1. ライフサイクルを覚える
これを知らんと始まらない。
けど、全てを細かく覚えるのではなくて、ServiceWorkerのデザインとしてどういうタイミングでどういう動きをするかをざっと把握する。
本当に必要なのは後のコード書くときに嫌でも出てくるので。
2. 開発の仕方を覚える
ページをリロードしてもupdateされないとかそういうの。
ChromeならDevToolsのどこの何を見れば良いかとかを知っておく。
ApplicationパネルにServiceWorkerとCacheとそれぞれあるのでだいたいわかると思うけど。
ちなみに最初は無理かと思ってたけど、localhostでも開発できた。
3. コードの書き方を覚える
以上のステップを経た上でサンプルコードを眺める。
だいたいは`self.addEventListener()`をいくつか書くだけなんやけど・・。
sw-precacheで出力したファイルとか最初に見とけばよかった。
sw-precache/service-worker.tmpl at master · GoogleChrome/sw-precache · GitHub
2017年のアプリ開発は、最初の設計の時点でこういうオフライン対応も見据えて色々やらんといかんのかねー。
どのタイミングでキャッシュを破棄するとか、どうすればできるとか、そのへんも考えておかないと後で困りそう。
なんしかこの`sw-precache`、ServiceWorkerをどう使ってく？っていう手札の中では一番コスパが良いものな気がしてます。
プッシュ通知は通知サーバーの用意とか通知と許可取るタイミングを考えるの大変やし・・。