dev-sw doesn't seem to be available.

[leonardo-melhor-envio]

I've tried several ways, but none of them work. I can't register in dev environment, a custom sw. When generating a new release, we were even able to produce the sw.js file. But I can't use the file in dev. In a fresh install, the same configs seem to work.

Failed to register a ServiceWorker for scope ('http://localhost:3000/app/')
with script ('http://localhost:3000/app/dev-sw.js?dev-sw'): The script has an unsupported MIME type ('text/html').

these are my settings.

import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';
import { clientsClaim } from 'workbox-core'

self.skipWaiting();
clientsClaim();

// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST)

// clean old assets
cleanupOutdatedCaches()

let allowlist
if (import.meta.env.DEV) {
  allowlist = [/^\/$/]
}

let denylist
if (import.meta.env.PROD) {
  denylist = [
    /^\/sw.js/,
    /^\/grapqhl/,
    /^\/manifest.webmanifest$/,
  ]
}

try {
  // to allow work offline
  registerRoute(new NavigationRoute(
    createHandlerBoundToURL('/'),
    { allowlist, denylist },
  ))
} catch (error) {
  console.warn('Error while registering cache route', { error });
}

Im adding manifest from nuxt.config

// public/manifest.webmanifest
{
  "name": "App name",
  "short_name": "App name",
  "description": "App descriptiom",
  "display": "minimal-ui",
  "start_url": "/",
  "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"
    }, 
    {
      "src": "android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
}

/config/pwa.js
{
  scope: '/',
  srcDir: './service-worker',
  filename: 'sw.js',
  strategies: 'injectManifest',
  manifest: false,
  client: {
    installPrompt: true,
    registerPlugin: true,
    periodicSyncForUpdates: 10,
  },
  injectManifest: {
    globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
    globIgnores: ['manifest.webmanifest'],
  },
  devOptions: {
    enabled: process.env.APP_DEV_PWA === 'true',
    type: 'module',
  },
}

[userquin]

You're using base: '/app/' and you're registering the sw scope with /, remove the scope from the pwa configuration and update the start_url to use the base url or configure the base url in some common place and use it to configure the pwa stuff.

Also update the custom sw, you're using / in allow and deny list and navigation fallback.

[leonardo-melhor-envio]

@userquin I made the changes as you mentioned, but I didn't get success. I use a baseURL /app/ but I also need to use a cdnURL /, while building my project. If I remove the base url, everything works normally.

how can i achieve that? I believe we should look at this cdnURL.

// nuxt.config.js

app: {
    baseURL: '/app/',
    cdnURL: '/'
  },

[userquin]

@leonardo-melhor-envio upps, I have no idea about that configuration, it seems you have 2 urls, try just adding / to the pwa scope and start_url, add also a manifestTransform to add app/ prefix to any entry: entry.url

EDIT: IIRC you have some option about using a prefix in the injectManifest configuration option

Maybe you also need to add some headers: https://github.com/vite-pwa/vite-plugin-pwa/issues/467#issuecomment-1427998051

[danieldanielecki]

I experience the same problem, seeing

[Vue Router warn]: No match found for location with path "/dev-sw.js?dev-sw"
[Vue Router warn]: No match found for location with path "/dev-sw.js"

in the console, with "0 config" and with custom pwa object configurations.

[danieldanielecki]

It looks like https://github.com/vite-pwa/nuxt/issues/54 is related, but the answer there doesn't work for me, yet.

[KUN1007]

Same issue. For me, as long as all options in the devOptions are removed, the error message disappears. However, I am not sure if this is the best practice.

...
// remove the devOptions option
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallbackAllowlist: [/^\/$/],
      type: 'module'
    }

My repository is here, and I welcome any guidance from anyone.