Lighthouse PWA 审计返回“离线时 start_url 不响应 200"；错误 [英] Lighthouse PWA audit returns a "start_url does not respond with a 200 when offline" error

问题描述

我遇到了 Lighthouse 的 PWA 审核问题.我正在使用 Service Worker sw.js 成功缓存 offline.html 回退(当用户没有网络连接时)和 start.html(在 manifest.json 中定义为 start_url 并且在用户从主屏幕图标打开网站时显示).

I'm having an issue with Lighthouse's PWA audit. I'm using a Service Worker sw.js that successfully caches both the offline.html fallback (for when the user has no network connection), and the start.html (which is defined as start_url in the manifest.json and is displayed if the user opens the website from the Homescreen icon).

当我使用 Lighthouse 验证 PWA 清单时会出现此问题，这会引发此(仅)错误:

The issue happens when I use Lighthouse to validate the PWA checklist, which throws this (only) error:

离线时 start_url 不响应 200start_url 确实响应了，但不是通过 service worker.

start_url does not respond with a 200 when offline The start_url did respond, but not via a service worker.

我觉得这很奇怪，因为 start.html 在 Service Worker 安装过程中被正确缓存.我唯一的猜测是验证器试图在服务工作者实际将其缓存到浏览器存储之前以离线模式访问 start.html.

I find this odd, because start.html is properly cached upon the service worker install process. My only guess is that the validator is trying to access start.html in offline mode before the service worker can actually cache it to the browser storage.

那么，我如何在 Lighthouse 的 PWA 清单中验证该特定问题?

So, how can I validate that particular issue in Lighthouse's PWA checklist?

这是我当前的代码:

ma​​nifest.json

{
    "name": "My Basic Example",
    "short_name": "Example",
    "icons": [
        {
            "src": "https://example.com/static/ico/manifest-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],
    "start_url": "https://example.com/start.html",
    "scope": "/",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#2196f3",
    "theme_color": "#2196f3"
}

core.js

if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js', {
        scope: '/'
    }).then(function(registration) {
    }).catch(function(err) {
    });
    navigator.serviceWorker.ready.then(function(registration) {
    });
}

sw.js

//cache container
const CACHE_VERSION = 1;
const CACHE_NAME = 'cache-v' + CACHE_VERSION;

//resources
const URL_OFFLINE = 'offline.html';
const URL_START = 'start.html';

//install
self.addEventListener('install', (event) => {
    event.waitUntil(
        (async () => {
            const cache = await caches.open(CACHE_NAME);
            await Promise.all([
                cache.add(new Request(URL_OFFLINE, { cache: 'reload' })),
                cache.add(new Request(URL_START, { cache: 'reload' }))
            ]);
        })()
    );

    //force the waiting service worker to become the active service worker
    self.skipWaiting();
});

//activate
self.addEventListener('activate', (event) => {
    event.waitUntil(
        (async () => {
            //enable navigation preload if it is supported.
            //https://developers.google.com/web/updates/2017/02/navigation-preload
            if('navigationPreload' in self.registration) {
                await self.registration.navigationPreload.enable();
            }
        })()
    );

    //tell the active service worker to take control of the page immediately
    self.clients.claim();
});

//fetch
self.addEventListener('fetch', (event) => {
    //we only want to call event.respondWith() if this is a navigation request for an HTML page
    if(event.request.mode === 'navigate') {
        event.respondWith((async () => {
            try {
                //first, try to use the navigation preload response if it's supported
                const preload_response = await event.preload_response;
                if(preload_response) {
                    return preload_response;
                }

                //always try the network first
                const network_response = await fetch(event.request);
                return network_response;
            } catch (error) {
                //catch is only triggered if an exception is thrown, which is likely due to a network error
                const cache = await caches.open(CACHE_NAME);
                if(event.request.url.includes(URL_START)) {
                    return await cache.match(URL_START);
                }
                return await cache.match(URL_OFFLINE);
            }
        })());
    }
});

有什么想法吗?谢谢！

推荐答案

@PeteLe，我尝试了您的示例，但失败了:

@PeteLe, I tried your sample and got following failure:

导航到 https://basic-pwa-so-1.glitch.me/

Service Worker 导航预加载请求失败，网络错误:net::ERR_INTERNET_DISCONNECTED.

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

Lighthouse 中的某些内容似乎已更新并生成错误消息

Looks like something was updated in Lighthouse generating the error message

这篇关于Lighthouse PWA 审计返回“离线时 start_url 不响应 200"；错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！