PWA Service Worker（Workbox）设置的'/'代表？

Question

我想通过使用工作箱来创建PWA的服务工作者文件。根据工作箱文档，工作箱的预缓存设置是这样的：

service-worker.js

workbox.precaching.precacheAndRoute([
  '/styles/example.ac29.css',
  { url: '/index.html', revision: 'abcd1234' },
  // ... other entries ...
]);

但是/index.html或/styles/example.ac29.css的实际含义是什么？是服务器根目录吗？还是PWA范围的根源？

例如，如果service-worker.js在https://example.com/hoge/fuga/service-worker.js中提供，并且manifest.json在https://example.com/hoge/fuga/manifest.json中也提供，内容：

{
  "name": "Great PWA site",
  "background_color": "#f6f0d3",
  "icons": [...],
  "start_url": "https://example.com/hoge/fuga/",
  "scope":"/hoge/fuga/",
  "display": "standalone"
}

在这种情况下，工作箱设置中的/index.html表示https://example.com/index.html？或者，https://example.com/hoge/fuga/index.html？

Answer 1

在Workbox的预缓存清单中，使用服务器根目录作为基础，将/index.html解析为完整的URL。它不使用服务工作者范围作为基础。 （在谷歌搜索后，我猜它在技术上称为"root-relative" URL，尽管我之前从未真正使用过该短语。）

如果您有一个相对的URL，例如./index.html，则将使用服务工作者脚本的位置作为基础将其解析为完整的URL。

通常，如果您对URL可以解析的内容感到好奇，可以从ServiceWorkerGlobalScope运行以下命令以查看：

(new URL('some-URL.html', self.location.href)).href

最简单的方法是打开Chrome的DevTools，而在您好奇的页面上，该页面上有服务人员，请转到“控制台”面板，然后在弹出菜单中选择服务人员的范围，然后输入上面的代码。