Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web over ServiceWorker

Jxck
February 25, 2017

Web over ServiceWorker

Inside Frontend #1 2017/2/25

Jxck

February 25, 2017
Tweet

More Decks by Jxck

Other Decks in Technology

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. 4

    View Slide

  5. 5

    View Slide

  6. Web vs Mobile
    6

    View Slide

  7. 7

    View Slide

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

    View Slide

  9. 9

    View Slide

  10. 10
    more...

    View Slide

  11. 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. 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. 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