How to load external script in service worker that will work after stop?

Question

I can't find this infomration. How to use importScripts that will work after the page is down and refreshed after a while?

I have this code:

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

I've also tried:

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

and when I open the site after a few minutes, I've got error about missing library.

What is the proper way to load a file with importScripts that will work? I just want to keep using this library.

I can't find this information anywhere, there are no much examples how to use external libraries in service workers.

It doesn't have to be importScripts but this it the only way I know to import external file in Service Worker. I'm not sure if you have use ES Modules for that.

EDIT :

I've also tried this:

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

I've set break point in activate event and it was not executed at all the same as install and my variable got removed.

I was testing by stopping the service worker in dev tools and refresh. Each time got error about missing idb .

I've also tried using local let variable in the service worker, got the same results idb is undefined, after service worker was stopped.

EDIT2 :

I've asked the author on GitHub , since this may be issue with the library.

Answer 1

My other code was working it looked like this:

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

I think that add library to self make it stay in memory and will not be garbage collected.

So I just used:

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

Answer 2

What is the proper way to load a file with importScripts that will work? I just want to keep using this library.

You would usually use importScripts in the global scope of the service worker, outside of any event callbacks:

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