Thinking Offline at Frontend Conference Zurich

Building a progressively enhanced, offline capable web application requires a different way of thinking. Not only is JavaScript optional, so is the network. Throughout this talk we’ll explore the life of a simple, though not trivial, web application that was built from the ground up as offline first. A base experience, static resources, dynamic pages, data and notifications will all play a part in this story of a new way of working with the web.

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/
Addy Osmani - Offline Storage for Progressive Web Apps - https://bit.ly/cache-vs-db

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

Transcript

1. THINKING
   OFFLINE
   

   View Slide

2. Phil Nash
   @philnash
   http:/
   /philna.sh
   philnash@twilio.com
   

   View Slide

3. THINKING
   OFFLINE
   

   View Slide

4. AN INTRODUCTION
   TO SERVICE
   WORKERS
   

   View Slide

5. SERVICE WORKERS
   ARE SCRIPTS THAT
   INTERCEPT
   NETWORK REQUESTS
   

   View Slide

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

   View Slide

7. AND PROVIDE
   OFFLINE
   EXPERIENCES FOR
   USERS OF WEB
   APPLICATIONS
   

   View Slide

8. AND PROVIDE
   OFFLINE
   EXPERIENCES FOR
   USERS OF WEB
   APPLICATIONS
   

   View Slide

9. AND PROVIDE
   BETTER
   EXPERIENCES FOR
   USERS OF WEB
   APPLICATIONS
   

   View Slide

10. DEMO
    

    View Slide

11. View Slide

12. LET'S MAKE
    EVERYTHING
    OFFLINE!
    

    View Slide

13. A NON-TRIVIAL
    APPLICATION
    

    View Slide

14. View Slide

15. I HAVE A
    CONFESSION
    

    View Slide

16. “A WEB APPLICATION
    THAT WAS BUILT
    FROM THE GROUND
    UP AS OFFLINE
    FIRST”
    

    View Slide

17. PROGRESSIVE
    ENHANCEMENT
    

    View Slide

18. WHAT DO WE
    NEED?
    

    View Slide

19. BASE
    EXPERIENCE
    

    View Slide

20. STATIC ASSETS
    

    View Slide

21. OFFLINE PAGES
    

    View Slide

22. BACKGROUND
    SYNC
    

    View Slide

23. BASE
    EXPERIENCE
    

    View Slide

24. GOOD NEWS!
    

    View Slide

25. STATIC ASSETS
    

    View Slide

26. DEMO
    

    View Slide

27. THE SERVICE
    WORKER
    LIFECYCLE
    

    View Slide

28. INSTALLING
    INSTALLED
    ACTIVATING
    ACTIVATED
    REDUNDANT
    

    View Slide

29. CACHE
    INVALIDATION
    

    View Slide

30. DEMO
    

    View Slide

31. 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
    (
    r
    e
    g
    ) {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    Y
    a
    y
    "
    )
    ;
    r
    e
    g
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    "
    u
    p
    d
    a
    t
    e
    f
    o
    u
    n
    d
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    )
    {
    v
    a
    r w
    o
    r
    k
    e
    r = r
    e
    g
    .
    i
    n
    s
    t
    a
    l
    l
    i
    n
    g
    r
    e
    g
    .
    i
    n
    s
    t
    a
    l
    l
    i
    n
    g
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    "
    s
    t
    a
    t
    e
    c
    h
    a
    n
    g
    e
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    ) {
    i
    f (
    w
    o
    r
    k
    e
    r
    .
    s
    t
    a
    t
    e =
    = "
    i
    n
    s
    t
    a
    l
    l
    e
    d
    "
    ) {
    w
    o
    r
    k
    e
    r
    .
    p
    o
    s
    t
    M
    e
    s
    s
    a
    g
    e
    (
    {
    a
    c
    t
    i
    o
    n
    : "
    u
    p
    d
    a
    t
    e
    "
    }
    )
    ;
    }
    }
    )
    }
    )
    ;
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    0
    8
    .
    0
    9
    .
    1
    0
    .
    1
    1
    .
    

    View Slide

32. s
    e
    l
    f
    .
    s
    k
    i
    p
    W
    a
    i
    t
    i
    n
    g
    (
    )
    ;
    

    View Slide

33. v
    a
    r s
    w = n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    s
    e
    r
    v
    i
    c
    e
    W
    o
    r
    k
    e
    r
    ;
    s
    w
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    "
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    c
    h
    a
    n
    g
    e
    "
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    w
    i
    n
    d
    o
    w
    .
    l
    o
    c
    a
    t
    i
    o
    n
    .
    r
    e
    l
    o
    a
    d
    (
    )
    ;
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    

    View Slide

34. TAKE BACK
    CONTROL
    

    View Slide

35. OFFLINE PAGES
    

    View Slide

36. DATA VS FILES
    

    View Slide

