Upload prompt not working correctly when adding base url

[ghbishal]

The above image is the basic setup i did and i just updated my vite.config.ts to this below,

Basically i added prefix path so my base url is http://localhost:4173/mobile

The problem is, When I am not using the base url and when I reload page I get the reload prompt like the picture below , But when i am using baseUrl and I do not get the reload prompt, It's updated directly without any prompt. and after I manually press update button on the top right and reload the page i get the prompt saying App ready to work offline

import { VitePWA } from "vite-plugin-pwa";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const PATH_PREFIX = "mobile";

// https://vitejs.dev/config/
export default defineConfig({
  base: `/${PATH_PREFIX}`,
  plugins: [
    react(),
    VitePWA({
      strategies: "injectManifest",
      srcDir: "src",
      filename: "sw.ts",
      registerType: "prompt",
      injectRegister: false,

      manifest: {
        name: "pwa-inject-manifest-prompt",
        short_name: "pwa-inject-manifest-prompt",
        description: "pwa-inject-manifest-prompt",
        theme_color: "#ffffff",

        icons: [
          {
            src: "pwa-64x64.png",
            sizes: "64x64",
            type: "image/png",
          },
          {
            src: "pwa-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
          {
            src: "maskable-icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "maskable",
          },
        ],
      },

      workbox: {
        cleanupOutdatedCaches: true,
      },

      injectManifest: {
        globPatterns: ["**/*.{js,css,html,svg,png,ico}"],
      },

      devOptions: {
        enabled: true,
        navigateFallback: "index.html",
        suppressWarnings: true,
        type: "module",
      },
    }),
  ],
});

[ghbishal]

@userquin can you please help me 🙇

[userquin]

Try adding / to the pwa icons.

[userquin]

Or try adding trailing slash to the base /mobile/

[ghbishal]

@userquin
i did that and i fixed the problem in local it's the problem with the scope,
but in my production url i am getting error

The path of the provided scope ('/mobile') is not under the max scope allowed ('/mobile/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

This is my updated config

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
import path from 'path'

const PATH_PREFIX = 'mobile'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
	const env = loadEnv(mode, process.cwd())
	return {
		base: `/${PATH_PREFIX}`,
		envPrefix: 'REACT_APP_',
		plugins: [
			react(),
			VitePWA({
				strategies: 'injectManifest',
				srcDir: 'src/service-worker',
				filename: 'sw.ts',
				registerType: 'prompt',
				injectRegister: false,
				scope: `/${PATH_PREFIX}`,

				devOptions: {
					enabled: true,
					navigateFallback: 'index.html',
					suppressWarnings: true,
					type: 'module'
				},

				workbox: {
					cleanupOutdatedCaches: true,

					skipWaiting: false,
					clientsClaim: false
				},

				injectManifest: {
					globPatterns: ['**/*.{js,css,html,svg,png,ico}'],
					maximumFileSizeToCacheInBytes: 3000000 // 3MB
				},

				// Manifest is in public
				manifest: false
			})
		],

		server: {
			port: Number(env.VITE_FRONTEND_PORT),
			headers: {
				'Service-Worker-Allowed': `/${PATH_PREFIX}`
			}
		},
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'src')
			}
		},
		define: {
			'process.env': {
				PATH_PREFIX
			}
		},
		build: {
			rollupOptions: {
				output: {
					manualChunks(id) {
						if (id.includes('node_modules')) {
							return id.split('node_modules/')[1].split('/')[0]
						}
					}
				}
			}
		}
	}
})

[userquin]

Try using /mobile/, your app must be under that context path. Your assets must also be under that context path, a sw with scope /mobile cannot control /assets/* or /*

[ghbishal]

@userquin Thankyou for the response
But there is one more problem, like if i do add/mobile/mysw.tswill be inside /mobile/sw.ts,
and I will be using /mobile endpoint when opening, and if there is a new updated my page will not refresh automatically if i am on /mobile in order to fix that problem i am did /mobile or scope.

please let me know if you have any ideas, I am waiting for your response 🙇 , Thankyou very much in advance

also
am i doing this correctly? because i feel like this is giving me more error.

server: {
			port: Number(env.VITE_FRONTEND_PORT),
			headers: {
				'Service-Worker-Allowed': `/${PATH_PREFIX}`
			}
		},

[userquin]

this header is set only in your local dev server, you'll need to add also it on your local build + preview (if using express that header will be missing and so the error), you also need it at your server backend; where are your assets located? how many apps do you have in your app (only /mobile)? the base url should be at your server (its context/base path) otherwise all assets folder will be at root (/)

[ghbishal]

@userquin Thankyou for your response,
my assets means those icons right? (its inside the public folder), we have 4 app basically /mobile is one of the all the app has same base url but only /mobile is a pwa app.

[userquin]

Try using /mobile/ in the base and remove the scope in the pwa options, you need to run the preview using the context path /mobile/ if using npx serve dist (no idea how to do that).

When using multiple context in the same domain you may have some problems with the service worker since it is based on same origin, try adding the base meta in the head. A sw cannot be used outside its scope so if your are using some asset from / , the sw will complain. Ensure you redirect to mobile context from your backend.

Check this https://web.dev/articles/building-multiple-pwas-on-the-same-domain