Service Worker 使ってますか？〜Frontend Meetup Tokyo vol.2

Official

• connpass

Developer Workflow ( @s10wen )

• hp
• Slide

Service Worker ( @Jxck_ )

• Slide
• registration / lifework
• mozaic.fm ep17
• 中級者向けServiceWorker
• ServiceWOrker
• AppCacheから
• なんでも出来るワーカー
• Controller/Client
• Event with Client
  • onfetch
  • onmessage
• Event with Network
  • onpush
  • onsync
• websocket
  • websocketはフックしない
• worker/db
  • LocalStorageからサワレナイ。IndexedDBを使用する
• cache
  • CacheAPI
  • jsから管理するkey-value storeみたいなもの
  • BrowserCacheからもヒットしてしまう

Lifecycle

• install SW
• 順番 1 register() 2 oninstall 3 waiting 4 activate 5 controller
  • ページをリロード時変わる（すぐControllerにしないのはSPAの時に不具合があるかもしれないから）
  • Event発火（oncontrollerchange）
  • claim() <- すぐに動くメソッド
• update() <- スクリプトを取ってるメソッド
• max-age長く設定しても24時間経てばバイパスしてキャッシュを無視する
• v1->v2へすぐ更新したい場合、skipWaiting()を実行
• SWはオフライン、ページ開いた時、ブラウザ閉じた時でも動いている
• いつ死んでもいいように、必要なデータはIndexedDBなどに保存しておかないといけない

Scope

• register（）にスコープを指定出来る
• scopeが複数でもContollerは１つ
• ServiceWorkerAllowed
  • Service worker Allowd: "/foo" っていうHTTPヘッダを追加

Tips

• httpでもSWを起動するには、Chromeの起動オプションで起動する事が可能
• Be friend with Chrome Canaly Dev Tools
• Registration＆updateを常にチェック
• DesignScopeCarefully
• Maintain Cache Carefully
• Never forget save to DB while event lifetime
• Basiclly no code outside event handler
• Start with Implicit Proxy
  • Local Implicit proxy : works same w/o sw
  • Local Origin Server: generate contents in sw
• Push is not only usecase for sw