Question

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

我在网站上运行了灯塔测试工具，它传递了PWA部分中的所有内容（例如安装了服务工作者，通过https提供服务，已安装清单等），除了：

“服务工作者未成功提供清单的start_url。”

我的manifest.json有'/'作为起始网址，“/”作为范围。

'/'实际上是我已缓存的default.aspx。

我的服务工作人员缓存'/'，例如

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是否说它无法提供清单的起始URL？

Answer 1

这是服务工作者范围的问题（与manifest.json中的scope选项不同。）

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

要解决此问题，您需要确保服务工作者的范围涵盖start_url。我可以想到两种方法：

在您的情况下，直接从根路径提供服务工作文件，例如/service-worker.js。
使用Service-Worker-Allowed响应标头覆盖服务工作者的范围，这样服务工作者文件的路径就不重要了。

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

pwa - 服务工作者未成功提供清单的start_url

1 个答案: