At Your Service

Lets face it. There are more devices out there than you can support with dedicated native apps. And except for very specific cases, most of what you’ll want to do with your app is available through web API’s. And yes, this includes offline support. Whether it’s a loss of cellular connectivity or lousy WiFi at a conference, there will be times when a site can and should be available when the network is not. During this presentation we’ll take a look at Service Workers, which can be used for store data in the client browser and how you can leverage them.

Presented at the following conferences:
- 2016 RWD Summit
- 2016 ConvergeSE
- 2016 HighEdWeb Michigan
- 2016 HighEdWeb National

Transcript

1. At Your Service The Next Generation of Offline Websites Erik Runyon @erunyon #AIM2 2016.highedweb.org
2. <about/> Erik Runyon Technical Director Marketing Communications The University of Notre Dame @erunyon ErikRunyon.com
3. @erunyon #AIM2
4. for all links… ErikRunyon.com
5. 㽈
7. Welcome to the wonderful world of Service Workers
8. What it is… Service workers act as proxy servers between web applications, the browser, and network. They enable the creation of offline experiences by intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
9. http://alistapart.com/article/application-cache-is-a-douchebag
10. … a replacement for Appcache
11. Chrome Android (Chrome) Firefox Opera Safari/iOS Edge IE 40+ 46+ 44+ 27+ None* None** None Current Support * Under Consideration ** In Development http://caniuse.com/#feat=serviceworkers = 61% = 55% = 55% Global U.S.A. Notre Dame
12. WebKit 5-year plan “People think they want it, some of them actually do want it. We should probably do it.” https://trac.webkit.org/wiki/FiveYearPlanFall2015
13. https://webkit.org/status/#specification-service-workers
14. Is ServiceWorker ready? https://jakearchibald.github.io/isserviceworkerready/
15. A Service Worker is a stand-alone javascript file that is initialized from elsewhere in the site and has control over its current scope.
16. Makes extensive use of Promises https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
17. SW Can’t access the DOM directly https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage
18. Browsers that support Service Workers also support ECMAScript6 (ES2015)
19. Why Service Workers?
20. Speed!!!!
21. Network Unavailable
22. Hunny-Do https://github.com/erunyon/hunny-do
23. How Service Workers work
24. Without SW
25. Without SW
26. service-worker.js With SW cache
27. service-worker.js With SW cache
28. Why require HTTPS?
29. HTTP/2
31. http://webpolicy.org/2015/08/25/att-hotspots-now-with-advertising-injection/
32. https://letsencrypt.org/
33. HigherEd 13% redirect to https https://erikrunyon.com/highered-rwd-directory/
34. Service Worker Lifecycle
35. // site.js function loadImage(){ var rand = (Math.floor(Math.random() * 200) + 200); var img = document.createElement("img"); img.src = 'https://placekitten.com/' + rand + '/300'; document.getElementById('images').appendChild(img); } https://demos.erikrunyon.com/sw-img-override/
37. 1. Register // site.js if('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } https://demos.erikrunyon.com/sw-img-override/
38. 2. Installing // sw.js self.addEventListener('install', event => { self.skipWaiting(); }); https://demos.erikrunyon.com/sw-img-override/
39. 3. Activating self.addEventListener('activate', event => { self.clients.claim(); }); https://davidwalsh.name/service-worker-claim
40. 4. Start intercepting requests! self.addEventListener('fetch', event => { let request = event.request; if(request.headers.get('Accept').indexOf('text/html') !== -1){ event.respondWith( fetch(request) ); return; } if(request.headers.get('Accept').indexOf('image') !== -1){ let rand = (Math.floor(Math.random() * 200) + 200); event.respondWith( fetch( 'https://www.placecage.com/' + rand + ‘/300', {mode: 'no-cors'} ) ); } }); https://demos.erikrunyon.com/sw-img-override/
42. 'use strict'; self.addEventListener('install', event => { self.skipWaiting(); }); self.addEventListener('activate', event => { self.clients.claim(); }); self.addEventListener('fetch', event => { let request = event.request; if(request.headers.get('Accept').indexOf('text/html') !== -1){ event.respondWith( fetch(request) ); return; } if(request.headers.get('Accept').indexOf('image') !== -1){ let rand = (Math.floor(Math.random() * 200) + 200); event.respondWith( fetch( 'https://www.placecage.com/' + rand + ‘/300', {mode: 'no-cors'} ) ); } });
43. <picture> <!-- JPEG Images --> <source media="(min-width: 1024px)" srcset="./images/brooklyn.jpg, ./images/brooklyn-2x.jpg 2x, ./images/brooklyn-3x.jpg 3x" type="image/jpeg"> <source media="(min-width: 320px)" srcset="./images/brooklyn-small.jpg, ./images/brooklyn-small-2x.jpg 2x, ./images/brooklyn-small-3x.jpg 3x" type="image/jpeg"> <!-- WebP Images --> <source media="(min-width: 1024px)" srcset="./images/brooklyn.webp, ./images/brooklyn-2x.webp 2x, ./images/brooklyn-3x.webp 3x" type="image/webp"> <source media="(min-width: 320px)" srcset="./images/brooklyn-small.webp, ./images/brooklyn-small-2x.webp 2x, ./images/brooklyn-small-3x.webp 3x" type="image/webp"> <!-- The fallback image --> <img src="./images/brooklyn.jpg" alt="Brooklyn Bridge - New York"> </picture> Cleaning up <picture>
44. @DeanoHume Dynamic Responsive Image Using WebP Images http://deanhume.com/home/blogpost/service-workers--dynamic-responsive-images-using-webp-images/10132
45. Offline
46. A Popular Workflow 1. Store theme, important pages, and offline page in cache 2. Cache additional pages and images as the user browses 3. On repeat visit, theme files default to the cache 4. Pages default to the network 5. Account for missing pages and images while offline https://erikrunyon.com/sw.js
47. 1. Register // site.js if('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }
48. 2. Installing self.addEventListener('install', function(event) { event.waitUntil( caches.open(my_cache_version).then(function(cache) { return cache.addAll([ '/css/images/leaves-right.jpg', '/css/images/icons-social.png', '/css/site.css', '/js/site.js', '/', '/offline/' ]); }).then( () => self.skipWaiting() ) ); }); https://erikrunyon.com/sw.js
49. 3. Activating self.addEventListener('activate', event => { event.waitUntil( caches.keys() .then( keys => { return Promise.all(keys .filter(key => key.indexOf(my_cache_version) !== 0) .map(key => caches.delete(key)) ); }); ).then( () => self.clients.claim() ); }); https://erikrunyon.com/sw.js
50. 4. Start intercepting requests! // Images (return SVG when offline) if (request.headers.get('Accept').indexOf('image') !== -1) { return new Response('<svg role="img" …</svg>', {headers: {'Content-Type': 'image/svg+xml'}} ); } // HTML if (request.headers.get('Accept').indexOf('text/html') !== -1) { // Do something } https://erikrunyon.com/sw.js
51. Offline Forms
53. Misc
54. Terminated when not in use, and restarted when it's next needed (can’t persist variables).
55. Dynamically Update Cache Version https://erikrunyon.com/2016/03/service-worker-version-using-jekyll/ 'use strict'; const version = ‘{{ site.time | date: ‘%Y%m%d%H%M%S' }}::'; const staticCacheName = version + 'static'; const pagesCacheName = version + 'pages'; const imagesCacheName = version + 'images';
56. Send data to a Service Worker using PostMessage // In the site javascript file window.addEventListener('load', function () { if(navigator.serviceWorker.controller) { navigator.serviceWorker.controller.postMessage({ 'myRandomStuff': { width:document.body.clientWidth, height:document.body.clientHeight } }); } }); // In the Service Worker self.addEventListener('message', event => { console.log(event.data.myRandomStuff); }); https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage
57. Service Workers in the Wild • lyza.com* • adactio.com* • ponyfoo.com* • smashingmagazine.com* • medium.com • modernizr.com • serviceworke.rs • theguardian.com • platform-status.mozilla.org chrome://serviceworker-internals/
58. What else will Service Workers do? 1. Handling push notifications 2. Background data synchronization 3. Responding to resource requests from other origins 4. Entering a geo-fence 5. Reacting to a particular time & date https://w3c.github.io/ServiceWorker/
59. https://serviceworke.rs/ ServiceWorker Cookbook
60. Working with Service Workers
61. Chrome Dev Tools
62. Chrome Dev Tools
63. chrome://serviceworker-internals/
64. Progressive Web Apps
65. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging. https://developers.google.com/web/progressive-web-apps/ “
66. Web App Manifest https://w3c.github.io/manifest/ This specification defines a JSON-based manifest file that provides developers with a centralized place to put metadata associated with a web application. This metadata includes, but is not limited to, the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application.
67. Installable Web Apps • is associated with a manifest with at least a name member and a suitable icon. • is served over a secure network connection. • has a sensible content security policy. • is able to responsibly adapt to display on a variety of screen sizes, catering for both mobile and desktop. • is able to function without a network connection. • is repeatedly used by the end-user over some extended period of time. • has been explicitly marked by the user as one that they value and trust (e.g., by bookmarking or "starring" it). https://w3c.github.io/manifest/
68. Google’s pre-reqs • Must have a web app manifest file • The manifest must have a `short_name`, a name for display in the banner • A start URL (e.g. / or index.html) which must be loadable • At least an `144x144` PNG icon • Icon declarations should include a mime type of image/png • Should have a service worker registered on the site • Served over HTTPS (service worker requires HTTPS for security) • The user has visited your site at least twice, with at least five minutes between visits https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
69. manifest.json
70. • fullscreen: take over the whole screen. • standalone: opens the app with a status bar. • minimal-ui: like on iOS, the app is fullscreen, but certain actions can cause the navigation bar and back/forward buttons to reappear. • browser: opens your app with normal browser toolbars and buttons. “display” options
73. https://www.nd.edu/?sw=true
74. PWA Resources
75. https://codelabs.developers.google.com/codelabs/your-first-pwapp/ Your First Progressive Web App
76. http://bit.ly/chrome-server Web Server for Chrome
77. http://bit.ly/google-lighthouse Lighthouse
78. https://github.com/GoogleChrome/ Google Chrome on GitHub
79. https://www.smashingmagazine.com/serviceWorker.js Smashing Magazine
80. Wrapping Up
81. Find a reason to play with new web technology.
82. Erik Runyon erikrunyon.com @erunyon thank you Credits Offline phone graphic: @tpacket Hunny-Do Design: @zastrow Browser logos: https://github.com/alrra/browser-logos Photos: Lego worker: https://www.flickr.com/photos/stavos52093/ Postage Stamp Show: https://www.flickr.com/photos/vegaskent/3265121626/ Terminator: Dan Shearn - http://mungolovescandy.blogspot.com/