是否可以创建一个使用 Service Worker 的 npm 库，而不需要最终用户脚本配置？

Question

问题

我想创建一个在底层使用服务工作人员的 npm 库，最终用户不需要配置任何内容 - 理想情况下，甚至不需要放置或引用

sw.js

文件。

我面临的主要挑战是

navigator.serviceWorker.register('somePath')

要求

somePath

相对于执行代码的最终 HTML 文件。这取决于所使用的框架，例如：

• 在 Next.js 中，Service Worker 需要放置在

  public/

  文件夹中。
• 在Vite中，它们属于项目的根目录。

由于我的图书馆位于

node_modules

，我无法控制这些路径。

我想要什么：

1. 零设置：通过简单地运行一个函数，库就可以处理其他所有事情，包括注册服务工作者。用户无需配置任何路径或将文件添加到项目中的任何特定位置。
2. 后备选项（如果不可能进行零设置）：提供简化的设置过程以减少用户工作量。例如，我考虑在注册时使用

   type: 'module'

   ：

navigator.serviceWorker.register('somePath', {
  scope: '/',
  type: 'module',
});

然后我的想法是让用户将库的 Service Worker 脚本导入到其特定于框架的文件中（例如，Next.js 中的 public/sw.js）：

// public/sw.js for Next.js or sw.js for Vite
import { serviceWorkerScript } from 'myLibrary';

serviceWorkerScript();

但即使这种方法也存在问题。导入路径必须相对于脚本，并且不支持安装在node_modules中的库。所以该代码会抛出错误。

我还发现，绕过将脚本放在单独文件中（例如使用字符串或 Blob）的限制不是一个有效的选项。[ 1 ][ 2 ]

我的问题：

1. 是否可以实现零设置解决方案，无需用户干预即可注册 Service Worker 脚本并运行？
2. 如果没有，指导用户配置 Service Worker、最大程度地减少复杂性和工作量的最简单方法是什么？

我愿意接受替代方法或最佳实践来有效地处理这种情况。如有任何帮助，我们将不胜感激！

Answer 1

与 Service Workers 不同，Web Workers 可以使用不同的方式创建，以动态序列化代码并将其转换为二进制文件。

您可以使用 URL.createObjectURL 方法从字符串中构建动态 url。 这种方法现在得到广泛支持。

其代码示例如下：

const workerBlob = new Blob([ webWorkerFn.toString() ], { type: 'text/javascript' })
const worker = new Worker(URL.createObjectURL(workerBlob));

实际上有一篇很好的文章关于它，希望这有帮助