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.3k
そろそろはじめる 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
jsx-slack のご紹介&実践 Slack アプリ開発
yhatt
0
1k
Marp Basic Example
yhatt
3
500k
Introducing Marp's Gaia Theme
yhatt
5
450k
jsx-slack: React ⾵ Block Kit
yhatt
1
7.1k
Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで
yhatt
2
2.4k
OSSの海に投げ出されよう @ Speee Cafe Meetup #2
yhatt
1
2.1k
Electronを勉強していただけなのに... @ Meguro.es #5
yhatt
4
5.1k
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Ruby Pattern Matching
bkuhlmann
0
920
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
490
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Fireside Chat
paigeccino
19
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
The Mythical Team-Month
searls
214
42k
How to Ace a Technical Interview
jacobian
272
22k
KATA
mclloyd
14
12k
Code Review Best Practice
trishagee
54
15k
Being A Developer After 40
akosma
56
580k
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