T
TanStack13mo ago
evident-indigo

Offline first approach with PWA

Hi Guys I want to run a PWA offline first webapp with tanstack router. Did anyone has experience with it? An old project is using React Router and the Vite PWA plugin. I wonder if that would work with tanstack file based routing + lazy routes work out of the box? Any hints are more than welcome, thanks!
4 Replies
deep-jade
deep-jade13mo ago
You can use it as a PWA with a file-based routing setup. Lazy routes on its own, wouldn't work OFFLINE since lazy loading requires a network call to bring down the bundle required. You'll need to have ErrorComponent's configured to check for network access and render an error message when offline and you aren't able to load the additional bundles. We don't have a template, but it'd be taking the quickstart-file-based template and adding whatever PWA plugins you need.
evident-indigo
evident-indigoOP13mo ago
@Sean Cassiere thanks thats a great approach to follow. I will think about "un-lazy" everything what should be available to the user offline and will introduce the ErrorComponent in case for lazy routes What is a great approach to identify if a new version is uploaded to the server? I realised that users if they dont regularly hit hard reload, it would lead to 404 or 500 errors of files not found while routing. Its obviously because the hash of the files changed, but I just wonder if there is a common approach to deal with this.
deep-jade
deep-jade13mo ago
I use react-cache-buster I've got local version of it customized to what I need
evident-indigo
evident-indigoOP13mo ago
thx will check it out

Did you find this page helpful?