如何在停止后工作的服务工作者中加载外部脚本？

Question

我找不到这个信息。 如何使用在页面关闭并在一段时间后刷新后将起作用的 importScripts？

我有这个代码：

self.addEventListener('install', function(evt) {
    self.skipWaiting();
    self.importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js');
});

我也试过：

self.addEventListener('install', function(event) {
    event.waitUntil(
        self.importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js')
    );
});
self.addEventListener('activate', (event) => {
    event.waitUntil(
        self.importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js')
    );
});

几分钟后我打开网站时，我收到关于缺少库的错误。

使用有效的importScripts加载文件的正确方法是什么？ 我只想继续使用这个库。

我在任何地方都找不到此信息，也没有太多示例如何在服务人员中使用外部库。

它不一定是importScripts ，但这是我知道在 Service Worker 中导入外部文件的唯一方法。 我不确定您是否为此使用了 ES 模块。

编辑：

我也试过这个：

self.addEventListener('install', function(event) {
    self.skipWaiting();
    self.importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js');
    self.idb = idbKeyval;
});

self.addEventListener('activate', function(event) {
    if (!self.idb) {
        self.skipWaiting();
        self.importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js');
        self.idb = idbKeyval;
    }
});

我在activate事件中设置了断点，它没有像安装一样执行，我的变量被删除了。

我通过在开发工具中停止服务人员并刷新来进行测试。 每次都会收到关于缺少idb的错误。

我也尝试在服务工作者中使用本地let变量，在服务工作者停止后得到相同的结果idb未定义。

编辑2 ：

我已经在 GitHub 上询问了作者，因为这可能是图书馆的问题。

Answer 1

我的其他代码正在运行，看起来像这样：

self.addEventListener('install', function(evt) {
    self.skipWaiting();
    self.importScripts('https://cdn.jsdelivr.net/npm/browserfs');
    BrowserFS.configure({ fs: 'IndexedDB', options: {} }, function (err) {
        if (err) {
            console.log(err);
        } else {
            self.fs = BrowserFS.BFSRequire('fs');
            self.path = BrowserFS.BFSRequire('path');
        }
    });
});

我认为将库添加到 self 使其留在 memory 并且不会被垃圾收集。

所以我只是使用：

self.addEventListener('install', function(event) {
    event.waitUntil(
       self.importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js')
    );
    self.idb = idbKeyval;
});

Answer 2

使用有效的 importScripts 加载文件的正确方法是什么？ 我只想继续使用这个库。

您通常会在服务工作者的全局 scope 中使用importScripts ，在任何事件回调之外：

importScripts('https://cdn.jsdelivr.net/npm/idb-keyval/dist/umd.js');

self.addEventListener('install', function (evt) {
  // your install handler
  // `self.idbKeyval` should be available here, as well as anywhere else
});