清单 start_url 没有被 Service Worker 缓存

Question

我正在使用 Lighthouse 来审核我的 web 应用程序。我正在克服失败，但我坚持这一点：

失败：清单 start_url 没有被 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

Chrome 灯塔（chrome v62）似乎执行了一个通用的fetch()。参见https://github.com/GoogleChrome/lighthouse/issues/2688#issuecomment-315394447的讨论

就我而言，offline.html 在“if (event.request.mode === 'navigate'){”之后提供。 由于使用了 lighthouse 的通用 fetch()，因此 lighthouse 将不会得到这个 offline.html 的服务，并显示“Manifest start_url is not cached by a Service Worker”错误。

我通过替换解决了这个问题：

if (event.request.mode === 'navigate'){

与

if (event.request.method === 'GET' ){

Answer 2

我们来看看灯塔的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');
  }

}

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

你会知道它正在工作，如果在 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 代码。但是安装了服务工作者，因为您在缓存中有文件，所以我怀疑您只是错误地粘贴了这个。

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

实现这一点的最基本代码是：

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

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

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