ServiceWorker メモ

初心者のただの勉強メモ

本稿では、普通の JS = scriptタグで読み込まれる従来型の JavaScript という意味で使います。あしからず。

ちゃちゃっと理解したい

• Service Worker の紹介 - Web Fundamentals
  • Google の記事。日本語。複数記事がぶるさがっているのでまとめて読もう
• サービスワーカーの使用 - MDN
  • 20分くらいで読める日本語ドキュメント
  • デモ:
    • デモサイト https://mdn.github.io/sw-test/
    • コード https://mdn.github.io/sw-test/

一通り読んだら大体わかると思うので後は Qiita なり Medium なりでノウハウを集めるのがよい。

普通の JS との違い

• イベントループが違う
  • 普通のJSはレンダリングと同じイベントループで動作するが、ServiceWorker は独立したイベントループで動作
  • ServiceWorker が他のCPUで動作しうるので、「マルチスレッドな並列処理が可能な技術」といえる
  • レンダリングを邪魔しないで処理をする技術ともいえる
• ライフサイクルが違う
  • 普通のJS はブラウザタブを閉じたら終了
  • Serviceworker はブラウザ上で動作し続ける
  • ServiceWorker は複数のページ(scope)の JS と連携して動作する
• DOM 操作はできない
  • ServiceWorker は DOM をいじれない、じゃあ何するのよ？答えは↓
  • fetch, sync, push のイベントで駆動させる
    • fetchイベント: 普通の JS の HTTPリクエストをインターセプト
    • syncイベント: オフラインからの復帰動作を定義
    • pushイベント: 通知関連
  • 

ServiceWorker を作る単位

アプリごとに一つだけ作るのが基本。例えば、一つのサイトで二つのアプリを提供するなら、 sw.js を二つ作って、アプリの機能ごとには作らない。

/app1/index.html
/app1/sw.js
...
/app2/index.html
/app2/sw.js
...

ServiceWorker の実装を変えたい場合、単純にWebブラウザの sw.js を置き換えちゃえばOK。実行中の SeiviceWorker とかどうなるのよ？みたいな疑問はライフサイクルについて、前述の資料で学ぼう。↓のようなライフサイクルとそれに付随するイベントがあるので何かしたい場合は、そのイベントハンドラで実装を書く

ServiceWorker使い道

• オフライン対応

• 通知