PWA - 服务工作者没有成功服务于清单的START_URL

Question

我想PWA功能添加到现有的网站托管在Azure和使用CloudFlare的CDN。

我已经运行了网站上的灯塔测试工具，它通过在PWA节的一切（例如安装服务人员，通过https提供，安装清单等）除外：

“服务人员并不成功的服务清单的START_URL。”

我的manifest.json中有“/”作为起始URL和“/”的范围。

在“/”实际上是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文件是0：

Image of Chrome Developer tools showing cache storage with Content-Length=0是内容长度= 0，这是说，它不能满足清单的起始URL的原因是什么？

Answer 1

这是您的服务人员的范围的问题（从scope的manifest.json选项不同）。

你start_url设置为/，但最有可能您的服务人员文件从更深的路径，例如服/some-path/service-worker.js。在这种情况下，您的服务人员的范围/some-path/，因此它无法处理请求到它的外部路径，如根路径/。

为了解决这个问题，你需要确保你的服务人员的范围覆盖你的start_url。我能想到的两种方法可以做到这一点：

1. 在你的情况下，直接从根路径，例如服务服务人员档案/service-worker.js。
2. 使用Service-Worker-Allowed响应头，它覆盖了服务人员的范围，所以它不会无论从哪个路径服务工作者文件从服务。

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