https://learn.athleanx.com/sw.js

1// Import Workbox from the latest CDN
2importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');
3
4workbox.setConfig({ debug: false });
5
6if (workbox) {
7  //console.log(`Yay! Workbox is loaded 🎉`);
8} else {
9  //console.log(`Boo! Workbox didn't load 😭`);
10}
11
12// Skip handling any wp-admin requests
13workbox.routing.registerRoute(
14  ({ url }) => url.pathname.startsWith('/wp-admin'),
15  new workbox.strategies.NetworkOnly()
16);
17
18
19// Cache versioning
20const CACHE_VERSION = 'v2';
21const PRECACHE = `precache-${CACHE_VERSION}`;
22const RUNTIME = `runtime-${CACHE_VERSION}`;
23
24// Precache essential resources
25workbox.precaching.precacheAndRoute([
26  { url: '/site.webmanifest', revision: null },
27  { url: '/', revision: null },
28  { url: '/wp-content/themes/athleanx/style.css', revision: null },
29  { url: '/wp-content/themes/engage-ax/corp2018/img/AX-Logo-2018.png', revision: null },
30  { url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', revision: null },
31  { url: 'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5Q.ttf', revision: null },
32  { url: '/wp-includes/js/jquery/jquery.min.js?ver=3.7.1', revision: null },
33  { url: '/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1', revision: null }
34], {
35  ignoreURLParametersMatching: [/.*/]
36});
37
38// Cache Google Fonts stylesheets with a stale-while-revalidate strategy
39workbox.routing.registerRoute(
40  ({ url }) => url.origin === 'https://fonts.googleapis.com',
41  new workbox.strategies.StaleWhileRevalidate({
42    cacheName: 'google-fonts-stylesheets',
43  })
44);
45
46// Cache Google Fonts webfonts with a cache-first strategy for 1 year
47workbox.routing.registerRoute(
48  ({ url }) => url.origin === 'https://fonts.gstatic.com',
49  new workbox.strategies.CacheFirst({
50    cacheName: 'google-fonts-webfonts',
51    plugins: [
52      new workbox.expiration.ExpirationPlugin({
53        maxAgeSeconds: 60 * 60 * 24 * 365,
54        maxEntries: 30,
55      }),
56    ],
57  })
58);
59
60// Cache CSS, JS, and Web Worker requests with a stale-while-revalidate strategy
61workbox.routing.registerRoute(
62  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
63  new workbox.strategies.StaleWhileRevalidate({
64    cacheName: 'assets',
65    plugins: [
66      new workbox.cacheableResponse.CacheableResponsePlugin({
67        statuses: [200],
68      }),
69      new workbox.expiration.ExpirationPlugin({
70        maxAgeSeconds: 7 * 24 * 60 * 60,
71      }),
72    ],
73  })
74);
75
76// Cache Google APIs with a stale-while-revalidate strategy
77workbox.routing.registerRoute(
78  /.*(?:googleapis|gstatic)\.com/,
79  new workbox.strategies.StaleWhileRevalidate({
80    cacheName: 'google-api-cache',
81    matchOptions: { ignoreVary: true },
82    plugins: [
83      new workbox.expiration.ExpirationPlugin({
84        maxAgeSeconds: 7 * 24 * 60 * 60,
85      })
86    ],
87  })
88);
89
90// Cache image files with a cache-first strategy
91workbox.routing.registerRoute(
92  /\.(?:png|jpg|jpeg|svg|gif|ico|webp)$/,
93  new workbox.strategies.CacheFirst({
94    cacheName: 'athlean-images',
95    plugins: [
96      new workbox.expiration.ExpirationPlugin({
97        maxEntries: 100,
98        maxAgeSeconds: 7 * 24 * 60 * 60,
99      })
100    ],
101  })
102);
103
104// Cache the pages with a network-first strategy
105workbox.routing.registerRoute(
106  ({ request }) => request.mode === 'navigate',
107  new workbox.strategies.NetworkFirst({
108    cacheName: 'athlean-pages',
109    plugins: [
110      new workbox.expiration.ExpirationPlugin({
111        maxEntries: 100,
112        maxAgeSeconds: 7 * 24 * 60 * 60,
113      })
114    ],
115  })
116);
117
118// Fallback mechanism
119workbox.routing.setCatchHandler(({ event }) => {
120  switch (event.request.destination) {
121    case 'document':
122      return caches.match('/offline.html');
123    default:
124      return Response.error();
125  }
126});
127
128// Cleanup old caches
129self.addEventListener('activate', event => {
130  const currentCaches = [PRECACHE, RUNTIME];
131  event.waitUntil(
132    caches.keys().then(cacheNames => {
133      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
134    }).then(cachesToDelete => {
135      return Promise.all(cachesToDelete.map(cacheToDelete => caches.delete(cacheToDelete)));
136    }).then(() => self.clients.claim())
137  );
138});