PWA Service Worker (Workbox) 设置的 '/' 代表什么？

Question

我想使用 workbox 创建 PWA 的 service worker 文件。
根据工作箱文档，工作箱的预缓存设置是这样的：

服务-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 也在 [= 中投放17=] 内容：

{
  "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。它不使用 service worker 范围作为基础。（谷歌搜索后，我猜它在技术上被称为 "root-relative" URL，虽然我以前从未真正使用过这个短语。）

如果你有一个像 ./index.html 这样的亲戚 URL，它将被解析为一个完整的 URL，使用 service worker 脚本的位置作为基础。

一般来说，如果你对URL会解析成什么感到好奇，你可以运行下面ServiceWorkerGlobalScope中的内容来查看：

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

最简单的方法是打开 Chrome 的 DevTools，在您对有 service worker 的页面感到好奇时，转到 Console 面板，然后选择 service worker 的范围在弹出菜单中，然后输入上面的代码。

PWA Service Worker (Workbox) 设置的 '/' 代表什么？

PWA Service Worker (Workbox) setting's '/' stand for?

service-worker

progressive-web-apps

workbox