37. “FOR URL
    ADDRESSABLE
    RESOURCES, USE THE
    CACHE API. FOR ALL
    OTHER DATA, USE
    INDEXEDDB”
    

    View Slide

38. http:/
    /bit.ly/cache-vs-db
    

    View Slide

39. IndexedDB
    

    View Slide

40. IDB-PROMISES
    LOCALFORAGE
    IDB-KEYVAL
    DEXIE
    POUCHDB
    

    View Slide

41. IDB-PROMISES
    LOCALFORAGE
    IDB-KEYVAL
    DEXIE
    POUCHDB
    

    View Slide

42. v
    a
    r d
    b = n
    e
    w D
    e
    x
    i
    e
    (
    "
    m
    e
    s
    s
    a
    g
    e
    S
    t
    o
    r
    e
    "
    , {
    a
    u
    t
    o
    O
    p
    e
    n
    : t
    r
    u
    e
    }
    )
    ;
    d
    b
    .
    v
    e
    r
    s
    i
    o
    n
    (
    1
    )
    .
    s
    t
    o
    r
    e
    s
    (
    {
    m
    e
    s
    s
    a
    g
    e
    s
    : "
    +
    +
    ,
    c
    r
    e
    a
    t
    e
    d
    A
    t
    "
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    

    View Slide

43. d
    b
    .
    t
    r
    a
    n
    s
    a
    c
    t
    i
    o
    n
    (
    "
    w
    "
    , d
    b
    .
    m
    e
    s
    s
    a
    g
    e
    s
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    d
    b
    .
    m
    e
    s
    s
    a
    g
    e
    s
    .
    p
    u
    t
    (
    {
    f
    r
    o
    m
    : F
    R
    O
    M
    _
    N
    U
    M
    B
    E
    R
    ,
    t
    o
    : T
    O
    _
    N
    U
    M
    B
    E
    R
    ,
    c
    r
    e
    a
    t
    e
    A
    t
    : n
    e
    w D
    a
    t
    e
    (
    )
    ,
    b
    o
    d
    y
    : "
    S
    e
    r
    v
    i
    c
    e W
    o
    r
    k
    e
    r
    s r
    o
    c
    k "
    }
    )
    .
    t
    h
    e
    n
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    m
    e
    s
    s
    a
    g
    e
    )
    {
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    "
    Y
    a
    y
    "
    )
    ;
    }
    )
    ;
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    0
    8
    .
    0
    9
    .
    1
    0
    .
    

    View Slide

44. d
    b
    .
    t
    r
    a
    n
    s
    a
    c
    t
    i
    o
    n
    (
    "
    r
    "
    , d
    b
    .
    m
    e
    s
    s
    a
    g
    e
    s
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    d
    b
    .
    m
    e
    s
    s
    a
    g
    e
    s
    .
    e
    a
    c
    h
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    i
    t
    e
    m
    , c
    u
    r
    s
    o
    r
    ) {
    r
    e
    n
    d
    e
    r
    (
    i
    t
    e
    m
    )
    ;
    }
    )
    ;
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    

    View Slide

45. RENDER ON THE
    SERVER
    

    View Slide

46. View Slide

47. APP SHELL
    

    View Slide

48. View Slide

49. BOOTSTRAP
    FROM THE PAGE
    OR THE
    DATABASE
    

    View Slide

50. UNIVERSAL
    JAVASCRIPT
    

    View Slide

51. BACKGROUND
    SYNC
    

    View Slide

52. DEMO
    

    View Slide

53. r
    e
    g
    .
    s
    y
    n
    c
    .
    r
    e
    g
    i
    s
    t
    e
    r
    (
    '
    s
    e
    n
    t
    M
    e
    s
    s
    a
    g
    e
    '
    )
    ;
    

    View Slide

54. s
    e
    l
    f
    .
    a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    '
    s
    y
    n
    c
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    e
    v
    e
    n
    t
    ) {
    /
    / d
    o t
    h
    e t
    h
    i
    n
    g
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    

    View Slide

55. CONFESSION
    TIME
    

    View Slide

56. I LOVE THE WEB
    

    View Slide

57. BUT...
    I JUST
    PUBLISHED MY
    FIRST iOS APP
    

    View Slide

58. Support
    preview
    

    View Slide

59. THINKING
    OFFLINE
    

    View Slide

60. BASE
    EXPERIENCE
    

    View Slide

61. STATIC ASSETS
    

    View Slide

62. OFFLINE PAGES
    

    View Slide

63. BACKGROUND
    SYNC
    

    View Slide

64. TREAT THE
    NETWORK AS
    AN
    ENHANCEMENT
    

    View Slide

65. View Slide

66. THANKS!
    

    View Slide

67. View Slide

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

    View Slide

69. Thanks!
    @philnash
    http:/
    /philna.sh
    philnash@twilio.com
    

    View Slide