Official qwik support

[maiieul]

Hi, Qwik core member here 👋

Now that qwik does not use a service-worker by default anymore (it uses <link rel="modulepreload"> instead), I am exploring how we can provide easy service worker, pwa, offline support, and more. This plugin seems like a logical choice.

Are you open to including Qwik support in this repo? I can work on a PR.

Qwik is usually SSR or SSG (through Qwik City). I have been able to hack around the plugin a little and it almost works for offline mode in preview:

• if I manually add this inline script I can get the js bundles and assets to be cached (using a somewhat default qwikPWA config)

<script dangerouslySetInnerHTML={`if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}`} />

• but I'm unable to cache the html files whether I'm on an SSR (in preview) or SSG build.

I'd appreciate some hints into what needs to be done if you can :).

[userquin]

https://github.com/QwikCommunity/pwa

[maiieul]

@userquin I know we have that, but this relies on qwik providing a service-worker which we don't support anymore.

What I'd like to know is the requirements to having qwik working with SSR/SSG and vite-plugin-pwa.

I see there are Remix and Nuxt3 examples. Would these be good starting points to take inspiration from? Do they support SSR or it is just SSG? I assume this is not CSR.

[userquin]

The SW should be SSR/SSG agnostic, it is just a client only asset. The problem is about adding offline support, where you need to access the html pages prerendered since wrokbox-build will use dist folder to apply the include/exclude globs patterns. You can use some hack via some workbox-build hook.

For example, using vitepress (ssg), we use the VP buildEnd hook to rebuild the sw precache manifest. With SvelteKit, we use a custom vite build plugin with object notation with enforce pre, that runs once between ssr kit vite plugin running the prerender process but before the adapter runs (this process runs in a vite ssr plugin with object notation with enforced unset or end.

If you use just qwik with Vite, the pwa plugin will do its work (vite build plugin with object notation and enforce post). If you use qwik city, you will need to rebuild the sw once the ssr/ssg process finished (if you can, also before the process ends).

You can check the integrations for VP and kit.

Here the cookbok integration: https://vite-pwa-org.netlify.app/guide/cookbook.html

[userquin]

You can access the rollup api exposed by the main plugin to rebuild the sw where you want.

[userquin]

Note: the build plugin and object notation is about the closeBundle hook (Rollup big change to support frameworks like kit), previous version were running all async writeBundle/closeBundle hooks in parallel, check vitejs/vite#13175

kit ssr vite build plugin using writeBundle to run the prerender process (object notation): https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/index.js#L1223 , and the adapter process using the same ssr vite build plugin at closeBundle hook with object notation (here the initialization https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/index.js#L1272) here https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/index.js#L1311

Vite PWA Plugin allows us to add some integration hooks, you will need to remove the pwa build plugin, then access the api exposed by the main plugin and rebuild the sw somewhere in the pipeline.