Progressive Web Apps in the Real World

This workshop was first presented at Devoxx UK Conference on the 8th June 2016.

http://cfp.devoxx.co.uk/2016/speaker/dean_hume

Presentation Details
----------------------------------

As web developers, we are constantly striving to provide our users with the best possible browsing experience. Regardless of their device, our aim is to provide them with resilient, performant websites that just work. Imagine if you could take this to the next level and provide your users with a super fast website with a similar experience to native applications. This is where Service Workers come in.

They are a promising game changer that provides developers with powerful features such as offline browsing, periodic background syncs, and push notifications to name just a few!

This talk will dive into Progressive apps and showcase some of the features that are available for developers to start using today.

Topics include:
- The basics of Service Workers
- Eliminating third-party single points of failure
- Supercharging your caching
- Implement offline browsing
- Push notifications on the web
- Background Sync
- How to debug your Service Worker and much more!

In this talk, we will run through working a few working examples and explore the ins and outs of Progressive. This talk is aimed at all web developers regardless of skill level - there is something for everyone!

For more information visit http://deanhume.com

Transcript

1. PROGRESSIVE
   WEB APPS
   in the real world
   

   View Slide

2. Dean Hume
   @deanohume
   

   View Slide

3. A Progressive Web App
   uses modern web
   capabilities to deliver an
   app-like user experience
   “
   

   View Slide

4. CORE DRIVERS
   

   View Slide

5. CORE DRIVERS
   URLS & Links
   

   View Slide

6. CORE DRIVERS
   URLS & Links System Capabilities
   

   View Slide

7. CORE DRIVERS
   URLS & Links
   Accessible
   System Capabilities
   

   View Slide

8. CORE DRIVERS
   URLS & Links
   Accessible
   System Capabilities
   Free!
   

   View Slide

9. These apps aren’t packaged
   and deployed through stores,
   they’re just websites that took
   all the right vitamins.
   Alex Russell
   “
   

   View Slide

10. Awesome
    

    View Slide

11. NO INSTALL NEEDED
    Awesome
    

    View Slide

12. NO INSTALL NEEDED
    NO DOWNLOAD
    Awesome
    

    View Slide

13. NO INSTALL NEEDED
    NO DOWNLOAD
    BUILT ON THE FABRIC OF THE WEB
    Awesome
    

    View Slide

14. You are already using them
    

    View Slide

15. What does this
    actually mean
    for our users?
    

    View Slide

16. What does this
    actually mean
    for our users?
    ★ More engaging
    

    View Slide

17. What does this
    actually mean
    for our users?
    ★ More engaging
    ★ Faster
    

    View Slide

18. What does this
    actually mean
    for our users?
    ★ More engaging
    ★ Faster
    ★ Reliable
    

    View Slide

19. View Slide

20. This
    Talk
    

    View Slide

21. This
    Talk
    1. Understanding Progressive Web Apps
    

    View Slide

22. This
    Talk
    1. Understanding Progressive Web Apps
    2. Engage your users
    

    View Slide

23. This
    Talk
    1. Understanding Progressive Web Apps
    2. Engage your users
    3. Speed up your site
    

    View Slide

24. This
    Talk
    1. Understanding Progressive Web Apps
    2. Engage your users
    3. Speed up your site
    4. Improve reliability
    

    View Slide

25. Understanding
    progressive web
    apps
    1
    

    View Slide

26. Service
    workers
    

    View Slide

27. Think of your web apps requests
    as planes taking off.
    ServiceWorker is the air traffic
    controller that routes the
    requests.
    Jeff Posnick
    “
    

    View Slide

28. “The perfect
    progressive
    enhancement.”
    

    View Slide

29. Behind the scenes
    

    View Slide

30. With Service Workers
    

    View Slide

31. With Service Workers
    

    View Slide

32. With Service Workers
    

    View Slide

33. With Service Workers
    

    View Slide

34. HTTPS Only
    

    View Slide

35. Free SSL
    

    View Slide

36. View Slide

37. Service Workers are
    the key to unlocking
    the power
    

    View Slide

38. Support
    

    View Slide

39. The Approach
    

    View Slide

40. The Approach
    App. Shell Architecture
    

    View Slide

41. The Approach
    Pick & Choose
    App. Shell Architecture
    

    View Slide

42. Application Shell Architecture
    

    View Slide

43. View Slide

44. bit.ly/app-shell
    

    View Slide

45. Or pick & choose
    the features you
    like!
    

    View Slide

