Progressive Web Apps in the Real World

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

C620790ae5bf5b50c245b2e0ef95f338?s=128

Dean Hume

June 08, 2016
Tweet

Transcript

  1. 9.

    These apps aren’t packaged and deployed through stores, they’re just

    websites that took all the right vitamins. Alex Russell “
  2. 10.
  3. 18.

    What does this actually mean for our users? ★ More

    engaging ★ Faster ★ Reliable
  4. 19.
  5. 20.
  6. 24.

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

    users 3. Speed up your site 4. Improve reliability
  7. 27.

    Think of your web apps requests as planes taking off.

    ServiceWorker is the air traffic controller that routes the requests. Jeff Posnick “
  8. 35.
  9. 36.
  10. 38.
  11. 43.
  12. 53.

    Look and feel <!-- Chrome, Firefox OS and Opera -->

    <meta name="theme-color" content="#09adec"> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content=" #09adec"> <!-- iOS Safari --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  13. 55.
  14. 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" }
  15. 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" }
  16. 58.
  17. 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" }
  18. 64.
  19. 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); }); }
  20. 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); }); }
  21. 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); }); }
  22. 75.
  23. 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
  24. 82.

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

    2. Your manifest file needs a start URL
  25. 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
  26. 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
  27. 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.
  28. 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" }
  29. 87.
  30. 93.
  31. 97.

    var cacheVersion = 1; var currentCache = { assetCache: 'cache'

    + cacheVersion }; this.addEventListener('install', event => { event.waitUntil(caches.open(currentCache.assetCache) .then(function(cache) { }) ); }); Caching
  32. 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
  33. 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
  34. 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' }) } } });
  35. 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' }) } } });
  36. 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' }) } } });
  37. 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' }) } } });
  38. 110.
  39. 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()); } });
  40. 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()); } });
  41. 122.
  42. 124.
  43. 125.
  44. 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 } };
  45. 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'); })); } };
  46. 133.
  47. 137.

    function timeout(delay) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new

    Response('', { status: 408, statusText: 'Request timed out.' })); }, delay); }); }
  48. 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 => { });
  49. 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)])); });
  50. 141.
  51. 142.

    Summary 1. Understanding Progressive Web Apps 2. Engage your users

    3. Speed up your site 4. Improve reliability
  52. 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