An unknown error occurred when fetching the script (Service Worker)

Question

When going offline, I get the following error by my service worker:

(unknown) #3016 An unknown error occurred when fetching the script

my service worker looks like this:

var version = 'v1'

this.addEventListener('install', function(event){
  event.waitUntil(
     caches.open(version).then(cache => {
       return cache.addAll([
         'https://fonts.googleapis.com/icon?family=Material+Icons',
         'https://fonts.googleapis.com/css?family=Open+Sans:400,600,300',
         './index.html'
       ])
     })
   )
})

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(resp) {
      // if it's not in the cache, server the regular network request. And save it to the cache
      return resp || fetch(event.request).then(function(response) {
        return caches.open(version).then(function(cache) {
          cache.put(event.request, response.clone())
          return response
        })
      })
    })
  )
})

It is at top level directory, right next to a manifest importing like this in index.html:

<link rel="manifest" href="/manifest.json">

I import the service worker in my entry js file. And register it right after.

require('tether-manifest.json')
import serviceWorker from 'sw'

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register(serviceWorker)
  .then(() => {
    // registration worked
  }).catch(error => {
    throw new Error(error)
  })
}

It registers fine. I don't encounter the error until I go offline.

I am using webpack with React, and doing the following in webpack to copy my sw.js file to the dist folder:

loaders: [
      { // Service worker
        test: /sw\.js$/,
        include: config.src,
        loader: 'file?name=[name].[ext]'
      },
      { // Manifest
        test: /manifest\.json$/,
        include: config.src,
        loader: 'file?name=[name].[ext]'
      }
]

The error doesn't give any information as to what is happening.

Anyone have any idea how to fix this?

Solution 1

I had exactly the same problem, I spent an hour trying to figure it out and it turned out that I had another tab for the same origin left opened somewhere (so using the same shared Service Worker) that had the "Offline" checkbox left checked and that prevented another tabs from requesting sw.js for some reason.

It seems that the offline state is leaking from the tab within Service Worker scope while not being properly reflected nor managed by the other tabs than the one that was turned Offline first.

So make sure you have no other clients running the same Service Worker - you should be able to find them listed in DevTools > Application > Service Workers.

Solution 2

For me this error went away when i added sw.js to the cache upon install. Simply forgot to do that, but it solved the issue.

Solution 3

Before trying anything else, check whether your https certificate is invalid or not matching the url you are accessing.

E.g. In my case I was trying to access https://localhost with a certificate that was registered for another domain.

While hitting "proceed" would allow me to enter to the site, this exact error would be printed to the console:

An unknown error occurred when fetching the script