服务工作者:服务工作者导航预加载请求失败，并出现网络错误:Chrome 89中的net :: ERR_INTERNET_DISCONNECTED [英] SERVICE WORKER: The service worker navigation preload request failed with network error: net::ERR_INTERNET_DISCONNECTED in Chrome 89

问题描述

我的服务人员有问题.

我当前正在使用offline.html网站实现离线功能，以防网络出现故障.我已按以下说明实施了导航预加载:

这很奇怪，因为无论加载哪个站点，都以某种方式请求index.html.

其他信息，这发生在Chrome 89，Chrome 88中，一切似乎都很好(我在浏览器堆栈中检查了).我刚刚看到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中指定的index.html/site.webmanifest

这是为了确保您的服务工作者在这种情况下实际上返回的是有效200响应，即index〜offline.html页面的有效缓存响应.

您要特别询问的错误来自 await event.preloadResponse 部分，显然无法将其抑制.

await fetch 调用会产生类似的错误，但可以将其抑制，只是不要在 catch 部分中的 console.log 中.

希望chrome在进行离线pwa检测时，将来不会在预加载响应中显示此错误，因为它会造成不必要的混乱.

I have a problem with my Service Worker.

I'm currently implementing offline functionality with an offline.html site to be shown in case of network failure. I have implemented Navigation Preloads as described here: https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload

Here is my install EventListener were skipWaiting() and initialize new cache

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')
            })
    )
})

Here is my activate EventListener were I feature-detect navigationPreload and enable it. Afterwards I check for old caches and delete them

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')
                    }
                })
            })
        )
    )
})

This is my fetch eventListener

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
            }
        })()
    )
})

Now my Problem: On my local machine on localhost everything just works as it should. If network is offline the index~offline.html page is delivered to the user. If I deploy to my test server everything works as well as expected, except for a strange error-message in Chrome on normal browsing(not offline mode):

The service worker navigation preload request failed with network error: net::ERR_INTERNET_DISCONNECTED.

I logged the error and the request to get more information Error:

DOMException: The service worker navigation preload request failed with a network error.

Request:

Its strange because somehow index.html is requested no matter which site is loaded.

Additional Information this is happening in Chrome 89, in chrome 88 everything seems fine(I checked in browserstack). I just saw there was a change in pwa offline detection in Chrome 89... https://developer.chrome.com/blog/improved-pwa-offline-detection/

anybody has an idea what the problem might be?

Update I rebuild the problem here so everybody can check it out: https://dreamy-leavitt-bd4f0e.netlify.app/

解决方案

This error is directly caused by the improved pwa offline detection you linked to: https://developer.chrome.com/blog/improved-pwa-offline-detection/

The browser fakes an offline context and tries to request the start_url of your manifest, e.g. the index.html specified in your https://dreamy-leavitt-bd4f0e.netlify.app/site.webmanifest

This is to make sure that your service worker is actually returning a valid 200 response in this situation, i.e. the valid cached response for your index~offline.html page.

The error you're asking about specifically is from the await event.preloadResponse part and it apparently can't be suppressed.

The await fetch call produces a similar error but that can be suppressed, just don't console.log in the catch section.

Hopefully chrome won't show this error from preload responses in future when doing offline pwa detection as it's needlessly confusing.

这篇关于服务工作者:服务工作者导航预加载请求失败，并出现网络错误:Chrome 89中的net :: ERR_INTERNET_DISCONNECTED的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！