Service-Worker, “TypeError:Request failed at ”

Question

I hope you can help me with my problem. Currently I build a PWA with a service-worker. It registerd successful, but something is wrong with the installation.

The \"cach

Answer 1

This happens when your resourcesToCache includes something that returns a 404 response. Make sure you have everything typed correctly. Also make sure that the scope is correct. You can check your worker scope using:

if("serviceWorker" in navigator) {
  navigator.serviceWorker
  .register(`worker.js`)
  .then(registration => {
    console.log("SW scope:", registration.scope);
  });
}

If your project is not in your server domain root, doing something like this might help:

//your main js
if("serviceWorker" in navigator) {
  navigator.serviceWorker
  .register(`${window.location.pathname}worker.js`)
  .then(registration => {
    //do your thing
  });
}


//your worker js
let resourcesToCache = [
  './',
  './index.html',
  './jquery-3.2.1.min.js',
  './pouchdb.min-6.4.1.js',
  './styles/inline.css',
  './scripts/app.js',
];
//...

As a side-note, you should be loading your libraries (jQuery, pouchdb), from a CDN to improve performance. Those can be cached too:

let resourcesToCache = [
  './',
  './index.html',
  'https://code.jquery.com/jquery-3.3.1.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/pouchdb/6.4.3/pouchdb.min.js',
  './styles/inline.css',
  './scripts/app.js',
];

Answer 2

This happened to me when I was developing locally on a windows machine and deploying on a linux server, the problem is with the path. You need to add a '.' before your path for it to be like "./" as follows:

var resourcesToCache = [
'./',
'./index.html',
'./jquery-3.2.1.min.js',
'./pouchdb.min-6.4.1.js',
'./styles/inline.css',
'./scripts/app.js'

];

Answer 3

This had happened to me when i was referring a file (that don't exist in the path specified) for caching. When i updated the path to the file, things got fine.