After searching for days for some kind of solution, I have come up empty. My service-worker gets registered, installs, and activates without a problem, but the cache.addAll seems to fail silently.
I am using a controller to serve the service-worker and manifest.json as erb views. I am solely using webpacker and not the asset pipeline, which rules out some of the common gems used for this sort of thing.
Here is my service-worker.js.erb:
const expectedCaches = ['static-v2'];
function onInstall(event) {
console.log('[Serviceworker]', "Installing!", event);
event.waitUntil(
caches.open("static-v2")
.then(function(cache) {
return cache.addAll([
'/offline.html',
'<%= asset_pack_path 'application.js' %>',
'<%= asset_pack_path 'media/images/Convertable.png' %>',
'<%= root_path %>',
])
.then(function(e){
console.log(e);
})
.catch(function(e){
console.log(e.message);
});
}).catch(function(err){
console.log(err.message);
})
);
}
function onActivate(event) {
console.log('[Serviceworker]', "Activating!", event);
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
return expectedCaches.includes(cacheName);
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
}
function onFetch(event) {
event.respondWith(
// try to return untouched request from network first
fetch(event.request).catch(function() {
// if it fails, try to return request from the cache
return caches.match(event.request).then(function(response) {
if (response) {
return response;
}
// if not found in cache, return default offline content for navigate requests
if (event.request.mode === 'navigate' ||
(event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
console.log('[Serviceworker]', "Fetching offline content", event);
return caches.match('/offline.html');
}
})
})
);
}
self.addEventListener('install', onInstall);
self.addEventListener('activate', onActivate);
self.addEventListener('fetch', onFetch);
And my manifest.json.erb
{
"short_name": "My APP",
"name": "My APP for Everyone!",
"icons": [
{
"src": "<%= asset_pack_path 'media/images/Convertable.png' %>",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "<%= asset_pack_path 'media/images/Convertable.png' %>",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "<%= root_path %>",
"background_color": "#fff",
"display": "standalone",
"scope": "<%= root_path %>",
"theme_color": "#000"
}
Like I said, it registers and installs just fine, but when I use chrome dev tools to enter offline mode, it fails to load anything that was supposed to be cached and I get this in the console:
The FetchEvent for "http://localhost:3000/offline.html" resulted in a network error response: an object that was not a Response was passed to respondWith().
Promise.then (async)
onFetch @ service-worker.js:47
which is because undefined is returned as the response since nothing is found in the cache. Debugging into the fetch event handler I find that the CacheStorage object is indeed empty. Looking in the application tab of chrome dev tools I can't find anything caches, although I am not quite sure which cache it should end up in (several are listed).
I get the same result in Firefox as well. I am hoping I missed something simple that someone can point out to me, or at least someone to get me down the right path. I will try to be very responsive to any requests for additional information.
Thank you!