Web over ServiceWorker

1ff811939fd0923df8321ec6d8bf9d4b?s=47 Jxck
February 25, 2017

Web over ServiceWorker

Inside Frontend #1 2017/2/25

1ff811939fd0923df8321ec6d8bf9d4b?s=128

Jxck

February 25, 2017
Tweet

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