Bypass service worker on localhost

— 3 minute read

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.

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) {


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!

Hi 👋, I’m Andy — an educator and web designer

I produce front-end development tutorials over at Front-End Challenges Club and Piccalilli. You can sign up for updates on Piccalilli to stay up to date with its progress.

Sign up for updates