feature: PWA add-on using Vite PWA Plugin in create-tsrouter-app

[FatahChan]

Setup PWA, with https://vite-pwa-org.netlify.app/

[schiller-manuel]

what's missing for that?

[FatahChan]

probably just need to add a plug in vite config

[el-buku]

problem is the vite config it's pretty complicated and it's very easy to shoot yourself in the foot with it.
an opinionated setup behind a simple config flag would work wonders

[schiller-manuel]

sounds like you "just" need an example project then?

[el-buku]

Pretty much? Been having problems with integrating the plugin in a non tanstack app, cache would not update with new deployments, stuff like that, so yeah, if anybody has a tanstack/start project with vite-pwa correctly configured would love to take a peek

[kaushalyap]

Some guide like https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps would be helpful.

[dannylin108]

TanStack Start current build process is not compatible with vite-pwa-plugin as I understand. After adding it into app.config.ts even /manifest.webmanifest is 404ed, not to speak about service worker

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
      VitePWA({
        registerType: 'autoUpdate',
        devOptions: {
          enabled: true
        },
        manifest: {
          name: 'My Awesome App',
          short_name: 'MyApp',
          description: 'My Awesome App description',
          theme_color: '#ffffff'
        }
      })
    ],
  },
}) 

[FatahChan]

I am talkibt mode for spa, with just the router

[ruudandriessen]

Although using the registerSW from vite PWA works. When using the more advanced injectManifest of PWA it's also pretty unclear how to handle that - as it would mean having to add an additional entry point to the vite config where I build a sw.ts file.

tanstackStart({
    spa: {
      enabled: true,
    },
    target: "node-server",
    react: {
      babel: {
        plugins: [["babel-plugin-react-compiler", { target: "19" }]],
      },
    },
  }),
    
// other config
    
  build: {
    sourcemap: true,
    rollupOptions: {
      input: {
        sw: "./src/sw.ts",
      },
    },
  },

But it seems that then I'm getting a bunch of errors:

[vite-plugin-pwa:build] [plugin vite-plugin-pwa:build] There was an error during the build:
  Could not load tanstack-start-manifest:v (imported by node_modules/@tanstack/start-server-core/dist/esm/loadVirtualModule.js): multiple entries detected: assets/sw-DELgmCwH.js assets/main-BgrTQ5Ia.js
Additionally, handling the error in the 'buildEnd' hook caused the following error:
  Could not load tanstack-start-manifest:v (imported by node_modules/@tanstack/start-server-core/dist/esm/loadVirtualModule.js): multiple entries detected: assets/sw-DELgmCwH.js assets/main-BgrTQ5Ia.js
    at getRollupError (file:///Users/ruudandriessen/repos/family-todo/node_modules/rollup/dist/es/shared/parseAst.js:401:41)

Or using lib:

  build: {
    sourcemap: true,
    lib: {
      name: "sw",
      formats: ["es"],
      entry: {
        sw: resolve(__dirname, "src/sw.ts"),
      },
    },
  },

In both cases, it looks like there's not even an sw.js in the output 🤔