Provide workbox integration or documentation

[ninsky]

Describe the problem

I'm trying to integrate Google Workbox which seems to be not that easy (at least for me as a newbie). I've found some examples but it seems that those don't integrate Workbox completely as there's no workbox logging on the console and also lighthouse audits don't run till the end.

Describe the proposed solution

I'm pretty new to SvelteKit and have no knowledge about the framework architecture. I think it would help to have some kind of documentation how such an integration could be done. Even better would be a SK configuration option to enable Workbox.

Alternatives considered

According to this comment the Workbox integration of kit-sw-workbox seems to be unintuitive but maybe it's "good enough". Maybe it would also make sense to support these guys to provide a recipe to integrate Workbox.

Importance

For me using Workbox is more critical that the underlying JS framework. But I would love to use SK.

Additional Information

To me the importance is very high as I want to develop a PWA based on Workbox with offline capabilities.

[benmccann]

@userquin got this working. He sent #2281 as a PR to help enable it. I'm waiting to get Rich to review some of the outstanding PRs when he's able to devote more time a couple weeks from now

[userquin]

@ninsky you can take a look at this repo: https://github.com/antfu/vite-plugin-pwa

You can see some examples for svelte inside examples package/directory. You can also access to the docs from the repo, there are some entries that can be useful.

If you are using some adapter on your sveltekit project, the sveltekit service worker module will not help you to make it working offline, since the generated sw will not include all html pages generated by the adapter, and so the sw will not work when testing such pages on offline.

You can see my svelte society clone repo to see how I include vite-plugin-pwa and so you don't need to worry about using workbox: https://github.com/userquin/sveltesociety.dev.

The trick is to add the vite plugin pwa on vite entry on svetlte.config.js and then add a script to run after build: you'll need to add vite-plugin-pwa as dev dependency. See also the build script on the package.json file, it will run pwa.js script to generate the sw.

You can see this entry for a explanation, see my comments there: #2271

[ninsky]

@benmccann Nice, happy to see some ppl are working on that.

@userquin Thanks for your links and instructions! I will try to implement it this way. I'm wondering whether using vite-plugin-pwa can be considered as a workaround till #2281 is implemented or is it needed anyway? One of my integration problems is that I'm not able to import a workbox object in order to enable debug logs by using workbox.setConfig({ debug: true }); in the service worker. I can see that you're setting a workbox configuration with "mode: development". Maybe this will solve this issue.

Thanks for your help, @benmccann , @userquin

[userquin]

@ninsky just remove or rename your sveltekit service worker and so the service worker module from sveltekit will no be enabled and the logic will not be on dist (the pwa plugin will take care for you to register the generated sw).

The logic can be found on this component: https://github.com/userquin/sveltesociety.dev/tree/main/src/lib/components/ReloadPrompt, just see https://github.com/userquin/sveltesociety.dev/blob/main/src/routes/__layout.svelte (beware with SSR/SSG)

EDIT: the service worker will be only registered on build, not in dev (the same behavior like sveltekit).

[ninsky]

@userquin I'm still a bit struggling how to import a workbox-sw object into my Service Worker. By doing some more research I've found this library (kit-sw-workbox) which helped me to (at least) set up a Service Worker. (I've even asked the same question there how to import a workbox object). I just want to let you know about this libray. Maybe it's a help for your work on this issue.

[userquin]

@ninsky

Are you using vite-plugin-pwa or sveltekit service worker module? If you're using latter I cannot help you, I think sveltekit will not support it. If you want to see how you can use importScripts you can take a look at this: vite-pwa/vite-plugin-pwa#33 (comment) or this vite-pwa/vite-plugin-pwa#35 (comment) (example using workbox from CDN).

If you are using vite-plugin-pwa:

If you want to build your own service worker, take a look at these service workers:

• auto update behavior: https://github.com/antfu/vite-plugin-pwa/blob/main/examples/sveltekit-pwa/src/claims-sw.ts
• for prompt for update: https://github.com/antfu/vite-plugin-pwa/blob/main/examples/sveltekit-pwa/src/prompt-sw.ts
  The vite-plugin-pwa plugin will compile your service worker, you can also use vanilla javascript, you don't need to use importScripts anymore.

You can also take a look at the pwa branch of my svelte society fork here using workbox-build::generateSW and static adapter: https://github.com/userquin/sveltesociety.dev/tree/pwa. With this approach you don't need workbox and the service worker, it will be generated for you using just configuration.

No matter what approach you use, the main problem is to include all pages (map logical names from their static html pages) in the sw precache manifest, that depends on the adapter you use, the output structure after sveltekit finish building the project may differ (for example you have on scripts-2 directory how we deal with vercel adapter from another project)

[ninsky]

@userquin

I'm trying to use kit-sw-workbox just because it seems to be a bit more straight forward to integrate. Or maybe it's just the doc which seems a bit easier to me as a newbie to SvelteKit. But I'm still experimenting. Thanks again for your links. The CDN approach would work for me but I'm trying to integrate a local workbox object which I'm struggling with. But your links will help for sure. Thanks man.

[benmccann]

I'd recommend https://github.com/antfu/vite-plugin-pwa for workbox support. I don't think we'd build workbox support directly into SvelteKit, but we're happy to try to help make changes if there are things we can do to better support that plugin