如何让serviceworker.js中的/自动指向自身所在的当前目录路径

这个问题是多环境部署里很典型的适配场景，完全不用维护多个版本的serviceworker.js，只需要通过动态获取当前脚本的路径就能搞定，下面给你两种实用的实现方式：

方法1：动态生成基础路径并注册路由 #

在serviceworker.js里，你可以通过self.location拿到当前脚本的URL，从中提取出它所在的目录路径，再用这个路径来注册路由：

// 解析当前serviceworker.js的URL，提取所在目录
const swUrl = new URL(self.location.href);
// 截取到脚本所在的目录（比如你的/test/）
const basePath = swUrl.pathname.slice(0, swUrl.pathname.lastIndexOf('/') + 1);

// 用动态生成的basePath注册首页路由
workbox.routing.registerRoute(basePath, workbox.strategies.staleWhileRevalidate());

不管你的Service Worker部署在/test/、本地开发目录还是生产环境的根目录，这段代码都能自动适配，完全不用手动修改路由路径。

方法2：配置Workbox的全局baseURL #

如果你的Workbox路由数量较多，一个个拼接路径太麻烦，可以直接设置Workbox的全局baseURL，让所有相对路径的路由都基于这个路径解析：

// 先获取脚本所在目录
const swUrl = new URL(self.location.href);
const baseURL = swUrl.pathname.slice(0, swUrl.pathname.lastIndexOf('/') + 1);

// 设置Workbox全局配置
workbox.setConfig({ baseURL: baseURL });

// 现在直接用`/`就会匹配到baseURL对应的路径（比如/test/）
workbox.routing.registerRoute('/', workbox.strategies.staleWhileRevalidate());

这种方式更适合有大量路由需要适配的场景，一次配置就能让所有相对路径路由自动对应到脚本所在目录。

为什么之前的写法不生效？ #

你之前直接用registerRoute('/')时，Workbox默认是相对于域名根目录解析路径的，也就是匹配https://example.com/，而不是你设置的Service Worker的scope目录。Service Worker的scope只是控制它能拦截哪些路径的请求，但不会改变路由匹配时的路径解析规则，所以必须通过动态获取脚本路径来实现自适应。

你可以在Service Worker里加一行console.log(basePath)来验证生成的路径是否正确，确保它指向脚本所在的目录。

内容的提问来源于stack exchange，提问作者Kash