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
Web over ServiceWorker
Search
Jxck
February 25, 2017
Technology
6
7.3k
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
22
16k
IE Graduation Certificate
jxck
6
6.2k
RFC 9111: HTTP Caching
jxck
1
730
tc39_study_2
jxck
1
12k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1.1k
Periodic Background Sync
jxck
0
600
Podcast over PWA
jxck
0
290
Yearly Web 2019
jxck
0
210
Other Decks in Technology
See All in Technology
Wasmの気になる最新情報
askua
0
120
WEBサービスを成り立たせるAWSサービス
takano0131
1
180
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
1
140
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
450
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
Introdução a Service Mesh usando o Istio
aeciopires
0
200
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
230
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
Digitization部 紹介資料
sansan33
PRO
1
5.6k
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
290
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Docker and Python
trallard
46
3.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Site-Speed That Sticks
csswizardry
13
910
Building Adaptive Systems
keathley
44
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Code Review Best Practice
trishagee
72
19k
Gamification - CAS2011
davidbonilla
81
5.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Building an army of robots
kneath
306
46k
The World Runs on Bad Software
bkeepers
PRO
72
11k
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