问题
I am trying to build a Progressive Web App (PWA).
The service worker shows registered, PWA audit shows everything good, but the console shows this error:
TypeError: Request failed pwa error
I am unable to cache the files.
I tried all possible answers on Stack Overflow and it's the same
//self.addEventListener('fetch', function(event) {});
var dataCacheName = 'myappData-v3n';
var cacheName = 'myapp-3n';
var filesToCache = [
'images/logo.png',
'js/jquery.min.js',
'js/popper.min.js',
'js/bootstrap.min.js',
'js/main.js',
'css/bootstrap.min.css',
'css/fontawesome-all.min.css',
'css/style.css',
'css/style.css',
'index.html'
];
/*self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});*/
self.addEventListener('install', function(event) {
console.log('Handling install event. Resources to pre-fetch:', filesToCache);
event.waitUntil(
caches.open(cacheName).then(function(cache) {
cache.addAll(filesToCache.map(function(filesToCache) {
return new Request(filesToCache, {mode: 'no-cors'});
}))
}).then(function() {
console.log('All resources have been fetched and cached.');
}).catch(function(error) {
console.error('Pre-fetching failed:', error);
})
);
});
/*async function doSomething(cache) {
cache.addAll(filesToCache.map(function(filesToCache) {
return new Request(filesToCache, {mode: 'no-cors'});
//console.log('All resources have been fetched and cached.');
}));
}*/
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
console.log('Fetch event for ', event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
console.log('Found ', event.request.url, ' in cache');
return response;
}
console.log('Network request for ', event.request.url);
return fetch(event.request)
}).catch(function(error) {
return caches.match('index.html');
})
);
});`
I also tried changing the cache urls to "." "./" "/"
I tried in the root url and folder too . Tried to change everything but didnt worked out.
Unable to cache urls.
Need help.
来源：https://stackoverflow.com/questions/54840359/uncaught-in-promise-typeerror-request-failed-pwa-error