Web
over
ServiceWorker
Inside Frontend #1 2017/2/25 Jxck
Slide 2
Slide 2 text
● id: Jxck
● github: Jxck
● twitter: @jxck_
● blog: https://blog.jxck.io
● podcast: http://mozaic.fm
● Love: music
Jack
Slide 3
Slide 3 text
Web vs PC App
3
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
Web vs Mobile
6
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
8
Capability against
● Native/Low API
● Installable
● Performance
● Permission
● Offline
● etc
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
10
more...
Slide 11
Slide 11 text
11
Slide 12
Slide 12 text
mozaic.fm ep17
12
Service Worker w/ @kinu, @nhiroki_
http://mozaic.fm/post/117004083098/17-service-worker
Slide 13
Slide 13 text
13
What’s for ?
Slide 14
Slide 14 text
Service Worker
is
API
for
Offline Support
14
Slide 15
Slide 15 text
Service Worker
is
Platform
for
New Capability
15
Slide 16
Slide 16 text
16
Architecture
Slide 17
Slide 17 text
17
Proxy as a Service Worker
onfetch fetch()
response
respondWith()
Cache API
Browser
Cache
add()
Slide 18
Slide 18 text
18
Pusher as a Service Worker
onpush
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
20
Worker as a Service Worker
onmessage
onmessage
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
App Shell
22
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
24
Cache Fetch
or
Storage
Slide 25
Slide 25 text
25
Proxy as a Service Worker
onfetch fetch()
article
respondWith()
Cache API
Browser
Cache
get() & merge
Slide 26
Slide 26 text
Life Cycle
26
Slide 27
Slide 27 text
27
Slide 28
Slide 28 text
28
Works even if
Page, Tab, Browser
doesn’t open (Android)
Slide 29
Slide 29 text
Tutorials
29
● 中級者向け Service Worker Tutorial
● Service Worker registration/lifecycle
Slide 30
Slide 30 text
Updates
30
Slide 31
Slide 31 text
Foreign Fetch
31
Slide 32
Slide 32 text
Foreign Fetch
32
Link: ; rel="serviceworker"
Slide 33
Slide 33 text
Scope
33
● Scope is single deep match
● Single Controller for Client