The backbone of Progressive Web Apps has to be the ServiceWorker. A new browser paradigm, nearly every new browser api that controls network events, offline functionality, push notifications, background sync, and more are all powered by it. We will go over the path that led to the ServiceWorker design, as well as how to implement a number of cutting ed features on your website or webapp today!

1. ServiceWorkers
@PatrickKettner

2. @PatrickKettner

3. @PatrickKettner

4. @PatrickKettner

5. ServiceWorkers!

6. ServiceWorkers!
Push Notifications
Background Sync
Offline Experiences
o
Y
c
oh hey!
You really enjoy looking
close, don’t you?

7. Offline Experiences

8. AppCache
CACHE MANIFEST
# v1
index.html
cache.html
cache.html?v2
style.css
image1.png

9. AppCache
CACHE MANIFEST
# v1
index.html
cache.html
cache.html?v2
style.css
image1.png

10. AppCache
CACHE MANIFEST
# v1
index.html
cache.html
cache.html?v2
style.css
image1.png

11. AppCache
CACHE MANIFEST
# v1
index.html
cache.html
cache.html?v2
style.css
image1.png

12. AppCache
CACHE MANIFEST
# v1
index.html
cache.html
cache.html?v2
style.css
image1.png

13. AppCache
Static list of files
ALWAYS takes over, even when online
Updates only if the AppCache itself changes
Redirects are treated as failures, and 404
You can cache the AppCache,
causing it to never upgrade

14. AppCache Sucks

15. ServiceWorkers Don’

16. ServiceWorkers Don’
Let’s find out why!

17. Registration

18. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

19. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

20. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

21. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

22. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

23. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

24. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

25. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// Controls any URL on the same domain
// main.js

26. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/js/sw.js")
}
// Controls any URL on the same domain that
// starts with "/js"
// main.js

27. Except…

28. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/js/sw.js", {
scope: "/"
})
}
// main.jsService-Worker-Allowed: /js
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/js/sw.js")
}

29. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/js/sw.js", {
scope: "/"
})
}
// main.js
Service-Worker-Allowed: /js
// Controls any URL on the same domain

30. Handling Failure

31. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
}
// main.js

32. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then()
}
// main.js

33. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function() {// it worked!})
}
// main.js

34. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function(registration) {// it worked!})
}
// main.js

35. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function(registration) {// it worked!})
.catch(function(err) {
// it failed :[
})
}
// main.js

36. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function(registration) {// it worked!})
.catch(function(err) {
console.log("service worker failed:", err)
})
}
// main.js

37. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function(registration) {// it worked!})
.catch(function(err) {
navigator.sendBeacon("/err", err)
})
}
// main.js

38. ServiceWorker

39. ServiceWorker?

40. WebWorker

41. commit 90b52e847359ae902d3f7ce7bc511cadfbc29ea8
Author: Alexey Proskuryakov <ap@webkit.org>
Date: Thu Nov 6 2008 07:04:47 +0000
Implement Worker global object

42. self.onmessage = (e) {
let result =
doSomething(e.data)
postMessage(result)
}
var myWorker = new Worker('worker.js');
myWorker.postMessage(’testing 123');
myWorker.onmessage = (e) => {
doSomethingWithResult(e.data);
}
WebWorkers

43. WebWorkers
React to content you send them
ServiceWorkers
React to external (network) events

44. if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(function(registration) {// it worked!})
.catch(function(err) {
navigator.sendBeacon("/err", err)
})
}
// main.js

45. self.addEventListener('install', (event) => {
// Do some stuff
});
// sw.js

46. self.addEventListener('install', (event) => {
// Do some stuff
});
// sw.js

47. self?

48. // main.js
window.addEventListener("load", function load() {
window.removeEventListener("load", load, false);
},false);

49. // main.js
window.addEventListener("load", function load() {
window.removeEventListener("load", load, false);
},false);

50. window.addEventListener("load", function load() {
window.removeEventListener("load", load, false);
},false);
// main.js
self.addEventListener("install", function () {
// we’ll see…
},false);
// sw.js

51. window.addEventListener("load", function load() {
window.removeEventListener("load", load, false);
},false);
// main.js
self.addEventListener("install", function () {
// we’ll see…
},false);
// sw.js

52. self.addEventListener("load", function load() {
self.removeEventListener("load", load, false);
},false);
// main.js
self.addEventListener("install", function () {
// we’ll see…
},false);
// sw.js

53. self.addEventListener('install', (event) => {
// Do some stuff
});
// sw.js

54. self.addEventListener('install', (event) => {
// Do some stuff
});
// sw.js

55. es6!

58. self.addEventListener('install', (event) => {
// Do some stuff
});
// sw.js

59. Install

60. self.addEventListener('install', (event) => {
// Do some stuff
});
// sw.js

61. self.addEventListener('install', (event) => {
// Cache some stuff
});
// sw.js

62. Cache

64. window.name
document.cookie
Flash Cache
IndexedDB
localStorage
AppCache
Cache API
WebSQL

65. window.name
document.cookie
Flash Cache
IndexedDB
localStorage
AppCache
Cache API
WebSQL

66. window.name
document.cookie
Flash Cache
IndexedDB
localStorage
AppCache
Cache API
WebSQL

67. Cache

68. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
// Cache some stuff
});
// sw.js

69. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
// Cache some stuff
});
// sw.js

70. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
// Cache some stuff
});
// sw.js

71. // sw.js
var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
// Cache some stuff
});

72. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

73. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

74. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

75. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

76. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

77. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

78. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

79. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

80. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

81. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

82. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

83. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);

84. var CACHE_NAME = 'v1';
var toCache = [
'/',
'/css/main.css',
'/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(toCache);
})
);
cache.addAll(toCache);

85. cache.addAll(toCache);cache.addAll([toCache]);
cache.add('./url')
cache.match
cache.matchAll
cache.put
cache.keys
cache.delete

86. Fetch

87. // sw.js
Fetch-ing
Fetch
Triggered
var oReq = new XMLHttpRequest();
<img src="foo.jpg">
<link rel="stylesheet" href="./main.css">
Fetch
Triggered
Fetch
Triggerednavigator.serviceWorker.register('/sw.js')
body {
background: url('./bg.png')
} Fetch
Triggered

88. Easy Mode

89. Easy Mode
aka “Cache Only”

90. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

91. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

92. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

93. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

94. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

95. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

96. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

97. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

98. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

99. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js
fetch

100. fetch

101. fetch('./url')

102. fetch('./url')
var request = new XMLHttpRequest();
request.addEventListener('load', function() {
console.log(this.responseText)
});
request.open('GET', './url', true);
request.send(null);

103. fetch('./url')
var request = new XMLHttpRequest();
request.addEventListener('load', function() {
console.log(this.responseText)
});
request.open('GET', './url', true);
request.send(null);
$.ajax('./url')

104. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

105. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

106. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

107. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

108. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

109. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

110. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

111. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

112. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

113. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => {
if (res) { return res; }
return fetch(event.request).then(res => {
cache.put(event.request, res.clone());
return res
});
}));
});
// sw.js

114. Medium Mode
aka “Cache and Update”

115. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => res))
event.waitUntil(
fetch(event.request).then(res => {
cache.put(event.request, res.clone())
.then(() => res);
});
);
});
// sw.js

116. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => res))
event.waitUntil(
fetch(event.request).then(res => {
cache.put(event.request, res.clone())
.then(() => res);
});
);
});
// sw.js

117. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => res))
event.waitUntil(
fetch(event.request).then(res => {
cache.put(event.request, res.clone())
.then(() => res);
});
);
});
// sw.js

118. self.addEventListener('fetch', event => {
event.respondWith(cache.match(event.request)
.then(res => res))
event.waitUntil(
fetch(event.request).then(res => {
cache.put(event.request, res.clone())
.then(() => res)
.then(refresh);
});
// sw.js
);
});

119. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

120. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

121. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

122. // sw.js
navigator.serviceWorker.register('/sw.js')
navigator.serviceWorker.register('/sw.js')
self.clients.matchAll()
.then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

123. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

124. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

125. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

126. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

127. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

128. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

129. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

130. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

131. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

132. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

133. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

134. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

135. .then(refresh);
});
function refresh(response) {
return self.clients.matchAll().then(clis => {
clis.forEach(client => {
var message = {
type: 'refresh',
url: response.url,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message))
})
})
}

136. // main.js
}

137. // main.js
}
navigator.serviceWorker.onmessage =
function(ev) {
var message = JSON.parse(ev.data);
var lastETag = localStorage.currentETag;
if (lastETag !== message.eTag) {
// alert the user to reload the page
}
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")

138. // main.js
}
navigator.serviceWorker.onmessage =
function(ev) {
var message = JSON.parse(ev.data);
var lastETag = localStorage.currentETag;
if (lastETag !== message.eTag) {
// alert the user to reload the page
}
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")

139. // main.js
}
navigator.serviceWorker.onmessage =
function(ev) {
var message = JSON.parse(ev.data);
var lastETag = localStorage.currentETag;
if (lastETag !== message.eTag) {
// alert the user to reload the page
}
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")

140. // main.js
}
navigator.serviceWorker.onmessage =
function(ev) {
var message = JSON.parse(ev.data);
var lastETag = localStorage.currentETag;
if (lastETag !== message.eTag) {
// alert the user to reload the page
}
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")

141. // main.js
}
navigator.serviceWorker.onmessage =
function(ev) {
var message = JSON.parse(ev.data);
var lastETag = localStorage.currentETag;
if (lastETag !== message.eTag) {
// alert the user to reload the page
}
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")

142. // main.js
}
navigator.serviceWorker.onmessage =
function(ev) {
var message = JSON.parse(ev.data);
var lastETag = localStorage.currentETag;
if (lastETag !== message.eTag) {
// alert the user to reload the page
}
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")

143. And Beyond…

144. https://serviceworke.rs

145. Push Notification

146. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

147. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

148. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

149. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

150. self.addEventListener('push', function(event) {
var push = event.data.text()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

151. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

152. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

153. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

154. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

155. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

156. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body
})
)
})
// sw.js

157. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body,
icon: "/img.jpg",
actions: {
action: true, title: "sure",
action: false, title: "nah"
}
// sw.js

158. self.addEventListener('push', function(event) {
var push = event.data.json()
event.waitUntil(
self.registration
.showNotification(push.title, {
body: push.body,
icon: "/img.jpg",
actions: {
action: true, title: "sure",
action: false, title: "nah"
}
// sw.js

159. https://tests.peter.sh/
notification-generator/

160. That’s just the begining