ServiceWorker メモ
初心者のただの勉強メモ
本稿では、普通の JS = scriptタグで読み込まれる従来型の JavaScript という意味で使います。あしからず。
ちゃちゃっと理解したい
-
Service Worker の紹介 - Web Fundamentals
- Google の記事。日本語。複数記事がぶるさがっているのでまとめて読もう
-
サービスワーカーの使用 - MDN
- 20分くらいで読める日本語ドキュメント
- デモ:
- Google の記事。日本語。複数記事がぶるさがっているのでまとめて読もう
- 20分くらいで読める日本語ドキュメント
- デモ:
一通り読んだら大体わかると思うので後は Qiita なり Medium なりでノウハウを集めるのがよい。
普通の JS との違い
- イベントループが違う
- 普通のJSはレンダリングと同じイベントループで動作するが、ServiceWorker は独立したイベントループで動作
- ServiceWorker が他のCPUで動作しうるので、「マルチスレッドな並列処理が可能な技術」といえる
- レンダリングを邪魔しないで処理をする技術ともいえる
- ライフサイクルが違う
- 普通のJS はブラウザタブを閉じたら終了
- Serviceworker はブラウザ上で動作し続ける
- ServiceWorker は複数のページ(scope)の JS と連携して動作する
- DOM 操作はできない
ServiceWorker を作る単位
- 普通のJSはレンダリングと同じイベントループで動作するが、ServiceWorker は独立したイベントループで動作
- ServiceWorker が他のCPUで動作しうるので、「マルチスレッドな並列処理が可能な技術」といえる
- レンダリングを邪魔しないで処理をする技術ともいえる
- 普通のJS はブラウザタブを閉じたら終了
- Serviceworker はブラウザ上で動作し続ける
- ServiceWorker は複数のページ(scope)の JS と連携して動作する
アプリごとに一つだけ作るのが基本。例えば、一つのサイトで二つのアプリを提供するなら、 sw.js
を二つ作って、アプリの機能ごとには作らない。
/app1/index.html
/app1/sw.js
...
/app2/index.html
/app2/sw.js
...
ServiceWorker の実装を変えたい場合、単純にWebブラウザの sw.js
を置き換えちゃえばOK。実行中の SeiviceWorker とかどうなるのよ?みたいな疑問はライフサイクルについて、前述の資料で学ぼう。↓のようなライフサイクルとそれに付随するイベントがあるので何かしたい場合は、そのイベントハンドラで実装を書く
ServiceWorker使い道
オフライン対応
通知
オフライン対応
通知
Author And Source
この問題について(ServiceWorker メモ), 我々は、より多くの情報をここで見つけました https://qiita.com/41semicolon/items/0dc98afb74782e6a3504著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .