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



我找不到这个信息。如何使用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未定义。

EDIT2

我在GitHub上问过作者,因为这可能是库的问题。

用importScripts加载文件的正确方法是什么?我只想继续使用这个图书馆。

除了任何事件回调之外,您通常会在服务工作者的全局范围中使用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
});

最新更新