injectRegister: false still registers service worker

[liamb0t]

I'm trying to register my service worker manually so that it only gets registered when visiting specific URLs in my app. I've set injectRegister: false thinking it would not register the SW. But even so, and even if I don't install it manually, I can still see the service working being registered and pre-caching data in the dev tools?? How can I register it manually?

This is the current config:

pwa: {
    scope: '/',
    base: '/',
    manifest: false,
    injectRegister: false,
    registerType: 'prompt',
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
      runtimeCaching: [
        {
          urlPattern: ({ url }) => url.origin === 'https://myapp.directus.app',
          handler: 'NetworkFirst',
          options: {
            cacheName: 'directus-cache'
          }
        },
        {
          urlPattern: ({ request }) => request.destination === 'video',
          handler: 'CacheFirst',
          options: {
            cacheName: 'video-cache'
          }
        }
      ],
      navigateFallback: undefined,
      maximumFileSizeToCacheInBytes: 50 * 1024 * 1024 // 50MB,
    }
  },

[userquin]

check if you are using any virtual pwa module; check also if you already have the sw registered (clear storage including the sw) => check your app in private browsing in your local (this way every time you close the browser the sw will be removed)

[liamb0t]

I've tried clearing storage, unregistering the sw, opening in new incognito window, closing browser and re-opening, it's still registering. And I don't think I have any other pwa module installed, only @vite-pwa/nuxt

  "devDependencies": {
    "@nuxt/eslint-config": "0.6.1",
    "@nuxt/test-utils": "3.15.4",
    "@nuxtjs/device": "3.2.4",
    "@nuxtjs/i18n": "8.5.6",
    "@nuxtjs/tailwindcss": "6.13.1",
    "@stylistic/eslint-plugin": "2.11.0",
    "@types/bun": "1.1.13",
    "@types/google.maps": "3.58.1",
    "@types/qrcode": "1.5.5",
    "@types/three": "0.169.0",
    "@types/uuid": "10.0.0",
    "@vite-pwa/nuxt": "0.10.6",
    "@vitest/ui": "2.1.8",
    "@vue/test-utils": "2.4.6",
    "@vueuse/nuxt": "11.1.0",
    "colord": "2.9.3",
    "eslint": "9.18.0",
    "eslint-plugin-tailwindcss": "3.17.5",
    "eslint-plugin-vuejs-accessibility": "2.4.1",
    "happy-dom": "15.11.7",
    "husky": "9.1.7",
    "lint-staged": "15.2.10",
    "nuxt": "3.14.1592",
    "nuxt-directus": "5.6.1",
    "nuxt-security": "2.1.5",
    "nx": "20.1.3",
    "playwright-core": "1.47.2",
    "protobufjs-cli": "1.1.3",
    "style-dictionary": "4.1.4",
    "tailwindcss": "3.4.17",
    "typescript": "5.6.3",
    "vitest": "2.1.9",
    "vue": "3.5.13",
    "vue-tsc": "2.1.10"
  },
  "dependencies": {
    "@dotlottie/player-component": "2.7.12",
    "@fortawesome/fontawesome-svg-core": "6.7.2",
    "@fortawesome/free-brands-svg-icons": "6.7.2",
    "@fortawesome/free-regular-svg-icons": "6.7.2",
    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/vue-fontawesome": "3.0.8",
    "@google/model-viewer": "3.5.0",
    "@googlemaps/js-api-loader": "1.16.8",
    "@headlessui/vue": "1.7.23",
    "@heroicons/vue": "2.2.0",
    "@inworld/nodejs-sdk": "1.17.0",
    "@inworld/web-core": "2.9.2",
    "@nuxt/image": "1.9.0",
    "@pinia/nuxt": "0.5.5",
    "@unovis/ts": "1.4.4",
    "@unovis/vue": "1.4.4",
    "@vee-validate/zod": "4.14.7",
    "@vercel/analytics": "1.4.1",
    "@vueuse/core": "11.1.0",
    "@vueuse/integrations": "12.7.0",
    "canvas-confetti": "1.9.3",
    "cesium": "1.123.1",
    "class-variance-authority": "0.7.1",
    "clsx": "2.1.1",
    "deck.gl": "9.0.35",
    "embla-carousel": "8.3.1",
    "embla-carousel-vue": "8.3.1",
    "livekit-client": "2.6.3",
    "livekit-server-sdk": "2.8.1",
    "long": "5.2.4",
    "lucide-vue-next": "0.456.0",
    "mapbox-gl": "3.8.0",
    "nuxt-swiper": "2.0.0",
    "pinia": "2.2.6",
    "protobufjs": "7.4.0",
    "qrcode": "1.5.4",
    "radix-vue": "1.9.13",
    "tailwind-merge": "2.5.4",
    "tailwindcss-animate": "1.0.7",
    "three": "0.170.0",
    "uuid": "10.0.0",
    "vaul-vue": "0.2.0",
    "vee-validate": "4.13.2",
    "zod": "3.23.8"
  },
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
  "patchedDependencies": {
    "nuxt-directus@5.6.1": "patches/nuxt-directus@5.6.1.patch"
  }
}

[userquin]

Upps, this is nuxt integration sorry. You can disable the plugin in the client options https://github.com/vite-pwa/nuxt/blob/main/src/types.ts#L7C3-L7C17 but then you won't have any utility.

[liamb0t]

Thanks @userquin that worked. It no longer registers it.

I created a composable to register the sw when visiting specific routes like this and add it to my App.vue page:

export function useServiceWorker() {
  const registerServiceWorker = () => {
    if ('serviceWorker' in navigator && serviceWorkerRoutes.includes(location.pathname)) {
      navigator.serviceWorker
        .register('/sw.js')
        .then((registration) => {
          console.log('Service Worker registered with scope:', registration.scope)
        })
        .catch((error) => {
          console.error('Service Worker registration failed:', error)
        })
    }
  }

  return {
    registerServiceWorker,
  }
}

This seems to work and will only register the sw when visiting these routes. Is this a bad way of doing this though? Will there be any bad side-effects? @userquin

[userquin]

You can use runtime caching + navigateFallbackDenylist instead (registering the sw via plugin), this way the sw will be always there.

Check vite-pwa/sveltekit#65 and links in this comment vite-pwa/sveltekit#65 (comment)