如何在停止后工作的服務工作者中加載外部腳本？

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
});