〜Workbox v3 release記念〜 土屋和良 / GMO Pepabo, Inc. 2018.03.16 フロントエンドテックミーティング#1 in pepabo

4. 🎉

11. 🤔

14. 🤔

15. ☓ ☓

20.
🤔

24. if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js');
});
}

25. const urls = [ '/main.css', '/main.js']
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll(urls);
})
);
});

26. self.addEventListener('fetch', event => {
event.respondWith(
caches.open('v1').then(cache => {
return cache.match(event.request)
}).then(response => {
return response || fetch(event.request).then(response =>{
cache.put(event.request, response.clone())
return response
})
})
)
})

27. const urls = [ '/main.css', '/main.js']
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll(urls);
})
);
});

28. const urls = [ '/main.css', '/main.js']
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll(urls);
})
);
});

29. const urls = [ '/main.css', '/main.js']
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll(urls);
})
);
});

30. const urls = [ '/main.css', '/main.js']
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll(urls);
})
);
});

31. const urls = [ '/main.css', '/main.js']
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll(urls);
})
);
});

34. $ npm install workbox-cli -g
$ workbox wizard
? What is the root of your web app (i.e. which directory do you
deploy)? public/
? Which file types would you like to precache? jpg, svg, js, css
? Where would you like your service worker file to be saved?
public/sw.js
? Where would you like to save these configuration options?
workbox-config.js
To build your service worker, run
workbox generateSW workbox-config.js

35. module.exports = {
"globDirectory": "public/",
"globPatterns": [
"**/*.{jpg,svg,html,js,css}"
],
"swDest": "public/sw.js"
};

36. importScripts("https://storage.googleapis.com/workbox-cdn/releases/
3.0.0/workbox-sw.js");
self.__precacheManifest = [
{
"url": "asset/js/main.js",
"revision": "71dceaabcd85c771e9fa5d9fd55611f3"
},
{
"url": "asset/css/main.css",
"revision": "f36962480cadf645eede3627f3db16f2"
},
… many files …
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

38. const transform = (manifestEntries) => {
const cdnOrigin = ‘https://cdn.example.com/'
const now = new Date()
const query = '?' + now.getFullYear() + now.getMonth() + now.getDate()
const manifest = manifestEntries.map(entry => {
entry.url = cdnOrigin + entry.url + query
return entry
})
return {manifest, warnings: []}
}
module.exports = {
...otherConfig
manifestTransforms: [
transform
]
}

39. importScripts("https://storage.googleapis.com/workbox-cdn/releases/
3.0.0/workbox-sw.js");
self.__precacheManifest = [
{
"url": “https://example.com/asset/js/main.js?20180316”,
"revision": "71dceaabcd85c771e9fa5d9fd55611f3"
},
{
"url": “https://example.com/asset/css/main.css?20180316”,
"revision": "f36962480cadf645eede3627f3db16f2"
},
… many files …
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

41. module.exports = {
...otherConfig
runtimeCaching: [{
urlPattern: new RegExp('^https://api.example.com/'),
handler: 'networkFirst',
options: {
cacheName: 'my-api-cache',
expiration: {
maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
}
}
}]
}