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/

1. Service Workers
Your Web App Never Felt So Good
LOVE2DEV.COM

2. My Bio
Microsoft MVP
ASP Insider
Edge User Agent
Web Developer 25 years
Author & Speaker
@ChrisLove
Love2Dev.com

3. Slide Decks & Source Code
Source Code
http://GitHub.com/
docluv
Slide Deck
http://slideshare.net/docluv/
presentations
LOVE2DEV.COM

4. What is a Modern Web
Application?
Defining the Front-End
LOVE2DEV.COM

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. “Native Apps are a bridging
technology (like Flash)”
http://bit.ly/2e5Cgry Bruce Lawson,
Opera

7. Peak App?
75% Use 3 or fewer apps
per month.
comscore.com/USMobil
eAppReport2016

8. LOVE2DEV.COM

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. 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. Let’s See What Service Workers Offer
• Work Offline
• Persist Data Between
Sessions
• Do Push Notifications
• More…
LOVE2DEV.COM

12. PWA
Progressive Web Applications
LOVE2DEV.COM

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. 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. PWA Features
•“Feels” like a normal app
•Push Notifications (optional)
•Background Sync (optional)
LOVE2DEV.COM

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. PWA Updates
•AppCache -> Service Worker
•localStorage -> IndexDB
•Touch Icons -> Manifest
•Save to Homescreen -> Install Banner
LOVE2DEV.COM

18. PWA Requirements
• HTTPS
• Manifest
• Service Worker
LOVE2DEV.COM
{
name: “your
application”, …
}

19. PWA Requirements
• HTTPS
• Manifest
• Service Worker
LOVE2DEV.COM
{
name: “your
application”, …
}

20. Application Loading Process
The 1st Time a User Visits
They ‘Install’ the
Application

21. HTTPS
•Because PWAs Require a Service Worker
They Must Be Secure
•HTTPS Protects Against Man in the Middle
Atacks
LOVE2DEV.COM

22. HTTPS
•Certificates Are Cheap Today
•LetsEncrypt.org
•AWS Certificate Manager
LOVE2DEV.COM

23. Service Workers
•Allow Offline Capabilities
•Native Resource Caching
•Allow Push Notifications
•Data Synch*
* Near Future
LOVE2DEV.COM

24. Service Workers
More Than an AppCache Replacement
LOVE2DEV.COM

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. Service Workers
• Faster loading of assets, even
when online
• Fastest HTTP Request is the One
Never Made
LOVE2DEV.COM

27. Service Workers
•Push Notifications
LOVE2DEV.COM
Even When Browser Is Closed

28. if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// Registration was successful
})
.catch(function(err) {
// registration failed :(
});
}
LOVE2DEV.COM

29. self.addEventListener('install', function (e) {
//do something
});
LOVE2DEV.COM

30. self.addEventListener('activate', function (event) {
console.log('Service Worker activating.');
});
LOVE2DEV.COM

31. LOVE2DEV.COM
Web
ServerWeb Page

32. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker

33. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker

34. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker
Cache

35. Service Worker Cache
• Persist Files with Response Headers
• Limited by Device Resources
• Available Online & Offline
LOVE2DEV.COM

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. 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. Service Worker Cache
• Persist Files with Response Headers
• Limited by Device Resources
• Available Online & Offline
LOVE2DEV.COM

39. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker
CacheIndexDB

40. LOVE2DEV.COM
5 Bars!

41. LOVE2DEV.COM
No Bars 

42. LOVE2DEV.COM
1 Bar 

43. LOVE2DEV.COM
Lie-Fi :/

44. Handling Offline
LOVE2DEV.COM

45. LOVE2DEV.COM
Web Page
Service Worker

46. LOVE2DEV.COM
Web Page
Service Worker
Cache

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. Debugging Service Workers
• Use Developer Tools
• Sources
• Application
• Manifest
• Service Workers
LOVE2DEV.COM

49. LOVE2DEV.COM
Web
Server
Web
Page
Service
Worker
Cache
2
1

50. LOVE2DEV.COM
Web
Server
Web
Page
Service
Worker
Cache
2

51. self.addEventListener('install', function (e) {
e.waitUntil(
…
})
);
self.skipWaiting();
});
LOVE2DEV.COM

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. Service Worker Resources
• Is Service Worker Ready?
• https://jakearchibald.github.io/isserviceworkerready/
• Service Worker Cookbook
• https://serviceworke.rs/
LOVE2DEV.COM

54. Immersion
LOVE2DEV.COM

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. LOVE2DEV.COM

57. LOVE2DEV.COM

58. Push Notifications
• Require Service Worker so they operate in the
background
• Work even when the browser is closed
LOVE2DEV.COM

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. 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. serviceWorkerRegistration
.showNotification(title, options);
LOVE2DEV.COM

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. 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. 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