Answer the question
In order to leave comments, you need to log in
Service worker not starting on github?
I ask for help. I can’t understand what’s wrong. I’m interested in the Progressive Web Application topic, or rather service workers. I check its work on a test site. I launch the site on a local server, everything works. And when I open the same site on github, the service worker does not start. It writes the error "Service Worker: Error: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script". Explain what could be the reason? Below is the code of my worker and its installer
const cacheName = 'v1';
const cacheAssets = [
'index.html',
'catalog.html',
'form.html',
'/css/style.min.css',
'/js/script.min.js',
'/fonts/Oswald-Medium.woff',
'/fonts/Oswald-Medium.woff2',
'/fonts/Oswald-Regular.woff',
'/fonts/Oswald-Regular.woff2'
];
// Call Install Event
self.addEventListener('install', e => {
console.log('Service Worker: Installed');
e.waitUntil(
caches
.open(cacheName)
.then(cache => {
console.log('Service Worker: Caching Files');
cache.addAll(cacheAssets);
})
.then(() => self.skipWaiting())
);
});
// Call Activate Event
self.addEventListener('activate', e => {
console.log('Service Worker: Activated');
// Remove unwanted caches
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if (cache !== cacheName) {
console.log('Service Worker: Clearing Old Cache');
return caches.delete(cache);
}
})
);
})
);
});
// Call Fetch Event
self.addEventListener('fetch', e => {
console.log('Service Worker: Fetching');
e.respondWith(
fetch(e.request)
.then(res => {
// Make copy/clone of response
const resClone = res.clone();
// Open cahce
caches.open(cacheName).then(cache => {
// Add response to cache
cache.put(e.request, resClone);
});
return res;
})
.catch(err => caches.match(e.request).then(res => res))
);
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('../serviceWorker.js')
.then(reg => console.log('Service Worker: Registered (Pages)'))
.catch(err => console.log(`Service Worker: Error: ${err}`));
});
}
Answer the question
In order to leave comments, you need to log in
He says the path .register('../serviceWorker.js')
is wrong. Try from the root or move the file on the same level as the main js file.
And don't forget that PWA needs HTTPS
These options did not solve the problem. I tried everything, it still does not start on github. Maybe someone else will advise something.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question