Using SW in non-PWA apps

[Dragomir-Ivanov]

Greetings, I understand what vite-pwa is made to support full fledged PWAs, however I don't want PWA support(caching), but only to install SW for fetch interception, in order to make transparent refresh for auth token.

Can you add such simple support to vite-pwa, or guide how to do it manually. My project structure is:

src/
src/service-worker.js

I do in my main.tsx:

// Register the Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js")
}

However service-worker is not copied to dist/ and can't be loaded in development.

Thank you and best, Dragomir

[userquin]

@Dragomir-Ivanov you can try with this configuration, register your sw with your code in main.tsx (IIRC there is a pending PR here to be included about configuring no injection point):

srcDir: 'src',
filename: 'service-worker.js`,
strategies: 'injectManifest',
injectRegister: false,
manifest: false,
injectManifest: {
 injectionPoint: null,
}

[Dragomir-Ivanov]

@userquin Thank you for your fast response.

Unfortunately it didn't work. Details:

vite.config.ts

  plugins: [
    react(),
    tsconfigPaths(),
    VitePWA({
      srcDir: "src",
      filename: "service-worker.js",
      strategies: "injectManifest",
      injectRegister: false,
      manifest: false,
      injectManifest: {
        // eslint-disable-next-line no-null/no-null
        injectionPoint: null,
      },
      devOptions: {
        enabled: true,
      },
    }),
  ],

My registering code stays the same.

For yarn dev it gives:

Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:3000/service-worker.js for scope http://localhost:3000/ encountered an error during installation.

For yarn build it gives:

error during build:
Error: Error running plugin hook closeBundle for vite-plugin-pwa:build, expected a function hook.
    at error (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:198:30)
    at throwInvalidHookError (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:22682:12)
    at /home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:22823:24
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 0)
    at async Object.close (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:23700:13)
    at async Promise.all (index 0)
    at async build (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/dist/node/chunks/dep-9c153816.js:38964:13)
    at async CAC.<anonymous> (/home/drago/Work/AgcoLeasing/monorepo3/ui/node_modules/vite/dist/node/cli.js:738:9)
error Command failed with exit code 1.

[userquin]

@Dragomir-Ivanov update vite to 3 or 3.1, check readme docs: https://github.com/vite-pwa/vite-plugin-pwa#-install

[Dragomir-Ivanov]

@userquin Ah, I am sorry. Didn't saw the version 3.1 requirement. After the update:

yarn build adds service-worker.js to dist/. OK!

yarn dev doesn't allow the browser to register the SW:

Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:5173/service-worker.js for scope http://localhost:5173/ encountered an error during installation.

I do have

 devOptions: {
        enabled: true,
      },

[userquin]

@Dragomir-Ivanov check https://vite-pwa-org.netlify.app/guide/development.html#injectmanifest-strategy, you need to use custom sw registration via:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register(
    import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw'
  )
}

If you're using import statements inside your sw (will work only on chromium based browsers):

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register(
    import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw',
    { type: import.meta.env.MODE === 'production' ? 'classic' : 'module' }
  )
}

[Dragomir-Ivanov]

@userquin Thanks a ton! It worked!

Not using imports, nor Chromium based browser. This setup seems to work with FF.

I guess, a short section in the documentation for custom SW is justified, to collect all the knowledge in a single place.

Again Thank You Joaquín, Best

[userquin]

I guess, a short section in the documentation for custom SW is justified, to collect all the knowledge in a single place.

PR welcome

[Dragomir-Ivanov]

Will do!

[ulken]

@userquin just curious, would it be feasible to extract the SW logic into a separate plugin (which this would depend on)? Or is it all too intertwined?