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
710
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
340
Swift Updates - Learn Languages 2025
koher
2
450
ProxyによるWindow間RPC機構の構築
syumai
3
1k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
160
Laravel Boost 超入門
fire_arlo
2
200
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Namespace and Its Future
tagomoris
6
690
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.3k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
700
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
AI時代のUIはどこへ行く?
yusukebe
14
7.9k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
87
4.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Writing Fast Ruby
sferik
628
62k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.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