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

5

21

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?

Verruca answered 11/11, 2016 at 19:58 Comment(5)
Having a similar issue. The error comes up only in offline mode. I think the error isn't a show-stopper though.Pennyroyal
Well the site doesn't work at all offline right now. I get the dinosaur, so yeah it's a showstopper if what you're trying to do is getting it to work offline.Verruca
Are you trying to fetch the sw file? May I ask why? I kinda have an idea of why that error but I want to clarify more.Fabrin
Well I'm importing it in my index.js file, to register it in the first place. But other than that, no?Verruca
I'm still getting this problem, any clear process to fixing this?Grizzled
B
30

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.

Brod answered 15/11, 2016 at 21:26 Comment(4)
This might have been the cause indeed! I never figured it out. But after I closed out of everything, deleted my Build folder. Restarted my computer, rebuilt the site. It worked fine. I didn't change a thing. So this sounds like the most likely cause of the issue. Thanks for sharing!Verruca
Thank you. This was exactly the cause, I had the Airhorner example open in another tab with Offline activated while I had another local site open in a different tab on a different port.Constitutionality
I switched Angular CLI versions from beta 18 to RC1 and any time I created a new app, soon I'd get this same error. I removed the worker as explained here and that seems to have fixed my problemSkite
it save me huge time right now - soo stupid those error messages without explanations ;-) - thx @BrodBaecher
L
5

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.

Lakh answered 11/6, 2017 at 10:27 Comment(1)
To add to @koencornelis it is CRITICAL that you cache the service worker; on an Android test that your app (without the service worker cached) runs offline, close the app, turn off all internet access (wifi, mobile) and then power down the device for 7 hours Then turn on the device but do not turn on internet. Attempt to run the app (in offline mode). It probably will not work. The solution is to put the service worker into the cache. I discovered this in a production environment where the customer turned off the device each night "to charge" and had no wifi there.Sybarite
T
5

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

Tacket answered 30/9, 2020 at 12:16 Comment(2)
Same here. Would be great to have an option to disable the check on development.Pep
@Pep You can create a self-signed certificate and add it as trusted root ca in your browser. Then you can use this ca to sign certificates that you generate for any domain.Tacket
K
0

I had this issue while working in an Angular project. My problem was that I was using Angular CLI's built-in ng serve -prod command.

To make it work, I used ng build -prod and then host the resulting dist folder using http-server

Karlow answered 26/9, 2017 at 15:0 Comment(0)
K
0

In Chrome, what I did was to check the option Bypass for network and then I was able to reload.

Dev tools print

Kneepan answered 18/12, 2018 at 13:56 Comment(1)
This probably isn't helpful for production solutions/apps.Terricolous

© 2022 - 2024 — McMap. All rights reserved.