46. operasoftware.github.io/pwa-list
    

    View Slide

47. Summary
    ❖ Service Workers
    ❖ SSL only
    ❖ Architecture
    

    View Slide

48. 2.Engage your users
    

    View Slide

49. 2.1 Look and feel
    

    View Slide

50. 2.1 Look and feel
    2.2 Push notifications
    

    View Slide

51. 2.1 Look and feel
    2.3 Add to home screen
    2.2 Push notifications
    

    View Slide

52. Look and feel
    

    View Slide

53. Look and feel
    
    
    
    
    
    
    content="black-translucent">
    

    View Slide

54. Look and feel
    bit.ly/color-custom
    

    View Slide

55. Manifest
    A simple JSON file that
    allows you to control how
    your app appears to the
    user
    

    View Slide

56. {
    lang: "en",
    background_color: "#09adec",
    name: "Building Great Startup Teams",
    short_name: "Building Great Startup Teams",
    display: "standalone",
    icons:
    [
    {
    src: "./images/logo-144.png",
    sizes: "144x144",
    type: "image/png"
    }
    ],
    start_url: "./index.html",
    orientation: "portrait"
    }
    

    View Slide

57. {
    lang: "en",
    background_color: "#09adec",
    name: "Building Great Startup Teams",
    short_name: "Building Great Startup Teams",
    display: "standalone",
    icons:
    [
    {
    src: "./images/logo-144.png",
    sizes: "144x144",
    type: "image/png"
    }
    ],
    start_url: "./index.html",
    orientation: "portrait"
    }
    

    View Slide

58. Customize
    

    View Slide

59. {
    lang: "en",
    background_color: "#09adec",
    name: "Building Great Startup Teams",
    short_name: "Building Great Startup Teams",
    display: "standalone",
    icons:
    [
    {
    src: "./images/logo-144.png",
    sizes: "144x144",
    type: "image/png"
    }
    ],
    start_url: "./index.html",
    orientation: "portrait"
    }
    

    View Slide

60. 
    
    
    
    
    
    
    
    

    View Slide

61. Manifest
    bit.ly/manifest-json
    

    View Slide

62. Manifest Generator
    tomitm.github.io/appmanifest
    

    View Slide

63. Push
    Notifications
    

    View Slide

64. View Slide

65. Three Steps
    1. Subscribe User
    

    View Slide

66. Three Steps
    1. Subscribe User
    2. Save Subscription
    

    View Slide

67. Three Steps
    1. Subscribe User
    2. Save Subscription
    3. Send from Google Cloud
    

    View Slide

68. Subscribe
    User
    

    View Slide

69. if ('serviceWorker' in navigator) {
    }
    

    View Slide

70. if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js').then(function
    (registration) {
    // Registration was successful
    }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
    });
    }
    

    View Slide

71. if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js').then(function
    (registration) {
    // Registration was successful
    registration.pushManager.subscribe({userVisibleOnly: true})
    .then(function(subscription){
    });
    }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
    });
    }
    

    View Slide

72. Save
    Subscription
    

    View Slide

73. if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js').then(function
    (registration) {
    // Registration was successful
    registration.pushManager.subscribe({userVisibleOnly: true})
    .then(function(subscription){
    // Send to Server
    return sendSubscriptionToServer(subscription);
    });
    }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
    });
    }
    

    View Slide

74. Send
    from
    Google
    Cloud
    

    View Slide

75. Manifest
    

    View Slide

76. { "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{ "src": "icon.png", "sizes": "192x192", "type": "image/png"
    }],
    "start_url": "/index.html",
    "display": "standalone",
    "gcm_sender_id": "57874135625436178",
    "gcm_user_visible_only": true,
    "permissions": [
    "gcm"
    ]}
    Manifest
    

    View Slide

77. bit.ly/push-notifications-google
    bit.ly/push-notifications-dean
    Further reading
    

    View Slide

78. https://deanhume.github.io/typography
    

    View Slide

79. Add to home
    screen
    

    View Slide

80. Add to
    home screen
    

    View Slide

81. Add to home screen
    1. You need a manifest.json file
    

    View Slide

82. Add to home screen
    1. You need a manifest.json file
    2. Your manifest file needs a start URL
    

    View Slide

83. Add to home screen
    1. You need a manifest.json file
    2. Your manifest file needs a start URL
    3. You need a 144x144 PNG icon
    

    View Slide

