如何指向 serviceworker.js 中的当前目录

Question

我的 service worker 安装在一个临时目录中

主要网站在： https:example.com

分期开启： https:example.com/test/

服务工作者路径： https:example.com/test/serviceworker.js

这是我注册服务工作者的方式：

navigator.serviceWorker.register('https:example.com/test/serviceworker.js', {scope: '/test/'})
.then(registration => {
  console.log(`Service Worker registered! Scope: ${registration.scope}`);
})

Service Worker 工作正常，并已安装。

我担心的是，在 serviceworker.js 中，我想使用/自动指向当前目录的路径，在这种情况下：/staging/

例如，当我想在临时站点中缓存主页时

/**
 * Cache the homepage.
 */
workbox.routing.registerRoute('/', workbox.strategies.staleWhileRevalidate();

这里的缓存https:example.com不是https:example.com/test/

我知道我可以简单地更改registerRoute('/')为registerRoute('/staging/)'

但这效率不高，并且会使我需要为 localhost、暂存和部署使用不同版本的 serviceworker。我想知道在此处执行此操作的正确方法是什么，因此我可以将范围“/”设置为 serviceworker.js 所在的当前目录。谢谢。

Answer 1

好吧，我想我知道如何以正确的方式做到这一点。

如何指向当前目录：只需使用“./”而不是“/”

/**
 * Cache the homepage.
 */
workbox.routing.registerRoute('./', workbox.strategies.staleWhileRevalidate();

如何在当前路径中缓存文件和图像： “./image/”而不是“/image/”

const urlsToCache = [
  './image/fallback.png',
  './offline/'
];

现在，同一个文件在本地和暂存时的工作方式相同。这是一个新手错误，我需要更聪明:)

编辑：我在Google 文档（服务工作人员生命周期）中找到了这一点：

Service Worker 注册的默认范围是相对于脚本 URL 的 ./。这意味着如果您在 //example.com/foo/bar.js 注册一个 Service Worker，它的默认范围为 //example.com/foo/。