У меня проблема с моим сервисным работником.
В настоящее время я реализую автономную функциональность с сайтом offline.html, который будет отображаться в случае сбоя сети. Я реализовал предварительную загрузку навигации, как описано здесь: https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload
Вот моя установка EventListener: skipWaiting () и инициализация нового кеша.
const version = 'v.1.2.3'
const CACHE_NAME = '::static-cache'
const urlsToCache = ['index~offline.html', 'favicon-512.png']
self.addEventListener('install', function(event) {
self.skipWaiting()
event.waitUntil(
caches
.open(version + CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache)
})
.then(function() {
console.log('WORKER: install completed')
})
)
})
Вот моя активация EventListener, где я обнаружил функцию navigationPreload и включил ее. После этого проверяю старые кеши и удаляю их.
self.addEventListener('activate', event => {
console.log('WORKER: activated')
event.waitUntil(
(async function() {
// Feature-detect
if (self.registration.navigationPreload) {
// Enable navigation preloads!
console.log('WORKER: Enable navigation preloads')
await self.registration.navigationPreload.enable()
}
})().then(
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
if (cacheName !== version + CACHE_NAME) {
caches.delete(cacheName)
console.log(cacheName + ' CACHE deleted')
}
})
})
)
)
})
Это мой прослушиватель событий fetch
self.addEventListener('fetch', event => {
const { request } = event
// Always bypass for range requests, due to browser bugs
if (request.headers.has('range')) return
event.respondWith(
(async function() {
// Try to get from the cache:
const cachedResponse = await caches.match(request)
if (cachedResponse) return cachedResponse
try {
const response = await event.preloadResponse
if (response) return response
// Otherwise, get from the network
return await fetch(request)
} catch (err) {
// If this was a navigation, show the offline page:
if (request.mode === 'navigate') {
console.log('Err: ',err)
console.log('Request: ', request)
return caches.match('index~offline.html')
}
// Otherwise throw
throw err
}
})()
)
})
Теперь моя проблема: на моем локальном компьютере на локальном хосте все работает так, как должно. Если сеть отключена, пользователю доставляется страница index ~ offline.html. Если я разверну на своем тестовом сервере, все будет работать так, как ожидалось, за исключением странного сообщения об ошибке в Chrome при обычном просмотре (не в автономном режиме):
The service worker navigation preload request failed with network error: net::ERR_INTERNET_DISCONNECTED.
Я зарегистрировал ошибку и запрос на получение дополнительной информации Ошибка:
DOMException: The service worker navigation preload request failed with a network error.
Запрос: 
Это странно, потому что каким-то образом index.html запрашивается независимо от того, какой сайт загружен.
Дополнительная информация это происходит в Chrome 89, в Chrome 88 все в порядке (я проверял в браузере). Я только что заметил, что в Chrome 89 изменилось определение pwa в автономном режиме ... https://developer.chrome.com/blog/improved-pwa-offline-detection/
кто-нибудь знает, в чем может быть проблема?
Обновление. Я восстанавливаю проблему здесь, чтобы каждый мог ее проверить: https://dreamy-leavitt-bd4f0e.netlify.app/
