javascript - 无法解释的 LightHouse start_url 审核错误

Question

我正在使用下面的 ServiceWorker 代码运行 PWA LightHouse 审计。审计报告失败：-

• . 当前页面在离线时没有响应 200
• . 离线时 start_url 不响应 200

PWA 被认为是可安装的。

我正在使用远程调试。

Chrome 网络选项卡显示有一次通过 ServiceWorker 进行访问，另一次通过 DiskCache 进行访问。

为什么它在缓存中时会进入网络/磁盘？

const CACHE_NAME    = "BrotkrumenV1.0"

self.addEventListener('install',
    function (e) {
        e.waitUntil(
            caches.open(CACHE_NAME).then(function (cache) {
                return cache.addAll([
                    '/TravelManager.html',
                    '/hg.png',
                    '/gingerbreadhouse.png',
                    '/striped-witch-hat.png',
                    '/brotkrumen.css',
                    '/echo.js',
                    '/registerserviceworker.js',
                    '/brotkrumen.json',
                    '/TravelManagerPolyfill.js',
                    '/HandleMap.js'
                ]).then(() => self.skipWaiting());
            })
        );
    });

    self.addEventListener('activate', function(e) 
    {
        e.waitUntil(
            caches.keys().then((keyList) => {
                return Promise.all(keyList.map((key) => {
                    if (key !== CACHE_NAME) {
                        console.log('Removing cache', key);
                        return caches.delete(key);
                    }
                }));
            })
        );

        e.waitUntil(self.clients.claim());
    });

    self.addEventListener('fetch', function (e) {

        console.log(e.request.url);

        e.respondWith(

            caches.match(e.request).then(function (response) {
                console.log("Request " + e.request.url);
                if (response) 
                    console.log("Response " + response.url);
                else 
                    console.log("No MATCH");

                return response || fetch(e.request);

            })

        );
    });

清单 start_url 应该匹配缓存中的内容并通过审核。

{
  "short_name": "Brotkrumen",
  "name": "Brotkrumen Web App",
  "description": "Native Background Geolocation POC",
  "icons": [
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/TravelManager.html",
  "background_color": "#00ccdd",
  "theme_color": "#00ccdd",
  "display": "fullscreen"
}

标签： javascriptservice-workerprogressive-web-appslighthousecacheapi