Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web over ServiceWorker
Jxck
February 25, 2017
Technology
6
5.9k
Web over ServiceWorker
Inside Frontend #1 2017/2/25
Jxck
February 25, 2017
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
21
14k
IE Graduation Certificate
jxck
6
5.3k
RFC 9111: HTTP Caching
jxck
0
290
tc39_study_2
jxck
1
980
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
640
Web Components 元年 v3 / Web Components first year v3
jxck
1
610
Periodic Background Sync
jxck
0
330
Podcast over PWA
jxck
0
150
Yearly Web 2019
jxck
0
96
Other Decks in Technology
See All in Technology
Dev Containers ことはじめ - 失敗から学ぶ開発環境運用法
streamwest1629
0
320
GraphQLスキーマ設計の勘所
yukukotani
26
6.1k
日本ディープラーニング協会主催 NeurIPS 2022 技術報告会講演資料
tdailab
0
1.1k
スクラム導入して変わったチーム、組織のありかた
yumechi
0
160
PCL (Point Cloud Library)の基本となぜ点群処理か_2023年_第2版.pdf
cvmlexpertguide
0
150
Optimizing your Swift code
kateinoigakukun
0
1.4k
目指せCoverage100%! AutoScale環境におけるSavings Plans購入戦略 / JAWS-UG_SRE_Coverage
taishin
0
470
Oracle Transaction Manager for Microservices Free 22.3 製品概要
oracle4engineer
PRO
5
100
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
160
cdk deployに必要な権限ってなんだ?
kinyok
0
150
2022年に起きたフロントエンドの変化
sakito
29
17k
地方自治体業務あるある ーアナログ最適化編-
y150saya
1
130
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Making the Leap to Tech Lead
cromwellryan
117
7.7k
It's Worth the Effort
3n
177
26k
Statistics for Hackers
jakevdp
785
210k
How STYLIGHT went responsive
nonsquared
89
4.2k
Making Projects Easy
brettharned
102
4.8k
Design by the Numbers
sachag
271
18k
Designing the Hi-DPI Web
ddemaree
273
32k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
Designing for Performance
lara
600
65k
GitHub's CSS Performance
jonrohan
1020
430k
Transcript
Web over ServiceWorker Inside Frontend #1 2017/2/25 Jxck
• id: Jxck • github: Jxck • twitter: @jxck_ •
blog: https://blog.jxck.io • podcast: http://mozaic.fm • Love: music Jack
Web vs PC App 3
4
5
Web vs Mobile 6
7
8 Capability against • Native/Low API • Installable • Performance
• Permission • Offline • etc
9
10 more...
11
mozaic.fm ep17 12 Service Worker w/ @kinu, @nhiroki_ http://mozaic.fm/post/117004083098/17-service-worker
13 What’s for ?
Service Worker is API for Offline Support 14
Service Worker is Platform for New Capability 15
16 Architecture
17 Proxy as a Service Worker onfetch fetch() response respondWith()
Cache API Browser Cache add()
18 Pusher as a Service Worker onpush
19 TaskManage as a Service Worker onsync onsync !== on-oline/offline
onsync: trigger based on device status network, battery etc onoff/online: toggle of network status
20 Worker as a Service Worker onmessage onmessage
Workers Class Hero I'm free to be whatever I 何になるのも俺の自由だ
Whatever I choose 何を選ぶのも俺の自由だ And I'll hook the request if I want その気になればリクエストだってフックしてやる 21 https://youtu.be/zUADzarhFyA
App Shell 22
23
24 Cache Fetch or Storage
25 Proxy as a Service Worker onfetch fetch() article respondWith()
Cache API Browser Cache get() & merge
Life Cycle 26
27
28 Works even if Page, Tab, Browser doesn’t open (Android)
Tutorials 29 • 中級者向け Service Worker Tutorial • Service Worker
registration/lifecycle
Updates 30
Foreign Fetch 31
Foreign Fetch 32 Link: </worker.js>; rel="serviceworker"
Scope 33 • Scope is single deep match • Single
Controller for Client
Micro Service Workers 34
Install as APK 35
Android APK 36 Build APK then Install
Navigation Preload 37
Navigation Preload 38 fetch Service-Worker-Navigation-Preload: true preloadResponse response
Background Fetch 39
40 Background Fetch Large fetch response UPloading/Downloading Large Media Files
More New Caps 41
42 Capabilities Program Strategy and Goals Q1/Q2 2017 • A2HS
• WebAPKs • Backgournd Fetch • Silent Push • QR Code Scan • Web Share • Origin Trials v2 • 2F-Auth etc
Platform as a ServiceWroker 43
Jack thanks