How to import idb inside ServiceWorker?

[MohammedSaberMohammed]

Hello Everyone, I'm trying to include idb in my service worker file but i got a lot of errors, i tried to import it like that: importScripts("https://github.com/jakearchibald/idb/blob/master/build/cjs/index.js"); Also importScripts("https://github.com/jakearchibald/idb/blob/master/build/esm/index.js"); Also importScripts("https://github.com/jakearchibald/idb/blob/master/build/iife/index-min.js"); but i got the following error :

And when I use : importScripts("https://cdn.jsdelivr.net/npm/idb@5.0.3/build/cjs/index.min.js");

i got an error like that: note: the first line is the error and the second is when I log(self)

I took a look on this question: https://github.com/jakearchibald/idb/issues/63 this link is the only one I found it working, why is that? importScripts("https://cdn.jsdelivr.net/npm/idb@4.0.5/build/iife/with-async-ittr-min.js");

1. So What should I do in order to include it ?
2. How to cache it for offline? because when I enable offline signal while importing it like this i got the following error

i don't understand why it doesn't work even if i cache it's response?

Thanks in advance.

[jakearchibald]

You'd typically use a bundler tool like Rollup or webpack to use this library, but as detailed in the installation section, you can use https://unpkg.com/idb?module.

[mangelozzi]

You'd typically use a bundler tool like Rollup or webpack to use this library, but as detailed in the installation section, you can use https://unpkg.com/idb?module.

Thanks for the library. While I have been researching service workers and I have come across your name a few times. You are kind of like a service worker celebrity on github/stack overflow. I am using it since google recommends it while following this guide (and because the library sounds great): https://developers.google.com/web/ilt/pwa/working-with-indexeddb

The phrase https://unpkg.com/idb?module no longer exists in the installation section. I opened https://github.com/jakearchibald/idb#installation and it has an import section itself, which confuses me because thats what raises the error.

Could you give a high level description of what the bundler does to use this module? (that way we can mimic it).

I see https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts is not supported by Safari, so then I am guessing the bundler just takes https://cdn.jsdelivr.net/npm/idb@7/build/umd.js and inlines it before the service worker file (as if it was copied and pasted at the top of the service worker file). Then one uses the global idb object.

[jakearchibald]

I think https://rollupjs.org/guide/en/ gives a good overview of what a bundler is and how it works.

The other option is described in https://github.com/jakearchibald/idb#directly-in-a-browser