Workbox for Wordpress

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('/sw.js');
  });
}

sw.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.*$'),
  workbox.strategies.staleWhileRevalidate(),
)

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

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

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

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

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

workbox.routing.registerRoute(
  new RegExp('^((?!wp-admin|wp-login).)*$'),
  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/')
})

when internet is offline, it's loading my offline page instead of browser page for urls and files that has been cached into service worker but from urls that has been excluded from service worker it returns the browser "no internet connection" Error Page.

for example for this link : www.example.com/checkout/

workbox.routing.registerRoute(
	({request, url}) => 
		request.mode === 'navigate'  &&
		!url.pathname.match(/^\/(wp-admin|wp-login|wp-json|wp-includes|wp-content|preview=true|search|bag|checkout|account)/) &&
		!url.href.match(/\?.+=.*/g),
		
		
	new workbox.strategies.StaleWhileRevalidate({
		cacheName: 'Pages',
		plugins: [
			new workbox.expiration.ExpirationPlugin({
				maxEntries: 25,
				maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
			}),
			new workbox.cacheableResponse.CacheableResponsePlugin({
				statuses: [0, 200],
			}),
		]
	})
)