#Making Tanstack Start work offline

20 messages · Page 1 of 1 (latest)

languid bison
#

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?

dire acorn
#

However, I want to make all paths static and cache them on the first visit.
what does this mean here?

languid bison
#

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

dire acorn
#

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

languid bison
#

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.

dire acorn
#

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

languid bison
#

Thanks I'll try it out

dire acorn
#

also cc @west shale

languid bison
# 
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.
dire acorn
#

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);
        }
west shale
#

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
});
west shale
#

@languid bison 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)

fiery zenith
#

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

shy oyster
languid bison
#

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

shy oyster