Does HTML prefetch cascade?

Question

Our homepage has the following in the header section:

<link rel='prefetch' href='/pages/about/'>

The about page has the following in the header section:

<link rel='prefetch' href='/pages/terms/'>

If a user goes to the homepage, will the terms page be prefetched?

In other words, does prefetch cascade?

Answer 1

Yes per draft standard but may not be working as your post is expecting; It is not prerender. Cascade both on the home page.

<link rel='prefetch' href='/pages/about/'>

<link rel='prefetch' href='/pages/terms/'>

No per the draft it does not prefect the prefect on the prefected page.

The Draft 05 October 2020 standard ... https://w3c.github.io/resource-hints/#prefetch

Is:

The prefetch link relation type is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster response once the resource is requested in the future.

and specifically shows a cascade in the example but for additional resources from that page.

The user agent SHOULD NOT apply preprocessing on the response and MUST NOT automatically execute

A prerender is also in the draft. https://w3c.github.io/resource-hints/#prerender

The user agent MAY preprocess the HTML response by also fetching the necessary subresources and executing them (i.e. prerender the page). The decision for which prerendering steps are performed is deferred to the user agent.

Prerender is currently at 73% support, with edge and chrome supporting it and firefox not yet supporting it.

https://caniuse.com/link-rel-prerender

Service Workers

If you need more control of cache Service Workers which are part of the Progressive Web Application can be used from the website, (service workers are also responsible for notificatins).

Within service workers there is an addResourcesToCache it takes an array, so you can create a manifest of what needs to be available if the connect breaks to go to the about and term pages.

addResourcesToCache([
  "/sw-test/",
  "/sw-test/index.html",
  "/sw-test/style.css",
  "/sw-test/app.js",
  "/sw-test/image-list.js",
  "/sw-test/star-wars-logo.jpg",
  "/sw-test/gallery/bountyHunters.jpg",
  "/sw-test/gallery/myLittleVader.jpg",
  "/sw-test/gallery/snowTroopers.jpg",
])