Turn off a service worker in parts of the website

[ghost]

Hi,

Service Workers are great and I love them, but they are very annoying when trying to work in the backend of a website like an admincp.

In Google Chrome there is a feature that you can turn off a service worker for a website - works great!

I just wondered if its possible to write a small JavaScript and add it to all the admincp pages that tells the browser to turn off the service worker automatically.

Because in a real life situation we only need to cache the front-end and not the back-end of a website.

Thanks.

[jakearchibald]

In your service worker's fetch listener:

addEventListener('fetch', event => {
  const url = new URL(event.request.url);

  if (url.origin === location.origin && url.pathname.startsWith('/admin/') {
    // just let the browser do the normal thing:
    return;
  }

  // rest of your service worker logic
});

Adjust the URLs in the code above for wherever your admin pages are.

[inian]

@jakearchibald is there a declarative way to do this? Since there is a non-trivial overhead added by the fetch handler, it would be cool if there was a way to declaratively tell the browser not to go via the service worker for certain pages / resources etc.

[jakearchibald]

There isn't a declarative way. If the overhead is seriously getting in the way, consider navigation preload: https://developers.google.com/web/updates/2017/02/navigation-preload