84. Add to home screen
    1. You need a manifest.json file
    2. Your manifest file needs a start URL
    3. You need a 144x144 PNG icon
    4. Your site is using a Service Worker
    running over HTTPS
    

    View Slide

85. Add to home screen
    1. You need a manifest.json file
    2. Your manifest file needs a start URL
    3. You need a 144x144 PNG icon
    4. Your site is using a Service Worker
    running over HTTPS
    5. The user has visited your site at least
    twice, with at least five minutes
    between visits.
    

    View Slide

86. {
    lang: "en",
    background_color: "#09adec",
    name: "Building Great Startup Teams",
    short_name: "Building Great Startup Teams",
    display: "standalone",
    icons:
    [
    {
    src: "./images/logo-144.png",
    sizes: "144x144",
    type: "image/png"
    }
    ],
    start_url: "./index.html",
    orientation: "portrait"
    }
    

    View Slide

87. View Slide

88. Look and feel
    Add to home screen
    Push notifications
    Sum
    m
    ary
    

    View Slide

89. 3.Speed up your site
    

    View Slide

90. 3.1 Caching
    

    View Slide

91. 3.1 Caching
    3.2 Save-Data Header
    

    View Slide

92. 3.1 Caching
    3.3 Background Sync
    3.2 Save-Data Header
    

    View Slide

93. Caching
    

    View Slide

94. With Service Workers
    

    View Slide

95. With Service Workers
    

    View Slide

96. var cacheVersion = 1;
    var currentCache = { assetCache: 'cache' + cacheVersion };
    Caching
    

    View Slide

97. var cacheVersion = 1;
    var currentCache = { assetCache: 'cache' + cacheVersion };
    this.addEventListener('install', event => {
    event.waitUntil(caches.open(currentCache.assetCache)
    .then(function(cache) {
    })
    );
    });
    Caching
    

    View Slide

98. var cacheVersion = 1;
    var currentCache = { assetCache: 'cache' + cacheVersion };
    this.addEventListener('install', event => {
    event.waitUntil(caches.open(currentCache.assetCache)
    .then(function(cache) {
    return cache.addAll(['result.min.css', './js/material.min.js']);
    })
    );
    });
    Caching
    

    View Slide

99. var cacheVersion = 1;
    var currentCache = { assetCache: 'cache' + cacheVersion };
    this.addEventListener('install', event => {
    event.waitUntil(caches.open(currentCache.assetCache)
    .then(function(cache) {
    return cache.addAll(['result.min.css', './js/material.min.js']);
    })
    );
    });
    this.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request)
    .then(function (response) {
    return response || fetch(event.request);
    })
    );
    });
    Caching
    

    View Slide

100. github.com/GoogleChrome/sw-toolbox
     bit.ly/sw-toolbox
     

     View Slide

101. Save-Data Header
     

     View Slide

102. Using Service Workers
     

     View Slide

103. Using Service Workers
     

     View Slide

