vite-plugin-pwa
vite-plugin-pwa copied to clipboard
vite-pwa
Feature Request: Vite PWA Support for React Router 7
Hi React Router has recently merged with Remix, introducing new features and improvements in version 7. However, it is unclear how to properly configure Vite PWA to work seamlessly with React Router 7. This integration is critical for enabling PWA functionality in applications using the latest React Router version.
The only problem I'm having is about importing virtual modules in the remix pwa components, cannot load virtual modules on SSR (npx create-remix@latest + adding PWA stuff).
You can copy/paste both components to your app folder, importing them from local works: https://discord.com/channels/770287896669978684/1239208602024280076
VitePWA don't work on react router 7? it simply doesn't register/import the service workers, the install button doesn't appear and nothing...
You can copy/paste both components to your app folder, importing them from local works: https://discord.com/channels/770287896669978684/1239208602024280076
The page doesn't open, what is the link to enter the server? Or, can you paste the code here? thx
Just copy the components here https://github.com/vite-pwa/remix/tree/main/src/components to your src/components folder then use them in your root.tsx (copy only the one you're using, I mean, if not using PWA assets on the fly copy and use PWAManifest, otherwise copy and use the PWAAssets one): https://github.com/vite-pwa/remix/blob/main/examples/pwa-simple-sw/app/root.tsx (just switch this import import { PWAManifest } from '@vite-pwa/remix/components' to use the manifest from your src/components folder
@userquin There is a reproduction of vite-pwa's failure to work reliably with React-Router 7 in this repo with more details in this issue that I raised with RR7 that was turfed over here. Basically, there is a very specific issue in the build process that causes several problems:
The issue is that during the build process, vite-plugin-pwa is run after babel is run by RR7 to build the bundled JS code (which is when most of the assets are produced) but before the the SSR code is built -- which is when index.html is produced (e.g. in "SPA mode" with ssr=false in react-router.config.ts, or when pre-rendering index.html with RR7 via the prerender: ["/"] configuration), and so index.html is always excluded from the pre-cache list.
This issue causes these 3 problems:
- When using
strategies: "generateSW"(the default), the generated service worker includes, this line:
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html")));
which throws the following error because index.html is excluded from the pre-cache list:
Uncaught (in promise) non-precached-url: createHandlerBoundToURL('index.html') was called, but that URL is not precached. Please pass in a URL that is precached instead.
- The exclusion of
index.htmlfrom the cache means the app can never be run offline. - When using additional strategies with
generateSW, (i.e. viaVitePWA({ workbox: { runtimeCaching: [ ... ] }})), the additional workbox strategies are injected into the service worker after the the above line, and so the error shown in (1) also causes any additional workbox caching behaviors to fail silently.
I hope you're able to address this issue. vite-pwa promises to be awesome, but I'm not yet able to use it in production due to this issue.
