Bypass service worker on localhost

Categories

The main thing that's been holding me back from using Firefox full-time is that there appears to be no way to bypass a service worker. I often use the provided “bypass service worker” option in Chrome dev tools to do this.

I've been hunting around and pleading with the web to no avail, so I put the responsibility onto myself.

For now, I just want to ignore localhost urls, but the below snippet could allow you to prevent the service worker's fetch event from continuing for any hostname that you assign in ignoredHosts.

Code language
JavaScript
self.addEventListener('fetch', evt => {
  // Define the hostnames that you want to ignore
  const ignoredHosts = ['localhost'];

  // Destructure the hostname out of the event's request
  // URL by creating a new URL instance
  const {hostname} = new URL(evt.request.url);

  // Bail out if our definition contains this url
  if (ignoredHosts.indexOf(hostname) >= 0) {
    return;
  }
});

Go ahead and grab the code from this Gist.

Let's break it down permalink

  1. You define your host in the ignoredHosts array
  2. We construct a new URL because we can't access the window in a service worker. This URL gives us access to the magic hostname property which we grab using destructuring to create the hostname constant.
  3. We check the index of the hostname within ignoredHosts. If it's greater than or equal to 0, we have a match
  4. If it's a match, we bail out

Wrapping up permalink

A short and sweet tip which I hope you find useful. I can finally use Firefox full-time now which brings me a lot of joy.

If you can improve the above code, hit me up. It's only a quick fix, so any improvements will be welcomed!

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me