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.6k
そろそろはじめる 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
610
jsx-slack のご紹介&実践 Slack アプリ開発
yhatt
0
1.3k
Marp Basic Example
yhatt
5
510k
Introducing Marp's Gaia Theme
yhatt
5
460k
jsx-slack: React ⾵ Block Kit
yhatt
1
7.7k
Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで
yhatt
2
2.7k
OSSの海に投げ出されよう @ Speee Cafe Meetup #2
yhatt
1
2.4k
Electronを勉強していただけなのに... @ Meguro.es #5
yhatt
4
6k
Other Decks in Programming
See All in Programming
GraphRAGの仕組みまるわかり
tosuri13
8
490
Create a website using Spatial Web
akkeylab
0
310
WindowInsetsだってテストしたい
ryunen344
1
200
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
GoのGenericsによるslice操作との付き合い方
syumai
3
690
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
童醫院敏捷轉型的實踐經驗
cclai999
0
190
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
120
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
ReadMoreTextView
fornewid
1
480
エラーって何種類あるの?
kajitack
5
310
Featured
See All Featured
A better future with KSS
kneath
239
17k
KATA
mclloyd
29
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Writing Fast Ruby
sferik
628
61k
Code Reviewing Like a Champion
maltzj
524
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Done Done
chrislema
184
16k
Adopting Sorbet at Scale
ufuk
77
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making Projects Easy
brettharned
116
6.3k
Building Applications with DynamoDB
mza
95
6.5k
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