Vue-Router example with claims works but without does not??

[michaeltoohig]

If I modify prompt-sw.ts I do not see the change take affect when the service work installs. However, if I modify claims-sw.ts I do see my modifications take effect. I mean a modification as simple as adding a console log in each file. If I run npm run dev I don't see the console log but if I run npm run dev-claims I do see the console log I added to claims-sw.ts.

So where is the service worker code for npm run dev? Is that some sort of auto-magically added service worker script somewhere?

Why is this line pwaOptions.filename = claims ? 'claims-sw.ts' : 'prompt-sw.ts' in vite config if I don't see the console log I add to prompt-sw.ts?

Sorry, maybe something simple but I've been banging my head on this. Actually, I've been finding the whole plugin docs very short in description and I haven't had success with it either. Thank you for any help in case this is not a bug.

[userquin]

The vue-router example contains 2 examples, if you check the package.json file there are a few scripts to switch between prompt and auto update strategies.

[michaeltoohig]

Yes, I do know that and I stated as such that I used npm run dev to insert promp-sw-ts and npm run dev-claims to insert the claims-sw.ts file, although the way I phrased it may have been unclear.

To reiterate my post above, if I run-claims I see my modifications to claims-sw in my browser; however, if I run dev I do not see my local modifications to prompt-sw in my browser. Why is this?

[userquin]

running claims-sw script will use autoUpdate register type, running default script will use prompt, you should remove the storage and the sw between tests.

check the env variables on each script and the vite.config.ts file

[michaeltoohig]

I saw the env vars and would run the dev-destroy or dev-claims-destroy scripts between changes is that not enough?

But you mean to say I am correct that run dev uses the prompt-sw.ts file as the source of the service worker code? When using the run dev I would see the prompt and watch the new service worker install but never saw my console log or other code changes I added in prompt-sw.ts.

[userquin]

I saw the env vars and would run the dev-destroy or dev-claims-destroy scripts between changes is that not enough?

:thumbsup: you only need to rebuild, restart the server and refresh the page

But you mean to say I am correct that run dev uses the prompt-sw.ts file as the source of the service worker code? When using the run dev I would see the prompt and watch the new service worker install but never saw my console log or other code changes I added in prompt-sw.ts.

Not sure, too many options, you can just run nr examples from root and follow the wizard... IIRC the script used will be in the console.

[michaeltoohig]

That's cool running npm run examples on the root directory but from what you've said I am properly rebuilding and restarting server & sw between changes. So I still want to know how do I modify the service worker for the prompt option and why I can't seem to by editing prompt-sw.ts.

If I add a console.log to claims-sw.ts I see the log message in my browser, if I do the same in prompt-sw.ts I do not.

[userquin]

Replace the first 4 scripts with this ones (missing SW=true env var):

    "dev": "rimraf dev-dist && DEBUG=vite-plugin-pwa SW_DEV=true SW=true vite --force",
    "dev-claims": "rimraf dev-dist && DEBUG=vite-plugin-pwa SW_DEV=true CLAIMS=true SW=true vite --force",
    "dev-destroy": "rimraf dev-dist && DEBUG=vite-plugin-pwa SW_DESTROY=true SW_DEV=true SW=true  vite --force",
    "dev-claims-destroy": "rimraf dev-dist && DEBUG=vite-plugin-pwa SW_DESTROY=true SW_DEV=true CLAIMS=true SW=true vite --force",

As I said, too many options: nr dev using generateSW strategy instead injectManifest (SW=true should now use prompt-sw.ts)

[userquin]

Remove also the import in the workerImport.js, I'll send a PR to fix SW=true and the import tmr

The docs specify what is running: https://vite-pwa-org.netlify.app/guide/development.html#example

I'll remove only the import in the worker (vue-router only).

[userquin]

PR welcome to add a hint to run dev with injectManifest strategy in the development example section: https://vite-pwa-org.netlify.app/guide/development.html#example

[michaeltoohig]

I would like to write the PR but I don't yet understand what you changed and how it affects the docs. With your change I now see run dev builds a SW from prompt-sw.ts (which I always expected) while run dev-claims builds a SW from claims-sw.ts as it always had. The docs say run dev uses the generateSW method while run dev-claims uses the injectManifest strategy. This is confusing to me because isn't a manifest file distinct from a service worker why wouldn't both commands include a service worker or have any reference to the which example service worker file they are built from?

Sorry I haven't built a serious PWA application since 2020 and I wasn't using an abstraction layer. I'm a bit rusty on the PWA/service worker concepts again and finding getting started this time more complicated although I see how this plugin is abstracting away many of the details I recall dealing with before.

[userquin]

You can write your "basic" service worker logic using generateSW or injectManifest strategies: generateSW should be used when you only need "basic " sw capabilities, workbox will use same transpilation to use its internal modules, you can check this entry in the docs https://developer.chrome.com/docs/workbox/the-ways-of-workbox/ .

When using generateSW strategy, workbox-build node module will generate the service worker for you, we cannot refer to any service worker module, claims and prompt service workers included in each fw example is the custom service worker (injectManifest) equivalent when using workbox PWA option (for example, workbox.clientsClaims = true and the equivalent when using custom service worker: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/examples/vue-router/src/claims-sw.ts#L24).

The web manifest doesn't describe the service worker internal behavior: in any framework example, we're using "basic" logic, using generateSW or injectManifest strategies (later will generate the equivalent service worker logic).

Any sw behavior you can include with generateSW strategy can be also included with a custom service worker (injectManifest strategy): you should only use injectManifest when you need to include some advanced service worker capabilities you cannot write using generateSW such as Web Push Notifications, Push Notification Clicks, Web Shared Target API...

[michaeltoohig]

I found on PWA Builder, which led to their own example repo, I can use injectManifest as an object instead it being just an enum for strategies.

Am I still using this correctly? Is srcDir and filename different than swSrc?

const pwaOptions: Partial<VitePWAOptions> = {
  mode: 'development',
  base: '/',
  includeAssets: ['favicon.svg'],
  // srcDir: 'src',
  // filename: 'sw.ts',
  strategies: 'injectManifest',
  injectManifest: {  // <-- does what I wanted but I don't know why its different than before
    swSrc: 'src/sw.ts',
    swDest: 'dist/sw.js',
  },
  manifest: {
    name: 'PWA Router',
    short_name: 'PWA Router',
    theme_color: '#ffffff',
    lang: 'en',
    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',
        purpose: 'any'  
      },
      {
        src: 'maskable-icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable'
      },
    ],
  },
  devOptions: {
    enabled: process.env.SW_DEV === 'true',
    /* when using generateSW the PWA plugin will switch to classic */
    type: 'module',
    navigateFallback: 'index.html',
    suppressWarnings: true,
  },
}

Maybe this will help someone else but I'm still trying to figure everything out.