PWA服务工作者（工作箱）设置的“ /”代表什么？

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，尽管我以前从未真正使用过该短语。）

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

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

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

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