🧊

Service Worker 使ってますか？〜Frontend Meetup Tokyo vol.2 に行ってきたメモ #frontendmt

まさか2日連続で勉強会に行く日が来るとはー。

ServiceWorkerそんな使ってないけども、とりあえずアップデートしときたい知識ではあったので行ってきた。

Developer Workflow by @s10wen

Japan 2016 | Simon Owen | Front-End Developer

「フロントエンドは始めたばかり、あまり詳しくないという方向けの内容になります」とのこと。

  • Developerのワークフローについて
    • 必ずしも正解ではないのであくまで参考に
  • 今日はなすテーマ
    • Apps & Tools
    • Wellbeing
    • Team Work
    • Improve and Produce

Apps & Tools

  • アプリ開発に使える便利なツールがたくさんある昨今
  • DevToolsすごいし
  • VirtualBoxでMacOSでもWinのテストができたり
  • Sublime好き
  • GitUp使ってるよ
  • SlackやらDocsでコミュニケーション

Hearth

  • 健康でいること・健全な環境で働くこと
  • ヘッドホンつけて集中したり
  • 紙とペンを使ってみたり
  • ブルーライト対策で黒い画面にしたり
    • エディタのテーマのMonokai（この人が作ったんや
  • 自分をリセットする方法をもつ
    • 瞑想とか、一日の終わりにメモで明日につながることを書き残す習慣
  • 自分のデスクを居心地良く
  • 燃え尽きないように注意しよう

Team Work

  • {なぜチームワークと言いつつ以下のようなメモが残っているかは謎 / たぶんWork Flowと間違えた？}
  • Sublimeの便利パッケージを使ってみたり
  • キーボードショートカットを駆使したり
  • 当然ブラインドタッチで
  • パフォーマンス改善やリファクタは細かい単位を繰り返すように
  • つまらん作業は自動化
  • よく打つコマンドはエイリアスに
    • .aliasesを充実させてこ
    • `mkdir -p "$@" && cd "$@"` -> `mkd`とか
    • でもやりすぎ厳禁
  • 便利ときいてもすぐ飛びつかず、まず試す
  • 新しいコードベースをまず作って、テストしてから統合する手法
  • あなたにとってのシンプルは、みんなにとってもシンプルか

Improve and Produce

  • 「TODO: あとでなおす」は危険であるということ
    • そんな暇は永遠にやってこない
    • ビジネス部門とも調整して、負債は早めに対応するべき
  • このスライド作るためにTwitterで意見集めたよ
  • あらためてWebってすごいよね

げんきだいじ！
普段あんまり触れられないトピックスだと思うので、新鮮やった。

Service Worker by @Jxck_

Service Worker registration & lifecycle // Speaker Deck

Service Worker の(概要の一個次くらいのレベル感の)話だそうな。

  • ハマりがちなregistration / lifecycleの話
  • ServiceWorker解説動画あるよ
  • Client x Controllerの関係
    • Client = Window / Controller = SW
    • リクエストをフックできる
    • WebSocketはフックできない（使うことはできる
  • できる
    • WebSocket
    • WebWorker
  • できない
    • LocalStorage（同期I/Oだから）
  • BrowserCacheの手前に、SWのcachesがある
  • SWからリクエストしても、BrowserCacheにあればそれが返ることもある

Lifecycle

  • Install
    • `navigator.serviceWorker.register('worker.js')`
    • `oninstall`イベント -> 状態は`.waiting`に
    • はじめてのものなら`.active`に
    • これでWorkerとしては立ったが、動くのは次にページが開いたとき
    • そうなってはじめてControllerになる（= 色々やれるようになる
  • 状態
    • .installing
    • .waiting
    • .active
  • `claim()`ってのを呼べば、即Controller化できる
  • `update()`するか、リロードすると新しいものを取得
    • 1byteでもファイルに差分があれば新しいものと見なす
  • v2ができてもv1のキャッシュが消えないのでは
    • MaxAgeを無視して必ず24Hでサーバーに取りに行ける
  • `oninstall` / `onactivate`の使いドコロ
    • `oninstall`はv1 / v2で共存できる処理
    • `onactivate`はv1のCleanUpとか

ServiceWorkerっていつ動くの

  • オフラインでも
  • ページ開いてなくても
  • ブラウザが閉じていても
  • 止まる時もある
    • 仕様ではブラウザが止めていいことになってる
    • 必要なデータはハンドラが動いてるうちに、必ず保存するべし

そのページ（パス）で動くSWはどう決まるか

  • 最長マッチ
    • そのパスに対して登録されてる中から長い順にみていく
  • Controllerは必ず1つだけ
  • 多段SWしたい場合（特定のパスでは動かしたくないとか）
    • 愚直にパスをif / else
    • 空SWを使う
  • 登録できるパスにも注意
    • `/js/worker.js`は、`/js/*`のページでしか動かない
    • `Service-Worker-Allowed`をレスポンスヘッダにつけて返すことも

開発tips

  • http[^s]でもSWしたい場合
  • 最新のCanaryがおすすめ
  • registration / update は開発でちゃんと確認する
  • スコープ（パス）の設計は慎重に
  • SWのイベントハンドラ外の部分のコードは動かない可能性が高い
  • ユースケース
    • あると嬉しいパターン
    • ないと動かないパターン <- こっちは要注意

質疑

  • 規模の大きい利用例は？
    • Flipkart（インドのEC）
    • 日本だとSuumo
  • テストつらい
    • `self`だけ上手いことやれば他はただのjs
    • SW自体がもうちょい固まればきっと・・
    • 手動でPushもテストできる
  • Window界から値を飛ばすには？
    • `postMessage()`すればいい
    • DOMParserはSW界にないので、Window界でやらせたりした


ServiceWorkerやるか！って気持ちにあんまりならないのは、iOS全盛の日本ではそんなに使いみちが見出だせないからやなー。
Push通知とキャッシュ機構以外のおもしろい使い方が思い浮かべば・・。