kevinmarrec / nuxt-pwa-module

⚠️ DEPRECATED ⚠️ Zero config PWA solution for Nuxt 3
MIT License
339 stars 32 forks source link

Allow passing query parameters to service worker URL #72

Closed BobbieGoede closed 1 year ago

BobbieGoede commented 1 year ago

Using @nuxtjs/pwa we wanted the service worker to use different configs based on the environment it was being run in, due to our workflow and the moment at which the templates were being compiled it was not possible to set the config on start up.

As a workaround we used query parameters to pass values to the service worker in nuxt.config.ts like so:

workbox: {
    swURL: `/sw.js?${swQueryParams}`,
    importScripts: ['/custom-sw.js'],
}

Unfortunately this is doesn't seem to be possible anymore while upgrading to this module. Any options adding parameters to the URL seem to be removed. Is there a better/recommended way to achieve this now or should this functionality be added again?

BobbieGoede commented 1 year ago

This is how the original module preserved the URL.

https://github.com/nuxt-community/pwa-module/blob/79322c18a28456a02ef0c3c596dff6cd88389f59/templates/workbox/workbox.js#L8

This module is hardcoded to use 'sw.js' https://github.com/kevinmarrec/nuxt-pwa-module/blob/6997148680f330b6c282cdc27029071ba8a30a5d/src/runtime/nitro-plugin.ts#L11

I'm not sure if it is possible to access module options in a nitro plugin, but it looks like it could be done via runtimeConfig variables.

kevinmarrec commented 1 year ago

@BobbieGoede I finally think there's no really usage for query parameters for the service worker URL.

If you need to have custom params given to your service worker, it means you have a custom service worker that uses them.

And if you have a custom service worker, you can easily get module workbox options this way :

// sw.js
const options = <%= JSON.stringify(options) %>

You could then add pwa.workbox.queryParams (even if types are not existing for this property) into your nuxt.config.ts, and you'll be able to access it through options.queryParams in your service worker.