Web over ServiceWorker

Inside Frontend #1 2017/2/25

Transcript

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