CODEWITHSUNDEEP
javascriptmanifestservice-workeroffline-cachingprogressive-web-apps
MLyck
MLyck

Reputation: 5775

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

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?

Upvotes: 22

Views: 42573

Answers (5)

Marinos An
Marinos An

Reputation: 10880

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

Upvotes: 5

carla
carla

Reputation: 2117

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

Dev tools print

Upvotes: 1

Benjamin Kindle
Benjamin Kindle

Reputation: 1844

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

Upvotes: 0

Koen Cornelis
Koen Cornelis

Reputation: 352

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.

Upvotes: 7

NOtherDev
NOtherDev

Reputation: 9682

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.

Upvotes: 32

Related Questions