有没有办法将一些值传递给服务工作者,以便在安装步骤中使用?

2022-04-09 00:00:00 javascript service-worker

是否有方法将值传递给服务工作人员,以便它可以在安装步骤中使用?

例如,如果您的网页资源位于基于项目发布版本(resource-2.11/js/...)的文件夹中。在某些情况下,您需要知道resource-2.11才能缓存某些文件。能否传入此值?


解决方案

有几种不同的方法。

在构建时生成service-worker.js文件可能是正确的方法,如注释中所建议的。这样做的好处是确保只要您的版本化前缀发生更改,就会触发install事件,因为对service-worker.js内容的任何更改都足以触发service worker update。

但是,如果由于某种原因无法做到这一点,对于"如何将在安装期间可用的值传递给服务工作者"这一一般问题的另一个答案是使用IndexedDB。您可以从主页设置一个值,然后注册服务工作者,然后服务工作者就可以读入该值。但您应该注意,从主页更改IndexedDB中的值不会触发服务工作进程更新。

最后,如果您希望在值更改时触发服务工作者更新,但由于某些原因不能在构建步骤中修改service-worker.js,则可以使用另一种方法。也就是说,当您从页面注册service-worker.js时,该值将作为URL查询参数追加到service-worker.js的末尾:

// From your web page:
if ('serviceWorker' in navigator) {
  const value = encodeURIComponent('some-parameter-value');
  const swUrl = `service-worker.js?_param=${value}`;
  navigator.serviceWorker.register(swUrl);
}

// From your service worker:
self.addEventListener('install', event => {
  const selfUrl = new URL(self.location);
  // Uses https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
  const parameterValue = selfUrl.searchParams.get('_param');
  // Do something with parameterValue
});

使用不同的URL注册服务工作者将触发服务工作者更新,这相当于更改service-worker.js的内容。

相关文章