vite-pwa · Iran-110 · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024 · Oct 15, 2024
diff --git a/docs/frameworks/index.md b/docs/frameworks/index.md
@@ -30,6 +30,7 @@ You can find all the `vite-plugin-pwa` virtual modules declarations in the follo
 declare module 'virtual:pwa-register' {
   export interface RegisterSWOptions {
     immediate?: boolean
+    searchQueryParams?: string | string[][] | URLSearchParams | Record<string, any>
     onNeedRefresh?: () => void
     onOfflineReady?: () => void
     /**

diff --git a/docs/frameworks/preact.md b/docs/frameworks/preact.md
@@ -23,6 +23,7 @@ declare module 'virtual:pwa-register/preact' {
 
   export interface RegisterSWOptions {
     immediate?: boolean
+    searchQueryParams?: string | string[][] | URLSearchParams | Record<string, any>
     onNeedRefresh?: () => void
     onOfflineReady?: () => void
     /**

diff --git a/docs/frameworks/react.md b/docs/frameworks/react.md
@@ -23,6 +23,7 @@ declare module 'virtual:pwa-register/react' {
 
   export interface RegisterSWOptions {
     immediate?: boolean
+    searchQueryParams?: string | string[][] | URLSearchParams | Record<string, any>
     onNeedRefresh?: () => void
     onOfflineReady?: () => void
     /**

diff --git a/docs/frameworks/solidjs.md b/docs/frameworks/solidjs.md
@@ -23,6 +23,7 @@ declare module 'virtual:pwa-register/solid' {
 
   export interface RegisterSWOptions {
     immediate?: boolean
+    searchQueryParams?: string | string[][] | URLSearchParams | Record<string, any>
     onNeedRefresh?: () => void
     onOfflineReady?: () => void
     /**

diff --git a/docs/frameworks/svelte.md b/docs/frameworks/svelte.md
@@ -23,6 +23,7 @@ declare module 'virtual:pwa-register/svelte' {
 
   export interface RegisterSWOptions {
     immediate?: boolean
+    searchQueryParams?: string | string[][] | URLSearchParams | Record<string, any>
     onNeedRefresh?: () => void
     onOfflineReady?: () => void
     /**

diff --git a/docs/frameworks/vue.md b/docs/frameworks/vue.md
@@ -21,6 +21,7 @@ declare module 'virtual:pwa-register/vue' {
 
   export interface RegisterSWOptions {
     immediate?: boolean
+    searchQueryParams?: string | string[][] | URLSearchParams | Record<string, any>
     onNeedRefresh?: () => void
     onOfflineReady?: () => void
     /**

diff --git a/examples/assets-generator/src/pwa.ts b/examples/assets-generator/src/pwa.ts
@@ -9,6 +9,7 @@ console.log(pwaAssetsIcons)
 
 registerSW({
   immediate: true,
+  searchParams: { version: '1.0' },
   onNeedRefresh() {
     console.log('onNeedRefresh message should not appear')
   },

diff --git a/examples/preact-router/src/ReloadPrompt.tsx b/examples/preact-router/src/ReloadPrompt.tsx
@@ -16,6 +16,7 @@ function ReloadPrompt() {
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker,
   } = useRegisterSW({
+    searchParams: { version: '1.0' },
     onRegisteredSW(swUrl, r) {
       console.log(`Service Worker at: ${swUrl}`)
       // @ts-expect-error just ignore

diff --git a/examples/react-router/src/ReloadPrompt.tsx b/examples/react-router/src/ReloadPrompt.tsx
@@ -17,6 +17,7 @@ function ReloadPrompt() {
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker,
   } = useRegisterSW({
+    searchParams: { version: '1.0' },
     onRegisteredSW(swUrl, r) {
       console.log(`Service Worker at: ${swUrl}`)
       // @ts-expect-error just ignore

diff --git a/examples/solid-router/src/ReloadPrompt.tsx b/examples/solid-router/src/ReloadPrompt.tsx
@@ -15,6 +15,7 @@ const ReloadPrompt: Component = () => {
     updateServiceWorker,
   } = useRegisterSW({
     immediate: true,
+    searchParams: { version: '1.0' },
     onRegisteredSW(swUrl, r) {
       console.log(`Service Worker at: ${swUrl}`)
       // @ts-expect-error just ignore

diff --git a/examples/svelte-routify/src/lib/ReloadPrompt.svelte b/examples/svelte-routify/src/lib/ReloadPrompt.svelte
@@ -16,6 +16,7 @@
       needRefresh,
       updateServiceWorker,
   } = useRegisterSW({
+    searchParams: { version: '1.0' },
     onRegisteredSW(swUrl, r) {
         // eslint-disable-next-line no-console
         console.log(`Service Worker at: ${swUrl}`)

diff --git a/examples/sveltekit-pwa/src/lib/components/ReloadPrompt.svelte b/examples/sveltekit-pwa/src/lib/components/ReloadPrompt.svelte
@@ -10,6 +10,7 @@
 		needRefresh,
 		updateServiceWorker
 	} = useRegisterSW({
+		searchParams: { version: '1.0' },
 		onRegistered(r) {
 			if (reloadSW === 'true') {
 				r && setInterval(() => {

diff --git a/examples/vanilla-js-custom-sw/src/main.js b/examples/vanilla-js-custom-sw/src/main.js
@@ -19,6 +19,7 @@ app.innerHTML = `
 
 registerSW({
   immediate: true,
+  searchParams: { version: '1.0' },
   onNeedRefresh() {
     console.log('onNeedRefresh message should not appear')
   },

diff --git a/examples/vanilla-ts-no-ip/src/main.ts b/examples/vanilla-ts-no-ip/src/main.ts
@@ -20,6 +20,7 @@ app.innerHTML = `
 
 registerSW({
   immediate: true,
+  searchParams: { version: '1.0' },
   onNeedRefresh() {
     console.log('onNeedRefresh message should not appear')
   },

diff --git a/examples/vue-router/src/ReloadPrompt.vue b/examples/vue-router/src/ReloadPrompt.vue
@@ -13,6 +13,7 @@ const {
   updateServiceWorker,
 } = useRegisterSW({
   immediate: true,
+  searchParams: { version: '1.0' },
   onRegisteredSW(swUrl, r) {
     console.log(`Service Worker at: ${swUrl}`)
     if (reloadSW === 'true') {

diff --git a/src/client/build/preact.ts b/src/client/build/preact.ts
@@ -7,6 +7,7 @@ export type { RegisterSWOptions }
 export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
+    searchParams,
     onNeedRefresh,
     onOfflineReady,
     onRegistered,
@@ -20,6 +21,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const [updateServiceWorker] = useState(() => {
     return registerSW({
       immediate,
+      searchParams,
       onOfflineReady() {
         setOfflineReady(true)
         onOfflineReady?.()

diff --git a/src/client/build/react.ts b/src/client/build/react.ts
@@ -7,6 +7,7 @@ export type { RegisterSWOptions }
 export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
+    searchParams,
     onNeedRefresh,
     onOfflineReady,
     onRegistered,
@@ -20,6 +21,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const [updateServiceWorker] = useState(() => {
     return registerSW({
       immediate,
+      searchParams,
       onOfflineReady() {
         setOfflineReady(true)
         onOfflineReady?.()

diff --git a/src/client/build/register.ts b/src/client/build/register.ts
@@ -17,6 +17,7 @@ export type { RegisterSWOptions }
 export function registerSW(options: RegisterSWOptions = {}) {
   const {
     immediate = false,
+    searchParams,
     onNeedRefresh,
     onOfflineReady,
     onRegistered,
@@ -35,11 +36,15 @@ export function registerSW(options: RegisterSWOptions = {}) {
     }
   }
 
+  // concatenate the service-worker url and the query search params (if is not empty)
+  const flattenedSearchParams = new URLSearchParams(searchParams).toString();
+  const swScriptURL = ['__SW__', flattenedSearchParams].filter(Boolean).join("?");
+
   async function register() {
     if ('serviceWorker' in navigator) {
       wb = await import('workbox-window').then(({ Workbox }) => {
         // __SW__, __SCOPE__ and __TYPE__ will be replaced by virtual module
-        return new Workbox('__SW__', { scope: '__SCOPE__', type: '__TYPE__' })
+        return new Workbox(swScriptURL, { scope: '__SCOPE__', type: '__TYPE__' })
       }).catch((e) => {
         onRegisterError?.(e)
         return undefined
@@ -119,7 +124,7 @@ export function registerSW(options: RegisterSWOptions = {}) {
       // register the service worker
       wb.register({ immediate }).then((r) => {
         if (onRegisteredSW)
-          onRegisteredSW('__SW__', r)
+          onRegisteredSW(swScriptURL, r)
         else
           onRegistered?.(r)
       }).catch((e) => {

diff --git a/src/client/build/solid.ts b/src/client/build/solid.ts
@@ -7,6 +7,7 @@ export type { RegisterSWOptions }
 export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
+    searchParams,
     onNeedRefresh,
     onOfflineReady,
     onRegistered,
@@ -19,6 +20,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
 
   const updateServiceWorker = registerSW({
     immediate,
+    searchParams,
     onOfflineReady() {
       setOfflineReady(true)
       onOfflineReady?.()

diff --git a/src/client/build/svelte.ts b/src/client/build/svelte.ts
@@ -7,6 +7,7 @@ export type { RegisterSWOptions }
 export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
+    searchParams,
     onNeedRefresh,
     onOfflineReady,
     onRegistered,
@@ -19,6 +20,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
 
   const updateServiceWorker = registerSW({
     immediate,
+    searchParams,
     onOfflineReady() {
       offlineReady.set(true)
       onOfflineReady?.()

diff --git a/src/client/build/vue.ts b/src/client/build/vue.ts
@@ -7,6 +7,7 @@ export type { RegisterSWOptions }
 export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
+    searchParams,
     onNeedRefresh,
     onOfflineReady,
     onRegistered,
@@ -19,6 +20,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
 
   const updateServiceWorker = registerSW({
     immediate,
+    searchParams,
     onNeedRefresh() {
       needRefresh.value = true
       onNeedRefresh?.()

diff --git a/src/client/type.d.ts b/src/client/type.d.ts
@@ -1,5 +1,6 @@
 export interface RegisterSWOptions {
   immediate?: boolean
+  searchParams?: string | string[][] | URLSearchParams | Record<string, any>
   onNeedRefresh?: () => void
   onOfflineReady?: () => void
   /**

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -1,5 +1,6 @@
 export interface RegisterSWOptions {
   immediate?: boolean
+  searchParams?: string | string[][] | URLSearchParams | Record<string, any>
   onNeedRefresh?: () => void
   onOfflineReady?: () => void
   /**