google-chrome - SERVICE WORKER:Service Worker 导航预加载请求因网络错误而失败:Chrome 89 中的 net::ERR_INTERNET_DISCONNECTED
问题描述
我的 Service Worker 有问题。
我目前正在使用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')
})
)
})
这是我的激活事件监听器,如果我功能检测 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')
}
})
})
)
)
})
这是我的获取事件监听器
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
}
})()
)
})
现在我的问题: 在 localhost 上的本地机器上,一切正常。如果网络处于离线状态,则 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 中一切似乎都很好(我检查了 browserstack)。我刚刚看到 Chrome 89 中的 pwa 离线检测发生了变化... https://developer.chrome.com/blog/improved-pwa-offline-detection/
有人知道问题可能是什么吗?
更新 我在这里重建问题,所以每个人都可以检查出来:https ://dreamy-leavitt-bd4f0e.netlify.app/
解决方案
此错误直接由您链接到的改进的 pwa 离线检测引起: https ://developer.chrome.com/blog/improved-pwa-offline-detection/
浏览器伪造离线上下文并尝试请求清单的 start_url,例如https://dreamy-leavitt-bd4f0e.netlify.app/site.webmanifest中指定的 index.html
这是为了确保您的服务工作者在这种情况下实际上返回了有效的 200 响应,即您的 index~offline.html 页面的有效缓存响应。
您具体询问的错误来自该await event.preloadResponse
部分,显然无法抑制。
该await fetch
调用会产生类似的错误,但可以抑制,只是不要console.log
在该catch
部分中。
希望 chrome 以后在进行离线 pwa 检测时不会从预加载响应中显示此错误,因为它会造成不必要的混乱。
推荐阅读
- qt - 从另一个 cpp 文件访问树结构
- c# - Datagridview - 使用列表循环填充的更快方法?
- c++ - “无法处理热插拔 CPU” - 实施问题
- html - 将 font-awesome 添加到复选框
- sql - 在另一个查询中使用一行中的值 SELECT TOP 1
- wpf - 我们可以在没有 TabStop 的情况下仅在 TabIndex 上制表符吗
- python-3.x - Pandas Dataframe 的列之间的值比较并将其分配给另一个称为结果的列
- linux - 将多行标准输出通过管道传输到单个文件
- php - Symfony CreateForm 函数内存不足
- docker - Docker 撰写来自主机的 ftpd-server 访问