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.7k
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
15k
IE Graduation Certificate
jxck
6
5.9k
RFC 9111: HTTP Caching
jxck
0
560
tc39_study_2
jxck
1
2.4k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
930
Web Components 元年 v3 / Web Components first year v3
jxck
1
890
Periodic Background Sync
jxck
0
480
Podcast over PWA
jxck
0
210
Yearly Web 2019
jxck
0
140
Other Decks in Technology
See All in Technology
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
Classmethod Odyssey 登壇資料
yamahiro
0
390
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Docker and Python
trallard
37
2.9k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Gamification - CAS2011
davidbonilla
78
4.9k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Agile that works and the tools we love
rasmusluckow
325
20k
Web development in the modern age
philhawksworth
203
10k
Statistics for Hackers
jakevdp
792
220k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
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