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

An Introduction to Service Workers

An Introduction to Service Workers

Service Workers are the biggest thing to hit the browser since XMLHttpRequest. We'll take a look at what the Service Worker can do for your app and more importantly, your users. We'll see the surprisingly small amount of code you need to get started with a Service Worker and finally we'll take a look at Progressive Web Apps and how the Service Worker will take part in a revolution for web applications.

--

Links:

Offline apps course on Udacity: https://www.udacity.com/course/offline-web-applications--ud899

The demo SMS app: https://github.com/philnash/sms-messages-app

HTML5Rocks intro to service worker: http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Service Worker spec: https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
Is Service Worker Ready Yet? https://jakearchibald.github.io/isserviceworkerready/
And resources: https://jakearchibald.github.io/isserviceworkerready/resources.html
Service Worker Cookbook: http://www.serviceworke.rs/

Twilio Blog: Web powered SMS inbox with push notifications: https://www.twilio.com/blog/2016/02/web-powered-sms-inbox-with-service-worker-push-notifications.html
Background sync: https://developers.google.com/web/updates/2015/12/background-sync?hl=en

Phil Nash

June 15, 2016
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. AN INTRODUCTION
    TO SERVICE
    WORKERS

    View full-size slide

  2. Phil Nash
    @philnash
    http:/
    /philna.sh
    [email protected]

    View full-size slide

  3. AN INTRODUCTION
    TO SERVICE
    WORKERS

    View full-size slide

  4. SERVICE WORKERS
    ARE SCRIPTS THAT
    INTERCEPT
    NETWORK REQUESTS

    View full-size slide

  5. SO WEB DEVELOPERS
    CAN TREAT THE
    NETWORK AS AN
    ENHANCEMENT

    View full-size slide

  6. AND PROVIDE
    OFFLINE
    EXPERIENCES FOR
    USERS OF WEB
    APPLICATIONS

    View full-size slide

  7. A SLIGHTLY LONGER
    INTRODUCTION TO
    SERVICE WORKERS

    View full-size slide

  8. XMLHttpRequest

    View full-size slide

  9. IN THE FUTURE WE
    WILL WONDER HOW
    WE COPED WITHOUT
    SERVICE WORKERS

    View full-size slide

  10. THE BIRTH OF
    THE SERVICE
    WORKER

    View full-size slide

  11. The Application Cache
    C
    A
    C
    H
    E M
    A
    N
    I
    F
    E
    S
    T
    # V
    e
    r
    s
    i
    o
    n 7
    C
    A
    C
    H
    E
    :
    # S
    t
    y
    l
    e
    s
    h
    e
    e
    t
    s
    /
    s
    t
    y
    l
    e
    /
    a
    p
    p
    .
    c
    s
    s
    # J
    a
    v
    a
    S
    c
    r
    i
    p
    t
    s
    /
    j
    s
    /
    a
    p
    p
    .
    j
    s
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    0
    8
    .

    View full-size slide

  12. “THE APPLICATION CACHE IS A
    DOUCHEBAG”

    View full-size slide

  13. The Spec
    https:/
    /slightlyoff.github.io/ServiceWorker/spec/service_worker/

    View full-size slide

  14. Browsers
    40 27 44

    View full-size slide

  15. SO WHAT DOES
    IT REALLY DO?

    View full-size slide

  16. Install it
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    s
    e
    r
    v
    i
    c
    e
    W
    o
    r
    k
    e
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    (
    "
    /
    s
    w
    .
    j
    s
    "
    )
    ;

    View full-size slide

  17. Install it
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    s
    e
    r
    v
    i
    c
    e
    W
    o
    r
    k
    e
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    (
    "
    /
    s
    w
    .
    j
    s
    "
    , {
    s
    c
    o
    p
    e
    : "
    /
    a
    d
    m
    i
    n
    "
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .

    View full-size slide

  18. Install it
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    s
    e
    r
    v
    i
    c
    e
    W
    o
    r
    k
    e
    r
    .
    r
    e
    g
    i
    s
    t
    e
    r
    (
    "
    /
    s
    w
    .
    j
    s
    "
    )
    .
    t
    h
    e
    n
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    " "
    )
    ;
    }
    )
    .
    c
    a
    t
    c
    h
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    " "
    )
    ;
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .

    View full-size slide

  19. It intercepts network requests
    /
    / s
    w
    .
    j
    s
    s
    e
    l
    f
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    "
    f
    e
    t
    c
    h
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    v
    e
    n
    t
    ) {
    /
    / d
    o s
    o
    m
    e
    t
    h
    i
    n
    g
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .

    View full-size slide

  20. IT'S A PROXY
    THAT YOU
    CONTROL

    View full-size slide

  21. WEB VS NATIVE

    View full-size slide

  22. Native
    Web
    Online by default Offline by default
    Discoverable on the web App store installation

    View full-size slide

  23. Native
    Web
    Offline first Offline by default
    Discoverable on the web App store installation

    View full-size slide

  24. DON'T CARE
    FOR OFFLINE?

    View full-size slide

  25. THERE'S MORE!

    View full-size slide

  26. PUSH
    NOTIFICATIONS

    View full-size slide

  27. Browsers
    42 44

    View full-size slide

  28. WITH GREAT
    POWER…

    View full-size slide

  29. BACKGROUND
    SYNC

    View full-size slide

  30. PROGRESSIVE
    WEB APPS

    View full-size slide

  31. Progressive Web Apps
    • Service Worker (+ HTTPS)
    • manifest.json
    • User engagement

    View full-size slide

  32. APP INSTALL
    BANNERS

    View full-size slide

  33. ICON ON
    HOMESCREEN

    View full-size slide

  34. $$ PROFIT! $$

    View full-size slide

  35. SERVICE
    WORKERS

    View full-size slide

  36. IN THE FUTURE WE
    WILL WONDER HOW
    WE COPED WITHOUT
    SERVICE WORKERS

    View full-size slide

  37. AND IF YOU'RE NOT
    YET CONVINCED...

    View full-size slide

  38. Use the code
    PNASH20
    for 20% off ticket prices

    View full-size slide

  39. Help me!
    On a scale of 0 to 10, how likely is it that you
    would recommend this talk to a friend or
    colleague?
    020 3322 5761

    View full-size slide

  40. Thanks!
    @philnash
    http:/
    /philna.sh
    [email protected]
    On a scale of 0 to 10, how likely is it that you
    would recommend this talk to a friend or
    colleague?
    020 3322 5761

    View full-size slide