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.1k
RFC 9111: HTTP Caching
jxck
1
720
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
590
Podcast over PWA
jxck
0
290
Yearly Web 2019
jxck
0
210
Other Decks in Technology
See All in Technology
Android Audio: Beyond Winning On It
atsushieno
0
300
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
560
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
260
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
4
1.6k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
AWSで始める実践Dagster入門
kitagawaz
1
620
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
110
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
420
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A better future with KSS
kneath
239
17k
Building Applications with DynamoDB
mza
96
6.6k
Building an army of robots
kneath
306
46k
The Pragmatic Product Professional
lauravandoore
36
6.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Automating Front-end Workflow
addyosmani
1370
200k
Context Engineering - Making Every Token Count
addyosmani
3
44
Into the Great Unknown - MozCon
thekraken
40
2k
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