清单start_url不由服务工作者缓存

Question

我正在使用Lighthouse来审核我的webapp.我正在努力解决这些问题,但我仍然坚持这个:

失败:清单start_url不由服务工作者缓存.

在我的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的源代码

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)size列:

您提供的代码存在两个问题:

首先,您要将服务工作者代码与服务工作者注册码混淆.服务工作者注册码应该是您网页上执行的代码.

该代码应包含在您的网页上:

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代码.但是服务工作者安装了,因为你有缓存中的文件,所以我怀疑你只是错误地粘贴了这个.

第二个(实际)问题是服务工作者没有返回此缓存文件.正如我之前所证明的那样,来自灯塔的错误意味着服务工作者没有返回start_url入口文件.

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

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

服务工作者是事件驱动的,因此当您的页面想要获取某些资源时,服务工作者会做出反应,并从缓存中提供服务.在现实世界中,你真的不想那样使用它,因为你需要某种后备.我强烈建议您在此处阅读缓存中的服务文件部分

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