Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
そろそろはじめる Service Worker @ SpeeeKaigi #3
Search
Yuki Hattori
September 05, 2017
Programming
0
4.5k
そろそろはじめる Service Worker @ SpeeeKaigi #3
そろそろはじめる Service Worker @ SpeeeKaigi #3
Yuki Hattori
September 05, 2017
Tweet
Share
More Decks by Yuki Hattori
See All by Yuki Hattori
Marp for VS Code 拡張機能開発の舞台裏 - VS Code Conference Japan 2024
yhatt
0
450
jsx-slack のご紹介&実践 Slack アプリ開発
yhatt
0
1.2k
Marp Basic Example
yhatt
5
510k
Introducing Marp's Gaia Theme
yhatt
5
450k
jsx-slack: React ⾵ Block Kit
yhatt
1
7.6k
Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで
yhatt
2
2.6k
OSSの海に投げ出されよう @ Speee Cafe Meetup #2
yhatt
1
2.3k
Electronを勉強していただけなのに... @ Meguro.es #5
yhatt
4
5.8k
Other Decks in Programming
See All in Programming
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
230
Rails アプリ地図考 Flush Cut
makicamel
1
130
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
技術を改善し続ける
gumioji
0
110
Open source software: how to live long and go far
gaelvaroquaux
0
650
Domain-Driven Transformation
hschwentner
2
1.9k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
100
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
230
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
920
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Invisible Side of Design
smashingmag
299
50k
The Cult of Friendly URLs
andyhume
78
6.2k
Navigating Team Friction
lara
183
15k
Thoughts on Productivity
jonyablonski
69
4.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Music & Morning Musume
bryan
46
6.4k
It's Worth the Effort
3n
184
28k
Side Projects
sachag
452
42k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Speed Design
sergeychernyshev
27
800
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
そろそろはじめる Service Worker 2017-08-25 SpeeeKaigi#3 株式会社Speee エンジニア組織推進室 / 服部 雄輝
自己紹介 服部 雄輝 (@yhatt) エンジニア組織推進室 マイブーム: Minecraft で鉄道服部線を引く 携わるプロダクト エンジニア採用支援全般
(システム開発/デザイン) Speee Library システム開発 etc... 2
Agenda Service Worker? Worker について Service Worker で できること/使い方 デモ
1. オフラインキャッシュ 2. ローカルプロクシ 3. プッシュ通知 まとめ 3
Service Worker? 4
Worker について (おさらい) 5
Worker ブラウザで JS をマルチスレッドで動かす仕組み HTML の表示処理をブロックしない 重い JS をバックグラウンドで動かせる Web
Worker (2010 年頃〜) 別プロセスで、指定した JS を実行できる メインスレッドとは postMessage() でやり取り const myWorker = new Worker("worker.js"); そろそろはじめる Service Worker 6
Worker family Web Worker 単一のページから呼び出される Worker 古くからある割に、あまりユースケースを見たことが無い Shared Worker 複数ページ間で共有される
Worker (ブラウザサポートがあまり進まず) Service Worker ページの外で動く Worker ブラウザにインストールされ、バックグラウンドで動作 そろそろはじめる Service Worker 7
Service Worker でできること オフラインキャッシュ (Cache API) プッシュ通知 (Web Push API)
リソースの先読み バックグラウンド同期 クライアントサイドトランスパイル ジオフェンシング (Geolocation API) and more... そろそろはじめる Service Worker 8
Service Worker 対応ブラウザ Chrome (含 Android), Firefox, Opera が対応済み Edge
は開発中、Safari も 今月3日に開発を表明 -- from Can I use... “ “ そろそろはじめる Service Worker 9
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
デモ そろそろはじめる Service Worker 11
yhatt/service-worker-playground https://github.com/yhatt/service-worker-playground そろそろはじめる Service Worker 12
Demo 1 オフラインキャッシュ http://127.0.0.1:8080/of ine_cache/ そろそろはじめる Service Worker 13
-- from The of ine cookbook - JakeArchibald.com “ “
そろそろはじめる Service Worker 14
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
ポイント Fetch API ネットワークリクエストを表現する API Request/Response インターフェース クロスオリジンの情報も保持される ドメインを超えたキャッシュも可能 Cache
API キャッシュをコントロールするための API ブラウザが適切に管理 & Cache Versioning そろそろはじめる Service Worker 16
Demo 2 応用編:ローカルプロクシ http://127.0.0.1:8080/pie_chart_image_proxy/ そろそろはじめる Service Worker 17
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
そろそろはじめる Service Worker 19
さらなる応用例 画像の 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
Demo 3 プッシュ通知 (Web Push API) http://127.0.0.1:8080/push_noti cation/ そろそろはじめる Service
Worker 21
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
プッシュ通知の Service Worker Worker は通知の表示部分を請け負う 通知を管理するのは Web Push API の仕事
Worker の push イベントが通知に反応 Service Worker がバックグラウンドで動く事を利用する Web Push API "VAPID" という仕様で、購読・通知処理の通信を行う 結構大変なので、ライブラリの使用がお勧め https://www.npmjs.com/package/web-push そろそろはじめる Service Worker 23
[再掲] Service Worker でできること オフラインキャッシュ (Cache API) プッシュ通知 (Web Push
API) リソースの先読み バックグラウンド同期 クライアントサイドトランスパイル ジオフェンシング (Geolocation API) and more... そろそろはじめる Service Worker 24
Service Worker の可能性 = ∞ そろそろはじめる Service Worker 25
まとめ Service Worker は実装はシンプルだが、 活用の幅がとにかく広い キャッシュ目的以外にも... クライアントサイド処理 (Proxy etc...) バックグラウンド処理
(Push / Sync etc...) Web アプリのリッチ化に、様々な側面から貢献する可能性 もちろん関連 API の習得は必要 例:データの永続化 IndexedDB サーバー or クライアントは良く吟味すべし! そろそろはじめる Service Worker 26
ありがとうございました @yhatt そろそろはじめる Service Worker 27