Offline support and .data requests with React Router 7

[ch-stuart]

Hi all,

I'm looking to support offline in my React Router 7 framework mode app. I have a service worker setup with Workbox. I looked at Vite PWA, but it seemed like using Workbox directly was the best option.

I disabled lazy route discovery in react router config to avoid /__manifest requests during navigation:

routeDiscovery: { mode: "initial" },

I have the app shell cached with the workbox config:

export default {
  additionalManifestEntries: [
    { revision: null, url: '/offline' },
  ],
  globDirectory: 'build/client',
  globIgnores: ['**/*.map'],
  globPatterns: [
    'assets/**/*.{js,css}',

    'manifest.json',
    '*.{ico,png,svg,webp}',
  ],
  swDest: 'service-workers/build/app-service-worker.ts',
  swSrc: 'service-workers/app-service-worker.ts',
};

Then in the service worker:

precacheAndRoute(self.__WB_MANIFEST);

That appears to cache all of the clientside JS and CSS so that the only major remaining responses to cache are the .data responses from route loader functions.

The issue I'm having is that the .data requests, which are from <Link /> components, nearly always (always?) include a ?_routes= search param which is a comma separated list of routes.

I'm unsure what the best way is to cache these .data requests ahead of time. Currently, I'm using Workbox's NetworkFirst strategy to cache .data requests. In order to cache them as quickly as possible I'm using the <Link /> component with prefetch="render" which renders prefetch links in the header with the appropriate .data links with ?_routes=.

<link
    rel="prefetch"
    as="fetch"
    href="/app/accounts/1/bar/2.data?_routes=root%2Croutes%2Fapp.accounts.%24accountId_.bars.%barId%2Croutes">

I don't mind this approach, but it does require that in order to cache a view for offline it needs to have a corresponding <Link /> rendered in the document.

Is there a way to cache these responses without needing a <Link /> with a prefetch attribute?

[mdingena]

I have the exact same setup as you, and I'm also running into the same question now, where seemingly all that remains is overcoming the .data requests. Can you tell me if you ever found a way to deal with this?

[sergiodxa]

You can use <PrefetchPageLinks page="/absolute/path" /> to render the <link rel="prefetch"> tags that Link renders along the <a> when using prefetch="render".

If your routes don't have client loaders, you could also prefetch /absolute/path.data without any search params, the main issue would be if you have client loaders as that cause the need to include _routes search param to the URL