1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
console.log("Yay! Workbox is loaded 🎉");
// Cache HTML
workbox.routing.registerRoute(/\.html$/, new workbox.strategies.NetworkFirst());
// Cache JS
workbox.routing.registerRoute(/\.js$/, new workbox.strategies.NetworkFirst());
// Cache CSS
workbox.routing.registerRoute(/\.css$/, new workbox.strategies.StaleWhileRevalidate({cacheName: 'css-cache'}));
// Cache image
workbox.routing.registerRoute(
/\.(?:png|jpg|jpeg|svg|gif|webp)$/,
new workbox.strategies.CacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20, // Cache only 20 images.
maxAgeSeconds: 7 * 24 * 60 * 60, // Cache for a maximum of a week.
})
],
})
);
// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
}),
);
// Cache the underlying font files with a cache-first strategy for 1 year.
workbox.routing.registerRoute(
/^https:\/\/fonts\.gstatic\.com/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}),
],
}),
);
// Workbox injection point
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
} else {
console.log("Boo! Workbox didn't load 😬");
}
|
