11

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 "caches.open"-promise result in an error: "TypeError: Request failed at ". You can see in Chrome, that the cache is registerd, but empty. I already checked the cache urls thousand times..

Here is my Service-worker Code

var CACHE_NAME = 'surv-cache-1'; var resourcesToCache = [ '/', '/index.html', '/jquery-3.2.1.min.js', '/pouchdb.min-6.4.1.js', '/styles/inline.css', '/scripts/app.js' ]; self.addEventListener('install', function(event) { event.waitUntil( // open the app browser cache caches.open(CACHE_NAME).then(function(cache) { console.log("Install succesfull"); // add all app assets to the cache return cache.addAll(resourcesToCache); }).then(function(out){ console.log(out); }).catch(function(err){ console.log(err); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( // try to find corresponding response in the cache caches.match(event.request) .then(function(response) { if (response) { // cache hit: return cached result return response; } // not found: fetch resource from the server return fetch(event.request); }).catch(function(err){ console.log(err); }) ); });

And my registration code:

<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js').then(function(registration) { console.log('Service worker registered:'+registration.scope); }).catch(function(e) { console.log(e); }); };

I didn't get it.. I hope you have an idea :)

EDIT: I think I know now why it don't work. I have a authentication for my domain, so not everybody can access it. While my serviceworker want to caching the data, it get 401 back. So it seems to be a problem with the authentication.

Maybe someone had already the same problem?

Improve this question
1
  • Same problem, haven't found a solution yet. Commented Mar 21, 2018 at 15:26

3 Answers 3

Reset to default
12

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', ];
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The bit about a 404 response was exactly right for me!
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'

];

Improve this answer

Comments

1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.