service-worker - pwa - Service Worker 未成功提供 list 的 start_url

Question

我正在尝试将 PWA 功能添加到托管在 Azure 上并使用 Cloudflare CDN 的现有网站。

我已经在网站上运行了 lighthouse 测试工具，它通过了 PWA 部分中的所有内容(例如安装的服务 worker 、通过 https 提供的服务、安装的 list 等)，除了:

“Service Worker 未成功提供 list 的 start_url。”

我的 manifest.json 以“/”作为起始 URL，以“/”作为范围。

'/' 实际上是 default.aspx，我也缓存了它。

我的服务 worker 缓存“/”，例如

var cacheShellFiles = [
  '/',
  '/manifest.json',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css'
   ...
]

// install - cache the app shell
self.addEventListener('install', function (event) {
console.log('From SW install: ', event);

// calling skipWatiing() means the sw will skip the waiting state and immediately 
// activate even if other tabs open that use the previous sw
self.skipWaiting();

event.waitUntil(
    caches.open(CACHE_NAME_SHELL)
        .then(function (cache) {
            console.log('Cache opened');
            return cache.addAll(cacheShellFiles);
        })
);
});

但是，当我在开发工具中查看缓存存储文件时，/以及 .css 和 .js 文件的 Content-Length 为 0:

Image of Chrome Developer tools showing cache storage with Content-Length=0 Content-Length = 0 是说它无法提供 list 的起始 URL 的原因吗？

Answer 1

这是服务工作人员范围的问题(不同于 manifest.json 中的 scope 选项)。

您的 start_url 设置为 /，但很可能您的 service worker 文件是从更深的路径提供的，例如/some-path/service-worker.js。在这种情况下，您的 service worker 的范围是 /some-path/，因此它将无法处理对它之外的路径的请求，例如根路径 / .

要解决此问题，您需要确保服务工作人员的范围涵盖您的 start_url。我可以想到两种方法来做到这一点:

1. 在您的情况下，直接从根路径提供服务 worker 文件，例如/service-worker.js.

2. 使用 Service-Worker-Allowed 响应 header ，它会覆盖 service worker 的范围，这样服务 worker 文件从哪个路径提供服务就无关紧要了。

选择一个更适合您的设置的。