Workbox for Wordpress

functions.php

/*
 * Register Service Worker
 */
function register_my_service_worker () {
	echo "<script>'serviceWorker' in navigator ? navigator.serviceWorker.register('/sw.js') : console.log('Service Worker Not Activated.');</script>";
}
add_action ( 'wp_head', 'register_my_service_worker' );

register.js

async function addToCache(urls) {
  const pageCache = await window.caches.open('page-cache');
  await pageCache.addAll(urls);
}

// Check that service workers are registered
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
	addToCache(['/hello-world/', '/main-page/']);
    navigator.serviceWorker.register('/service-worker.js');
  });
}

service-worker.js

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js")

workbox.setConfig({
  debug: false
})

workbox.routing.registerRoute(
  new RegExp('.*(?:googleapis|gstatic)\.com.*$'),
  new workbox.strategies.staleWhileRevalidate(),
)

workbox.routing.registerRoute(
  new RegExp('.*(?:gravatar)\.com.*$'),
  new workbox.strategies.staleWhileRevalidate(),
)

workbox.routing.registerRoute(
  new RegExp('.*\.js'),
  new workbox.strategies.staleWhileRevalidate({
    cacheName: 'js-cache',
  })
)

workbox.routing.registerRoute(
  new RegExp('.*\.css'),
  new workbox.strategies.staleWhileRevalidate({
    cacheName: 'css-cache',
  })
)

workbox.routing.registerRoute(
  new RegExp('.*\.woff2'),
  new workbox.strategies.staleWhileRevalidate({
    cacheName: 'font-cache',
  })
)

workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg|ico)$/,
  new workbox.strategies.staleWhileRevalidate({
    cacheName: 'image-cache',
  })
)

workbox.routing.registerRoute(
  new RegExp('^((?!wp-admin|wp-login).)*$'),
  new workbox.strategies.staleWhileRevalidate({
    cacheName: 'page-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 10,
        maxAgeSeconds: 7 * 24 * 60 * 60
      })
    ]
  })
)

workbox.routing.setCatchHandler(({ url, event, params }) => {
  return caches.match('/offline/')
})

sw.js

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js")

workbox.setConfig({
  debug: false
});

// Cache the Gravtar with a stale while revalidate strategy.
workbox.routing.registerRoute(
  new RegExp('.*(?:gravatar)\.com.*$'),
  new workbox.strategies.staleWhileRevalidate(),
);

// 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 Google Fonts webfont 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
			})
		]
	})
);

workbox.routing.setCatchHandler(({ url, event, params }) => {
  return caches.match('/offline/')
});