Web over ServiceWorker - Speaker Deck

Web over ServiceWorker

by Jxck

Slide 1

Slide 1 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Web vs Mobile 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

8 Capability against ● Native/Low API ● Installable ● Performance ● Permission ● Offline ● etc

Slide 9

Slide 9 text

Slide 10

Slide 10 text

10 more...

Slide 11

Slide 11 text

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

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

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

Slide 34

Slide 34 text

Micro Service Workers 34

Slide 35

Slide 35 text

Install as APK 35

Slide 36

Slide 36 text

Android APK 36 Build APK then Install

Slide 37

Slide 37 text

Navigation Preload 37

Slide 38

Slide 38 text

Navigation Preload 38 fetch Service-Worker-Navigation-Preload: true preloadResponse response

Slide 39

Slide 39 text

Background Fetch 39

Slide 40

Slide 40 text

40 Background Fetch Large fetch response UPloading/Downloading Large Media Files

Slide 41

Slide 41 text

More New Caps 41

Slide 42

Slide 42 text

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