Upgrade to Pro — share decks privately, control downloads, hide ads and more …

そろそろはじめる Service Worker @ SpeeeKaigi #3

Yuki Hattori
September 05, 2017

そろそろはじめる Service Worker @ SpeeeKaigi #3

そろそろはじめる Service Worker @ SpeeeKaigi #3

Yuki Hattori

September 05, 2017
Tweet

More Decks by Yuki Hattori

Other Decks in Programming

Transcript

  1. そろそろはじめる
    Service Worker
    2017-08-25 SpeeeKaigi#3
    株式会社Speee エンジニア組織推進室 / 服部 雄輝

    View full-size slide

  2. 自己紹介
    服部 雄輝 (@yhatt) エンジニア組織推進室
    マイブーム: Minecraft で鉄道服部線を引く
    携わるプロダクト
    エンジニア採用支援全般 (システム開発/デザイン)
    Speee Library システム開発 etc...
    2

    View full-size slide

  3. Agenda
    Service Worker?
    Worker について
    Service Worker で できること/使い方
    デモ
    1. オフラインキャッシュ
    2. ローカルプロクシ
    3. プッシュ通知
    まとめ
    3

    View full-size slide

  4. Service Worker?
    4

    View full-size slide

  5. Worker について (おさらい)
    5

    View full-size slide

  6. Worker
    ブラウザで JS をマルチスレッドで動かす仕組み
    HTML の表示処理をブロックしない
    重い JS をバックグラウンドで動かせる
    Web Worker (2010 年頃〜)
    別プロセスで、指定した JS を実行できる
    メインスレッドとは postMessage() でやり取り
    const myWorker = new Worker("worker.js");
    そろそろはじめる Service Worker
    6

    View full-size slide

  7. Worker family
    Web Worker
    単一のページから呼び出される Worker
    古くからある割に、あまりユースケースを見たことが無い
    Shared Worker
    複数ページ間で共有される Worker (ブラウザサポートがあまり進まず)
    Service Worker
    ページの外で動く Worker
    ブラウザにインストールされ、バックグラウンドで動作
    そろそろはじめる Service Worker
    7

    View full-size slide

  8. Service Worker でできること
    オフラインキャッシュ (Cache API)
    プッシュ通知 (Web Push API)
    リソースの先読み
    バックグラウンド同期
    クライアントサイドトランスパイル
    ジオフェンシング (Geolocation API)
    and more...
    そろそろはじめる Service Worker
    8

    View full-size slide

  9. Service Worker 対応ブラウザ
    Chrome (含 Android), Firefox, Opera が対応済み
    Edge は開発中、Safari も 今月3日に開発を表明
    -- from Can I use...


    そろそろはじめる Service Worker
    9

    View full-size slide

  10. Service Worker の使い方
    動作するのは HTTPS か localhost のみ
    // https://example.com/main.js
    navigator.serviceWorker.register(
    '/worker.js', { scope: '/hoge/'}
    )
    /worker.js を Worker としてブラウザに登録
    Worker のコントロール対象は Worker の場所以下
    ( https://example.com/ )
    scope : 対象を明示 ( https://example.com/hoge/ )
    そろそろはじめる Service Worker
    10

    View full-size slide

  11. デモ
    そろそろはじめる Service Worker
    11

    View full-size slide

  12. yhatt/service-worker-playground
    https://github.com/yhatt/service-worker-playground
    そろそろはじめる Service Worker
    12

    View full-size slide

  13. Demo 1
    オフラインキャッシュ
    http://127.0.0.1:8080/of ine_cache/
    そろそろはじめる Service Worker
    13

    View full-size slide

  14. -- from The of ine cookbook - JakeArchibald.com


    そろそろはじめる Service Worker
    14

    View full-size slide

  15. import RoboHash from './robohash'
    self.addEventListener('install', (e) => {
    e.waitUntil(
    caches.open('v1').then((cache) => {
    cache.addAll(RoboHash.urls) //
    キャッシュ対象を追加
    })
    )
    })
    //
    ネットワー
    クリクエスト時に呼び出される
    self.addEventListener('fetch', (e) => {
    e.respondWith(
    caches.match(e.request).then(response =>
    //
    キャッシュがあれば返却、
    無ければ従来通りリクエスト
    response ? response : fetch(e.request)
    })
    )
    そろそろはじめる Service Worker
    15

    View full-size slide

  16. ポイント
    Fetch API
    ネットワークリクエストを表現する API
    Request/Response インターフェース
    クロスオリジンの情報も保持される
    ドメインを超えたキャッシュも可能
    Cache API
    キャッシュをコントロールするための API
    ブラウザが適切に管理 & Cache Versioning
    そろそろはじめる Service Worker
    16

    View full-size slide

  17. Demo 2
    応用編:ローカルプロクシ
    http://127.0.0.1:8080/pie_chart_image_proxy/
    そろそろはじめる Service Worker
    17

    View full-size slide

  18. self.addEventListener('fetch', (e) => {
    const requestUrl = url.parse(e.request.url)
    //
    特定の画像ファイルがリクエストされたら...
    if (requestUrl.hostname === 'localhost' &&
    requestUrl.pathname === '/chart.gif') {
    //
    クエリの情報をグラフ生成クラスに渡す
    const chart = new PieChart(requestUrl.query)
    //
    レスポンスとして返すSVG
    画像を生成
    e.respondWith(
    new Response(
    chart.renderAsSVG(),
    { headers: { 'Content-Type': 'image/svg+xml' } }
    )
    )
    }
    })
    そろそろはじめる Service Worker
    18

    View full-size slide

  19. そろそろはじめる Service Worker
    19

    View full-size slide

  20. さらなる応用例
    画像の A/B テスト
    一部のユーザーのみ、画像の Request 先を [email protected] に変更
    A/B テストの導入をクライアントサイドで完結できる
    ファイル形式の変換
    未対応の画像形式を変換して表示する例
    例: TIFF BMP (with Emscripten)
    https://horo-t.github.io/tiff2bmpsw/tiff2bmpsw.html
    Client-side templating / transpiling
    そろそろはじめる Service Worker
    20

    View full-size slide

  21. Demo 3
    プッシュ通知 (Web Push API)
    http://127.0.0.1:8080/push_noti cation/
    そろそろはじめる Service Worker
    21

    View full-size slide

  22. self.addEventListener('push', (e) => {
    e.waitUntil(
    self.registration.showNotification(
    'Service worker notification',
    { body: e.data.text() },
    )
    )
    })
    self.addEventListener('notificationclick', (e) => {
    e.notification.close()
    e.waitUntil(
    clients.openWindow('http://localhost:8080/notify/')
    )
    })
    そろそろはじめる Service Worker
    22

    View full-size slide

  23. プッシュ通知の Service Worker
    Worker は通知の表示部分を請け負う
    通知を管理するのは Web Push API の仕事
    Worker の push イベントが通知に反応
    Service Worker がバックグラウンドで動く事を利用する
    Web Push API
    "VAPID" という仕様で、購読・通知処理の通信を行う
    結構大変なので、ライブラリの使用がお勧め
    https://www.npmjs.com/package/web-push
    そろそろはじめる Service Worker
    23

    View full-size slide

  24. [再掲] Service Worker でできること
    オフラインキャッシュ (Cache API)
    プッシュ通知 (Web Push API)
    リソースの先読み
    バックグラウンド同期
    クライアントサイドトランスパイル
    ジオフェンシング (Geolocation API)
    and more...
    そろそろはじめる Service Worker
    24

    View full-size slide

  25. Service Worker の可能性 = ∞
    そろそろはじめる Service Worker
    25

    View full-size slide

  26. まとめ
    Service Worker は実装はシンプルだが、 活用の幅がとにかく広い
    キャッシュ目的以外にも...
    クライアントサイド処理 (Proxy etc...)
    バックグラウンド処理 (Push / Sync etc...)
    Web アプリのリッチ化に、様々な側面から貢献する可能性
    もちろん関連 API の習得は必要
    例:データの永続化 IndexedDB
    サーバー or クライアントは良く吟味すべし!
    そろそろはじめる Service Worker
    26

    View full-size slide

  27. ありがとうございました
    @yhatt
    そろそろはじめる Service Worker
    27

    View full-size slide