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 full-size slide

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

    View full-size slide

  3. Web vs PC App
    3

    View full-size slide

  4. Web vs Mobile
    6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 13
    What’s for ?

    View full-size slide

  8. Service Worker
    is
    API
    for
    Offline Support
    14

    View full-size slide

  9. Service Worker
    is
    Platform
    for
    New Capability
    15

    View full-size slide

  10. 16
    Architecture

    View full-size slide

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

    View full-size slide

  12. 18
    Pusher as a Service Worker
    onpush

    View full-size slide

  13. 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 full-size slide

  14. 20
    Worker as a Service Worker
    onmessage
    onmessage

    View full-size slide

  15. 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 full-size slide

  16. 24
    Cache Fetch
    or
    Storage

    View full-size slide

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

    View full-size slide

  18. Life Cycle
    26

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Foreign Fetch
    31

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Micro Service Workers
    34

    View full-size slide

  25. Install as APK
    35

    View full-size slide

  26. Android APK
    36
    Build APK then Install

    View full-size slide

  27. Navigation Preload
    37

    View full-size slide

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

    View full-size slide

  29. Background Fetch
    39

    View full-size slide

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

    View full-size slide

  31. More New Caps
    41

    View full-size slide

  32. 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 full-size slide

  33. Platform
    as a
    ServiceWroker
    43

    View full-size slide