How to import workbox-sw module?

[ninsky]

Hello

Thanks a lot for this library. As a beginner i think it's really difficult to integrate Workbox into SvelteKit. The integration seems to be less complex than vite-plugin-pwa.

So I've followed your instructions and I've managed to get a Service Worker up and running. Now my next goal is to enable Workbox console logging as shown on the pictures here. Therefore I'm trying to load a local "workbox" object (no CDN) as described here but without success so far.

The idea would be to enable logging by loading the "workbox" object in my Service Worker like this:

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
  debug: true
});

Therefore I've did npm i -D workbox-sw but I don't know which path to use in the importScripts() function as there's no workbox-sw.js file in the .svelte-kit/build folder after I've created a preview build. (Even the "importScripts" function is marked as en error by ESLint in the Service Worker saying ESLint: 'importScripts' is not defined.(no-undef) but that's another story)

Your help would be much appreciated as I've tried to find help here and here asking the same question.

Would be nice to have an extended example in your Readme file showing how to use the "workbox" object of the "workbox-sw" class which is key.

Thanks in advance
Nino

[Anyass3]

Hi there

Thanks for showing interest in the lib.

I updated the readme using--importscripts-with-workbox-sw

there's no workbox-sw.js file in the .svelte-kit/build

You need to put those files in the static files folder

so for instance, if you put it in static/third_party/workbox-vX.Y.Z/workbox-sw.js

then you can do

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
  debug: true
});

[ninsky]

Hello @Anyass3

Thanks a lot for your help and your doc update!

I've managed to integrate workbox by using the CDN solution which is good enough for the moment. Your proposed solution with putting the workbox files to the static folder didn't work for me as the service worker didn't find those files in his scope (404 on loading workbox-sw.js). I've tried to put the files under "src/lib/workbox" as the service worker file is on the "src" folder but this didn't work either (another 404 on trying to load workbox-sw.js).

I think this has to do with the SvelteKit build process somehow. I'm too unexperienced with SvelteKit to go deeper here. So I will stick to the CDN solution and hope to get some lib / doc updates in future on SvelteKit for a seamless integration.

If you intend to push this lib forward it would be a great help for newbies to see a demo application with offline support by using the non-CDN approach.

Thanks so far! You helped me to get started with Workbox on SvelteKit which is great :)

[Anyass3]

...Your proposed solution with putting the workbox files to the static folder didn't work for me as the service worker didn't find those files in his scope (404 on loading workbox-sw.js)....

HI @ninsky, could you cross-check; I think you missed something somewhere, but this should work. At least it did for me.

[Anyass3]

checkout

https://github.com/Anyass3/youtube-dl/blob/main/src/service-worker.ts

https://github.com/Anyass3/youtube-dl/tree/main/static

[ninsky]

@Anyass3 , this did the trick! Thanks a lot! I had a path in the "importScripts" function containing the "static" folder which isn't necessary.

Really nice work!