[Resolved] No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

Hey there i am facing this issue - No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest. My plugin is setup correctly

• my vite.config.ts file -

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

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
   react(),
   VitePWA({
     includeAssets: [
       "favicon.svg",
       "favicon.ico",
       "robots.txt",
       "apple-touch-icon.png",
     ],
     registerType: "autoUpdate",
     manifest: {
       name: "IMG To PDF",
       short_name: "iTp",
       icons: [
         {
           src: "/android-chrome-192x192.png",
           sizes: "192x192",
           type: "image/png",
         },
         {
           src: "/android-chrome-512x512.png",
           sizes: "512x512",
           type: "image/png",
         },
         {
           src: "/android-chrome-512x512.png",
           sizes: "512x512",
           type: "image/png",
           purpose: "any maskable",
         },
       ],
       theme_color: "#2a2e38",
       background_color: "#2a2e38",
       display: "standalone",
       start_url: "/",
       lang: "en-US",
       orientation: "portrait-primary",
     },
   }),
 ],
}); 

[userquin]

@Whirl21 @vijayRT you need to import the virtual module and call it to register the service worker: https://vite-plugin-pwa.netlify.app/frameworks/#usage

@vijayRT since you’re using autoUpdate strategy just add this to your main.ts:

import { registerSW } from 'virtual:pwa-register'
...
registerSW({ immediate: true })

You can see the examples/vue-* directories on this repo. Instead using vanilla version of the virtual module, they’re using the vue 3 variant import { useRegisterSW } from 'virtual:pwa-register/vue' on ReloadPrompt.vue component, that’s included on App.vue.

[Whirl21]

To Anyone Having the same issue - you might not have followed the steps in guide page 3 & 4 like me and just thought you don’t need those, while you actually do!