Web over ServiceWorker

Inside Frontend #1 2017/2/25

Transcript

1. Web
   over
   ServiceWorker
   Inside Frontend #1 2017/2/25 Jxck
   

   View Slide

2. ● id: Jxck
   ● github: Jxck
   ● twitter: @jxck_
   ● blog: https://blog.jxck.io
   ● podcast: http://mozaic.fm
   ● Love: music
   Jack
   

   View Slide

3. Web vs PC App
   3
   

   View Slide

4. View Slide

5. View Slide

6. Web vs Mobile
   6
   

   View Slide

7. View Slide

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

   View Slide

9. View Slide

10. 10
    more...
    

    View Slide

11. View Slide

12. mozaic.fm ep17
    12
    Service Worker w/ @kinu, @nhiroki_
    http://mozaic.fm/post/117004083098/17-service-worker
    

    View Slide

13. 13
    What’s for ?
    

    View Slide

14. Service Worker
    is
    API
    for
    Offline Support
    14
    

    View Slide

15. Service Worker
    is
    Platform
    for
    New Capability
    15
    

    View Slide

16. 16
    Architecture
    

    View Slide

17. 17
    Proxy as a Service Worker
    onfetch fetch()
    response
    respondWith()
    Cache API
    Browser
    Cache
    add()
    

    View Slide

18. 18
    Pusher as a Service Worker
    onpush
    

    View Slide

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
    

    View Slide

20. 20
    Worker as a Service Worker
    onmessage
    onmessage
    

    View Slide

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
    

    View Slide

22. App Shell
    22
    

    View Slide

23. View Slide

24. 24
    Cache Fetch
    or
    Storage
    

    View Slide

25. 25
    Proxy as a Service Worker
    onfetch fetch()
    article
    respondWith()
    Cache API
    Browser
    Cache
    get() & merge
    

    View Slide

26. Life Cycle
    26
    

    View Slide

27. View Slide

28. 28
    Works even if
    Page, Tab, Browser
    doesn’t open (Android)
    

    View Slide

29. Tutorials
    29
    ● 中級者向け Service Worker Tutorial
    ● Service Worker registration/lifecycle
    

    View Slide

30. Updates
    30
    

    View Slide

31. Foreign Fetch
    31
    

    View Slide

32. Foreign Fetch
    32
    Link: ; rel="serviceworker"
    

    View Slide

33. Scope
    33
    ● Scope is single deep match
    ● Single Controller for Client
    

    View Slide

34. Micro Service Workers
    34
    

    View Slide

35. Install as APK
    35
    

    View Slide

36. Android APK
    36
    Build APK then Install
    

    View Slide

37. Navigation Preload
    37
    

    View Slide

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

    View Slide

39. Background Fetch
    39
    

    View Slide

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

    View Slide

41. More New Caps
    41
    

    View Slide

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
    

    View Slide

43. Platform
    as a
    ServiceWroker
    43
    

    View Slide

44. Jack
    thanks
    

    View Slide