104. this.addEventListener('fetch', event => {
     if(event.request.headers.get('save-data')){
     if (/\.jpg$|.gif$|.png$/.test(event.request.url)) {
     // We can do something
     event.respondWith(
     fetch(‘low-quality-’ + event.request.url, {
     mode: 'no-cors'
     })
     }
     }
     });
     

     View Slide

105. this.addEventListener('fetch', event => {
     if(event.request.headers.get('save-data')){
     if (/\.jpg$|.gif$|.png$/.test(event.request.url)) {
     // We can do something
     event.respondWith(
     fetch(‘low-quality-’ + event.request.url, {
     mode: 'no-cors'
     })
     }
     }
     });
     

     View Slide

106. this.addEventListener('fetch', event => {
     if(event.request.headers.get('save-data')){
     if (/\.jpg$|.gif$|.png$/.test(event.request.url)) {
     // We can do something
     event.respondWith(
     fetch(‘low-quality-’ + event.request.url, {
     mode: 'no-cors'
     })
     }
     }
     });
     

     View Slide

107. this.addEventListener('fetch', event => {
     if(event.request.headers.get('save-data')){
     if (/\.jpg$|.gif$|.png$/.test(event.request.url)) {
     // We can do something
     event.respondWith(
     fetch(‘low-quality-’ + event.request.url, {
     mode: 'no-cors'
     })
     }
     }
     });
     

     View Slide

108. buildingstartupteams.com
     

     View Slide

109. buildingstartupteams.com
     

     View Slide

110. View Slide

111. Saved 900 KB!
     

     View Slide

112. Background sync
     

     View Slide

113. Using Service Workers
     

     View Slide

114. Using Service Workers
     

     View Slide

115. With Service Workers
     

     View Slide

116. Try later….
     

     View Slide

117. // Request a one-off sync:
     navigator.serviceWorker.ready.then(
     function(swRegistration) {
     return swRegistration.sync.register('myFirstSync');
     });
     

     View Slide

118. // Request a one-off sync:
     navigator.serviceWorker.ready.then(
     function(swRegistration) {
     return swRegistration.sync.register('myFirstSync');
     });
     self.addEventListener('sync', function(event) {
     if (event.tag == 'myFirstSync') {
     event.waitUntil(expensiveOperation());
     }
     });
     

     View Slide

119. // Request a one-off sync:
     navigator.serviceWorker.ready.then(
     function(swRegistration) {
     return swRegistration.sync.register('myFirstSync');
     });
     self.addEventListener('sync', function(event) {
     if (event.tag == 'myFirstSync') {
     event.waitUntil(expensiveOperation());
     }
     });
     

     View Slide

120. Background sync
     bit.ly/background-sync
     

     View Slide

121. Caching
     Background Sync
     Save-Data Header
     Sum
     m
     ary
     

     View Slide

122. 4.Reliable
     

     View Slide

123. 4.1 Offline Browsing
     4.2 3rd Party Scripts
     

     View Slide

124. View Slide

125. Offline
     

     View Slide

126. With Service Workers
     

     View Slide

127. this.addEventListener('fetch', event => {
     };
     

     View Slide

128. this.addEventListener('fetch', event => {
     // Check if the user navigated
     if (event.request.method === 'GET' && event.request.headers.
     get('accept').includes('text/html')) {
     // Respond appropriately
     }
     };
     

     View Slide

129. this.addEventListener('fetch', event => {
     // Check if the user navigated
     if (event.request.method === 'GET' && event.request.headers.
     get('accept').includes('text/html')) {
     // Respond appropriately
     event.respondWith(
     fetch(event.request.url).catch(error => {
     // Return the offline page
     return caches.match('the-offline-page');
     }));
     }
     };
     

     View Slide

130. Offline Applications
     bit.ly/offline-apps
     bit.ly/offline-page
     

     View Slide

131. 3rd Party Scripts
     

     View Slide

132. Server Fails
     

     View Slide

133. View Slide

134. Using Service Workers
     

     View Slide

135. Using Service Workers
     

     View Slide

136. With Service Workers
     

     View Slide

137. function timeout(delay) {
     return new Promise(function(resolve, reject) {
     setTimeout(function(){
     resolve(new Response('', { status: 408, statusText:
     'Request timed out.' }));
     }, delay);
     });
     }
     

     View Slide

138. function timeout(delay) {
     return new Promise(function(resolve, reject) {
     setTimeout(function(){
     resolve(new Response('', { status: 408, statusText:
     'Request timed out.' }));
     }, delay);
     });
     }
     self.addEventListener('fetch', event => {
     });
     

     View Slide

139. function timeout(delay) {
     return new Promise(function(resolve, reject) {
     setTimeout(function(){
     resolve(new Response('', { status: 408, statusText:
     'Request timed out.' }));
     }, delay);
     });
     }
     self.addEventListener('fetch', event => {
     event.respondWith(Promise.race([timeout(6000), fetch
     (event.request.url)]));
     });
     

     View Slide

140. bit.ly/sw-timeout
     

     View Slide

141. Summary
     

     View Slide

142. Summary
     1. Understanding Progressive Web Apps
     2. Engage your users
     3. Speed up your site
     4. Improve reliability
     

     View Slide

143. Performance
     is a feature
     

     View Slide

144. Further reading
     ❖ Shell Architecture - bit.ly/instant-shell
     ❖ Getting Started - bit.ly/starting-pwas
     ❖ Service Worker - bit.ly/pwa-swers
     ❖ Code Labs -bit.ly/code-labs-pwa
     ❖ Recipes
     ➢ bit.ly/mozilla-service-workers
     ➢ bit.ly/chrome-service-workers
     

     View Slide

145. What’s still to come?
     

     View Slide

146. What’s still to come?
     Web Bluetooth
     webbluetoothcg.github.io/web-bluetooth
     Streams API
     jakearchibald.com/2016/streams-ftw
     Web NFC
     w3c.github.io/web-nfc
     Geofencing
     w3c.github.io/geofencing-api
     

     View Slide

147. Thank you!
     @
     deanohum
     e
     

     View Slide