Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Service workers your applications never felt so good

4,883 views

Published on

If you have not heard of service workers you must attend this session. Service Workers encompass new browser capabilities, along with shiny new version of AJAX called Fetch. If you have every wanted your web applications to experience many native application features, such as push notifications, service workers is the gateway to your happiness. Have you felt confused by application cache and going offline? Well service workers enable offline experiences in a much cleaner way. But that is not all! If you want to see some of the cool new, advanced web platform features that you will actually use come to this session!

https://love2dev.com/blog/what-is-a-service-worker/

Published in: Technology
  • Be the first to comment

Service workers your applications never felt so good

  1. 1. Service Workers Your Web App Never Felt So Good LOVE2DEV.COM
  2. 2. My Bio Microsoft MVP ASP Insider Edge User Agent Web Developer 25 years Author & Speaker @ChrisLove Love2Dev.com
  3. 3. Slide Decks & Source Code Source Code http://GitHub.com/ docluv Slide Deck http://slideshare.net/docluv/ presentations LOVE2DEV.COM
  4. 4. What is a Modern Web Application? Defining the Front-End LOVE2DEV.COM
  5. 5. “Progressive Web Applications: A New Level of Thinking About the Quality of Your User Experience” https://www.youtube.com/watch?v=EErueQdEXMA Chris Wilson, Google
  6. 6. “Native Apps are a bridging technology (like Flash)” http://bit.ly/2e5Cgry Bruce Lawson, Opera
  7. 7. Peak App? 75% Use 3 or fewer apps per month. comscore.com/USMobil eAppReport2016
  8. 8. LOVE2DEV.COM
  9. 9. But the Web Can’t… • Add to the Homescreen • Work Offline • Persist Data Between Sessions • Do Push Notifications • Access the Camera • Store Files • Connect to my Boat – Seriously? LOVE2DEV.COM
  10. 10. Oh But the Web Can & Does • Add to the Homescreen • Work Offline • Persist Data Between Sessions • Do Push Notifications • Access the Camera • Store Files • Connect to my Boat – Seriously, IoT & the Cloud LOVE2DEV.COM
  11. 11. Let’s See What Service Workers Offer • Work Offline • Persist Data Between Sessions • Do Push Notifications • More… LOVE2DEV.COM
  12. 12. PWA Progressive Web Applications LOVE2DEV.COM
  13. 13. PWA Features •“install” to the home screen •have their own icon (defined by the web developer) •can launch full-screen, portrait or landscape •but “live” on the Web LOVE2DEV.COM
  14. 14. PWA Features •live on the server so no update distribution lag •require no app store or gatekeeper •can work offline •are a normal website on browsers such as Opera Mini, Safari, Windows phones •searchable, indexable, linkable LOVE2DEV.COM
  15. 15. PWA Features •“Feels” like a normal app •Push Notifications (optional) •Background Sync (optional) LOVE2DEV.COM
  16. 16. “These apps aren’t packaged & deployed through stores, they’re just websites that took the right vitamins. They progressively become apps…” Alex Russell Google
  17. 17. PWA Updates •AppCache -> Service Worker •localStorage -> IndexDB •Touch Icons -> Manifest •Save to Homescreen -> Install Banner LOVE2DEV.COM
  18. 18. PWA Requirements • HTTPS • Manifest • Service Worker LOVE2DEV.COM { name: “your application”, … }
  19. 19. PWA Requirements • HTTPS • Manifest • Service Worker LOVE2DEV.COM { name: “your application”, … }
  20. 20. Application Loading Process The 1st Time a User Visits They ‘Install’ the Application
  21. 21. HTTPS •Because PWAs Require a Service Worker They Must Be Secure •HTTPS Protects Against Man in the Middle Atacks LOVE2DEV.COM
  22. 22. HTTPS •Certificates Are Cheap Today •LetsEncrypt.org •AWS Certificate Manager LOVE2DEV.COM
  23. 23. Service Workers •Allow Offline Capabilities •Native Resource Caching •Allow Push Notifications •Data Synch* * Near Future LOVE2DEV.COM
  24. 24. Service Workers More Than an AppCache Replacement LOVE2DEV.COM
  25. 25. Service Workers • allows developers to cache assets when connected, and intercept failed calls to network when offline, so user experience can be maintained LOVE2DEV.COM
  26. 26. Service Workers • Faster loading of assets, even when online • Fastest HTTP Request is the One Never Made LOVE2DEV.COM
  27. 27. Service Workers •Push Notifications LOVE2DEV.COM Even When Browser Is Closed
  28. 28. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration was successful }) .catch(function(err) { // registration failed :( }); } LOVE2DEV.COM
  29. 29. self.addEventListener('install', function (e) { //do something }); LOVE2DEV.COM
  30. 30. self.addEventListener('activate', function (event) { console.log('Service Worker activating.'); }); LOVE2DEV.COM
  31. 31. LOVE2DEV.COM Web ServerWeb Page
  32. 32. LOVE2DEV.COM Web ServerWeb Page Service Worker
  33. 33. LOVE2DEV.COM Web ServerWeb Page Service Worker
  34. 34. LOVE2DEV.COM Web ServerWeb Page Service Worker Cache
  35. 35. Service Worker Cache • Persist Files with Response Headers • Limited by Device Resources • Available Online & Offline LOVE2DEV.COM
  36. 36. self.addEventListener('install', function (e) { e.waitUntil( caches.open(cacheName).then(function (cache) { return cache.addAll(filesToCache) .catch(function (error) { console.log(error); }); }) ); }); LOVE2DEV.COM
  37. 37. self.addEventListener('fetch', function (event) { //intercept fetch request (any request from the UI thread for a file or API) and return from cache or get from server & cache it event.respondWith( caches.match(event.request).then(function (resp) { return resp || fetchAsset(event); }) ); }); LOVE2DEV.COM
  38. 38. Service Worker Cache • Persist Files with Response Headers • Limited by Device Resources • Available Online & Offline LOVE2DEV.COM
  39. 39. LOVE2DEV.COM Web ServerWeb Page Service Worker CacheIndexDB
  40. 40. LOVE2DEV.COM 5 Bars!
  41. 41. LOVE2DEV.COM No Bars 
  42. 42. LOVE2DEV.COM 1 Bar 
  43. 43. LOVE2DEV.COM Lie-Fi :/
  44. 44. Handling Offline LOVE2DEV.COM
  45. 45. LOVE2DEV.COM Web Page Service Worker
  46. 46. LOVE2DEV.COM Web Page Service Worker Cache
  47. 47. Offline API if (!navigator.onLine) { console.log("you are offline"); } window.addEventListener('online', function () { console.log("you have gone offline"); }); window.addEventListener('offline', function () { console.log("you are back online"); }); LOVE2DEV.COM
  48. 48. Debugging Service Workers • Use Developer Tools • Sources • Application • Manifest • Service Workers LOVE2DEV.COM
  49. 49. LOVE2DEV.COM Web Server Web Page Service Worker Cache 2 1
  50. 50. LOVE2DEV.COM Web Server Web Page Service Worker Cache 2
  51. 51. self.addEventListener('install', function (e) { e.waitUntil( … }) ); self.skipWaiting(); }); LOVE2DEV.COM
  52. 52. Service Worker Tools • sw_precache • A node module to generate service worker code that will precache specific resources so they work offline. • https://github.com/googlechrome/sw-precache • sw_toolbox • A collection of service worker tools for offlining runtime requests • https://github.com/GoogleChrome/sw-toolbox LOVE2DEV.COM
  53. 53. Service Worker Resources • Is Service Worker Ready? • https://jakearchibald.github.io/isserviceworkerready/ • Service Worker Cookbook • https://serviceworke.rs/ LOVE2DEV.COM
  54. 54. Immersion LOVE2DEV.COM
  55. 55. Add Application to Home Screen • Has a web app manifest file with: • a short_name (used on the home screen) • a name (used in the banner) • a 144x144 png icon • a start_url that loads • Has a service worker registered on your site. • Is served over HTTPS (. • Is visited at least twice, with at least five minutes between visits. LOVE2DEV.COM
  56. 56. LOVE2DEV.COM
  57. 57. LOVE2DEV.COM
  58. 58. Push Notifications • Require Service Worker so they operate in the background • Work even when the browser is closed LOVE2DEV.COM
  59. 59. • 72% increase in time spent for users visiting via a push notification • 26% increase in average spend per visit by members arriving via a push notification • +50% repeat visits within 3 month LOVE2DEV.COM
  60. 60. Two Technologies • push is invoked when a server supplies information to a service worker; • a notification is the action of a showing information to a user LOVE2DEV.COM
  61. 61. serviceWorkerRegistration .showNotification(title, options); LOVE2DEV.COM
  62. 62. { "body": "Did you make a $1,000,000 purchase at Dr. Evil...", "icon": "images/ccard.png", "vibrate": [200, 100, 200, 100, 200, 100, 400], "tag": "request", "actions": [ { "action": "yes", "title": "Yes", "icon": "images/yes.png" }, { "action": "no", "title": "No", "icon": "images/no.png" } ] } LOVE2DEV.COM
  63. 63. Request User Permission function initialiseState() { if (Notification.permission !== 'granted') { console.log('The user has not granted the notification permission.'); return; } else if (Notification.permission === “blocked”) { /* the user has previously denied push. Can't reprompt. */ } else { /* show a prompt to the user */ } LOVE2DEV.COM
  64. 64. Request User Permission // Use serviceWorker.ready so this is only invoked // when the service worker is available. navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { serviceWorkerRegistration.pushManager.getSubscription() .then(function(subscription) { if (!subscription) { // Set appropriate app states. return; } }) .catch(function(err) { console.log('Error during getSubscription()', err); }); }); } LOVE2DEV.COM

×