service-worker - list start_url 没有被 Service Worker 缓存

Question

我正在使用 Lighthouse 来审核我的 web 应用程序。我正在解决失败，但我坚持这个:

Failures: Manifest start_url is not cached by a Service Worker.

在我的 manifest.json我有

"start_url": "index.html",

在我的 worker.js我正在缓存以下内容:

let CACHE_NAME = 'my-site-cache-v1';
let urlsToCache = [
    '/',
    '/scripts/app.js',
    '/index.html'
];

这与我在 Chrome 开发工具的“应用程序”选项卡中看到的内容一致:



那么......为什么它告诉我 start_url没有缓存？

这是我的全部 worker.js文件:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

let CACHE_NAME = 'my-site-cache-v1.1';
let urlsToCache = [
  '/',
  '/scripts/app.js',
  '/index.html'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
    .then(function(cache) {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});

Answer 1

来看看Lighthouse的source code

static assessOfflineStartUrl(artifacts, result) {
  const hasOfflineStartUrl = artifacts.StartUrl.statusCode === 200;

  if (!hasOfflineStartUrl) {
    result.failures.push('Manifest start_url is not cached by a service worker');
  }

}

我们可以注意到，它是 不是检查你的缓存，而是入口点的响应 .原因一定是您的服务 worker 没有在获取时发送正确的响应。

您会知道它正在工作，如果在 DevTools 中，在您的第一个请求中，大小列中将有(来自 ServiceWorker):


您提供的代码有两个问题:

第一个是您将 Service Worker 代码与 Service Worker 注册代码混淆。 Service Worker 注册码应该是在你的网页上执行的代码。

该代码应包含在您的页面中:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

您粘贴的其余内容应该是您的 worker.js 代码。但是，服务 worker 已安装，因为您在缓存中有文件，所以我怀疑您只是错误地粘贴了它。

第二个(真正的)问题是 service worker 没有返回这个缓存的文件。正如我之前所证明的，来自灯塔的错误意味着 service worker 没有返回 start_url入口文件。

实现这一目标的最基本代码是:

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request));
});

Service Worker 是事件驱动的，因此当您的页面想要获取某些资源时，Service Worker 会使用react，并从缓存中提供该资源。在现实世界中，您真的不想那样使用它，因为您需要某种回退。我强烈推荐阅读部分 Serving files from the cache here

编辑 : 我创建了 pull request在 Lighthouse 源代码中澄清错误消息