Я хочу добавить сервисного работника на свой сайт, чтобы предлагать пользователям офлайн хороший опыт работы в автономном режиме. (Серверная часть сайта - PHP)
Я все еще новичок в обещаниях Javascript и работниках сферы услуг, но вот что я достиг до сих пор:
На моей index.php странице есть этот скрипт для регистрации работника службы
<script>
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js')};
</script>
и для служебного рабочего файла я использую следующий код
var CACHE_STATIC_NAME = 'static-v74';
var CACHE_DYNAMIC_NAME = 'dynamic-v74';
self.addEventListener('install', function (event) {
console.log('Installing Service Worker ...', event);
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(function (cache) {
console.log('Precaching App Shell');
cache.addAll([
'offline.php', // offline page
'assets/bundle.css',
'assets/bundle.js',
'assets/images/logo.jpg',
'assets/images/favicon.ico'
]);
})
)
});
self.addEventListener('activate', function (event) {
console.log('Activating Service Worker ....', event);
event.waitUntil(
caches.keys()
.then(function (keyList) {
return Promise.all(keyList.map(function (key) {
if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
console.log('Removing old cache.', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
event.respondWith(
// Try the network
fetch(event.request)
.then(function(res) {
return caches.open(CACHE_DYNAMIC_NAME)
.then(function(cache) {
// Put in cache if succeeds
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(function(err) {
// Fallback to cache
return caches.match(event.request);
})
);
});
на самом деле этот код работает нормально, как и ожидалось:
(1) Он регистрирует работника службы и берет копию моих файлов статического кэша.
(2) При активации нового работника сервиса он удаляет старый кеш.
(3) При каждом новом запросе он сначала извлекается из сети, а в случае успеха помещает свежую копию запроса в кэш.
(4) Если не удается выполнить сетевой запрос в автономном режиме, он возвращает пользователю свежую копию последнего сетевого запроса.
я хочу добиться ее (в случае, если пользователь не в сети - и попытаться запросить новую страницу, которая не находится в кеше, он должен быть перенаправлен на страницу (offline.php), которая была сохранена в статической кеш) вроде следующего
// If both (network & cache) fail, show a generic fallback:
return caches.match('offline.php');
но у меня проблема в том, что я не знаю, куда именно мне добавить эту строку в моем файле (sw.js) на этапе (выборки), я действительно попытался прочитать больше об работниках службы и обещаниях Javascript и попытался добавить это несколько раз меняю место в моем коде, но каждый раз не заставляю его работать, но пропускаю предыдущий сценарий или оставляю сценарий, но не достигаю этой цели.
Очень ценю вашу помощь и большое спасибо заранее.