После нескольких дней поиска какого-то решения я пришел пустым. Мой сервисный работник регистрируется, устанавливается и активируется без проблем, но cache.addAll, по-видимому, не работает автоматически.
Я использую контроллер для обслуживания сервисного работника и манифеста. json как erb взгляды. Я использую исключительно webpacker, а не конвейер ресурсов, который исключает некоторые распространенные гемы, используемые для такого рода вещей.
Вот мой сервисный работник. 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);
И мой манифест. 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"
}
Как я уже сказал, он отлично регистрируется и устанавливается, но когда я использую инструменты chrome dev для входа в автономный режим, он не может загрузить все, что должно было быть кэшировано, и я получаю это в консоли:
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
, потому что в качестве ответа возвращается undefined, поскольку в кеше ничего не найдено. Отладка в обработчике события fetch Я обнаружил, что объект CacheStorage действительно пуст. Просматривая вкладку приложения инструментов chrome dev, я не могу найти ничего кеширующего, хотя я не совсем уверен, к какому кешу это должно закончиться (перечислены несколько).
Я получаю тот же результат в Firefox. Я надеюсь, что упустил что-то простое, что кто-то может указать мне, или, по крайней мере, кто-то, чтобы привести меня на правильный путь. Я постараюсь быть очень отзывчивым на любые запросы о дополнительной информации.
Спасибо!