时间戳

首页 > 解决方案 > 如何指向 serviceworker.js 中的当前目录

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

问题描述

我在暂存目录上安装了我的服务人员

主网站在：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、staging 和部署使用不同版本的 serviceworker。我想知道这里的正确方法是什么，所以我可以将范围'/'设置为 serviceworker.js 所在的当前目录。谢谢。

标签： service-workerworkbox

解决方案

好的，我想我想出了正确的方法。

如何指向当前目录：只需 './' 而不是 '/'

/**
 * 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 注册一个服务工作者，它的默认范围是 //example.com/foo/。

推荐阅读