correct-apricot

Making Tanstack Start work offline

Hello, I've had some success with getting Tanstack Start to work offline in my Progressive Web App. All routes that have been visited are cached for some time. However, I want to make all paths static and cache them on the first visit. Is this possible? I'm also trying to move from a Progressive Web App to Tauri. Has anyone created a Tauri app with Tanstack Start yet?

15 Replies

metropolitan-bronze•5mo ago

However, I want to make all paths static and cache them on the first visit.

what does this mean here?

correct-apricotOP•5mo ago

I mean I only use client-side rendering and use IndexedDB with Dexie. Now all the components need to become available offline.

metropolitan-bronze•5mo ago

after the initial SSR request all subsequent navigations happen on the client

correct-apricotOP•5mo ago

yes after the initial request I see it making requests for additional js files. All going to routes such as: build/assets/index-hR4u2Hb.js I want these to be available for the client after the first page load.

metropolitan-bronze•5mo ago

ah i see these are the code split route files you can manually load them by iterating over router.routesById and calling router.loadRouteChunk(route) for each of them

correct-apricotOP•5mo ago

Thanks I'll try it out

metropolitan-bronze•5mo ago

also cc @Akhmadshin

correct-apricotOP•5mo ago

import { useEffect } from "react";
import { useRouter } from "@tanstack/react-router";

export function OfflineRouter() {
    const router = useRouter();

    useEffect(() => {
        for (const route of Object.values(router.routesById)) {
            router.loadRouteChunk(route.path);
        }
    }, [router]);

    return null;
}

import { useEffect } from "react";
import { useRouter } from "@tanstack/react-router";

export function OfflineRouter() {
    const router = useRouter();

    useEffect(() => {
        for (const route of Object.values(router.routesById)) {
            router.loadRouteChunk(route.path);
        }
    }, [router]);

    return null;
}

This is giving me an error

react-dom_client.js?v=4c9974e4:5613 HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

react-dom_client.js?v=4c9974e4:5613 HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

metropolitan-bronze•5mo ago

can you provide a reproducer? probably can be reproduced in router alone just guessing but probably you need to only load one route chunk at a time

 for (const route of Object.values(router.routesById)) {
            await router.loadRouteChunk(route.path);
        }

 for (const route of Object.values(router.routesById)) {
            await router.loadRouteChunk(route.path);
        }

exotic-emerald•5mo ago

you need to pass route inside loadRouteChunk, not route.path

Promise.all(Object.values(router.routesById).map((route) => router.loadRouteChunk(route))).catch((err) => {
  throw err
});

Promise.all(Object.values(router.routesById).map((route) => router.loadRouteChunk(route))).catch((err) => {
  throw err
});

@RadiantFrog Is there any insights you can share about saving js chunk into indexedDB storage? I wanna do it for some vite project (I'll save singular js chunk)

stormy-gold•5mo ago

It would be wonderful if we have some repo for having a PWA set up with tanstack start. I know moving away from vinxi will help in the future, however it would be nice to have a working example meanwhile

foreign-sapphire•5mo ago

I use https://serwist.pages.dev/ with tanstack router (not start..) and cache all files via service worker (precacheEntries)

Home - Serwist

A Swiss Army knife for service workers.

correct-apricotOP•3mo ago

can you give me an example of how this looks like for you @dohomi ?

foreign-sapphire•3mo ago

its identical setup like vite-plugin-pwa just using the vite plugin from serwist similar to this setup https://github.com/serwist/serwist/tree/main/examples/vite-react-basic

GitHub

serwist/examples/vite-react-basic at main · serwist/serwist

A Swiss Army knife for service workers. Contribute to serwist/serwist development by creating an account on GitHub.

foreign-sapphire•3mo ago

I havent tried it yet with start because I think the SPA mode is not yet fully ready

Gaming

Programming

Making Tanstack Start work offline

Did you find this page helpful?