Question

我使用Lighthouse来审核我的网络应用程序。我正在努力解决这些问题，但我仍然坚持这个：

失败：Manifest 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文件：

＆＃13;

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);
    })
  );
});

＆＃13;

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');
  }

}

我们可以注意到，没有检查您的缓存，而是检查入口点的响应。原因必须是您的服务工作者没有在获取时发送正确的响应。

你知道它正在运行，如果在DevTools中，在你的第一个请求中，大小列中会有（来自ServiceWorker）：

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

首先，您要使用服务工作者注册代码弄乱服务工作者代码。服务工作者注册码应该是您网页上执行的代码。

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

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));
});

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

部分

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

Answer 2

似乎Chrome灯塔（chrome v62）执行通用fetch()。请参阅有关https://github.com/GoogleChrome/lighthouse/issues/2688#issuecomment-315394447

的讨论

就我而言，在“if (event.request.mode === 'navigate'){”之后提供了offline.html。由于使用了灯塔的通用fetch()，灯塔将无法在此offline.html中提供服务，并显示“Manifest start_url未被服务工作者缓存”错误。

我通过替换：

解决了这个问题

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

与

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

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

2 个答案: