Offline support and .data requests with React Router 7

[enure]

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?