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
460
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
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
960
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
510
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
color-scheme: light dark; を完全に理解する
uhyo
7
490
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
技術を改善し続ける
gumioji
0
120
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
410
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Designing for Performance
lara
604
68k
Practical Orchestrator
shlominoach
186
10k
Writing Fast Ruby
sferik
628
61k
How GitHub (no longer) Works
holman
314
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Automating Front-end Workflow
addyosmani
1368
200k
GitHub's CSS Performance
jonrohan
1030
460k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
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 先を xxx@b.png に変更 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