Не-не-не, вы неправильно поняли принцип работы UpUp, суть в другом. Предположим, хотим чтобы страница "example.com" была доступна в оффлайне. Вдобавок, хотим чтобы пользователь из оффлайна видел содержимое страницы "example.com/offline.html", а не исходной. То есть пользователь при попытке зайти на "example.com" будет видеть содержимое страницы "example.com/offline.html". Для этого нужно в этот же каталог ("/",
это важно) положить скрипты UpUp, и тогда при загрузке страницы "example.com" нужно выполнить такой скрипт:
UpUp.start({
'content-url': 'offline.html'
});
Этот скрипт загрузит в кеш содержимое страницы "example.com/offline.html", то есть выполнит запрос по этому адресу:
fetch("example.com/offline.html", { mode: 'no-cors' }).then(function(response) {
return cache.put('sw-offline-content', response);
});
(Можно было бы в вызов
UpUp.start() передать например
content: 'Hey, seems you are offline!', тогда эта строка была бы контентом доступным из оффлайна по адресу "example.com", но это неинтересно)
Технически, объект
window.caches страницы "example.com" будет содержать запись с ключом 'sw-offline-content', в которой будет храниться содержимое страницы "example.com/offline.html".
ServiceWorker слушает событие
fetch, при котором он проверяет зафейлился запрос или нет. Если запрос успешный, то возвращает исходный
event.request. Если запрос не прошёл, то пытается вернуть закешированную версию страницы, только не ту которую мы сохранили с помощью UpUp, а ту которую браузер сам себе сохранил. Если страница не найдена и в кеше, то тогда наконец UpUp возвращает контент, который мы сохранили с его помощью в кеш:
caches.match('sw-offline-content'). Вообще на
гите всё расписано подробно:
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
// (only if this is a navigation request. In older browsers we check if this is a text/html request. Thanks @jeffposnick)
if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
return caches.match('sw-offline-content');
}
})
})
);
В целом, их собственное описание принципа работы UpUp мне кажется удовлетворительным:
How Does It Work?
UpUp uses service workers to determine when network requests fail. A service worker is a special script that runs in the browser in the background, and can see the status of network requests.
When the user first visits your site, UpUp registers a service worker with your browser, and gives it a list of files to cache for later.
The next time the user visits your site, the service worker listens for network errors. If a network request fails, and the service worker finds that file in the cache, it will return that file, as if it came from the network.
