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
6.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
22
15k
IE Graduation Certificate
jxck
6
5.9k
RFC 9111: HTTP Caching
jxck
0
590
tc39_study_2
jxck
1
3.9k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
970
Web Components 元年 v3 / Web Components first year v3
jxck
1
940
Periodic Background Sync
jxck
0
510
Podcast over PWA
jxck
0
220
Yearly Web 2019
jxck
0
140
Other Decks in Technology
See All in Technology
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
560
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
130
0x5F3759DF
ykozw
0
330
AWS DDKを利用したDataOps事始め
beex
1
170
今日から始める技術的負債の解消
leveragestech
3
440
最新のWasm事情
askua
5
2.5k
不要なリソースを自動で定期的に整理する方法 ~Sandboxアカウントのコストを削減しよう!~
amixedcolor
4
240
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
地域DXにおけるGrafana活用事例
wacky
0
380
KubeVirt Networking ONIC 2024
orimanabu
4
730
Amazon Managed Grafana で AWS IoT TwinMaker によるデジタルツインアプリケーションを動かしてみた
wakatsuki
0
110
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
1k
Featured
See All Featured
Designing for Performance
lara
604
68k
Done Done
chrislema
181
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Rails Girls Zürich Keynote
gr2m
93
13k
Producing Creativity
orderedlist
PRO
341
39k
GraphQLとの向き合い方2022年版
quramy
43
13k
Why Our Code Smells
bkeepers
PRO
334
57k
The World Runs on Bad Software
bkeepers
PRO
65
11k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
We Have a Design System, Now What?
morganepeng
50
7.2k
Optimizing for Happiness
mojombo
375
69k
The Language of Interfaces
destraynor
154
24k
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