/manifest.webmanifest not cached by browser and reloaded on every page transition

[cbratschi]

Link to the code that reproduces this issue

https://github.com/cbratschi/nextjs-issues/tree/manifest

To Reproduce

1. npm run dev
2. navigate between pages
3. manifest.webmanifest is loaded on every page

Current vs. Expected behavior

Ideally a hash would be added to the manifest URL (current first):

<link rel="manifest" href="/manifest.webmanifest">
<link rel="manifest" href="/manifest.webmanifest?hash">

This allows using immutable versions of the manifest.

In addition the cache-control value should be modified (current first):

public, max-age=0, must-revalidate
public, max-age=31536000, immutable

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:37 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6031
  Available memory (MB): 65536
  Available CPU cores: 16
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.2.2 // Latest available version is detected (14.2.2).
  eslint-config-next: 14.2.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

I tried to set cache-control in next.config.js to get at least a max-age of one hour but ended with two cache-control headers being returned:

    async headers() {
        return [{
            //cache the manifest file (default: public, max-age=0, must-revalidate)
            //FIXME output contains now two header (ours is the first one)
            headers: [{
                key: 'cache-control',
                value: 'public, max-age=3600'
            }],

            source: '/manifest.webmanifest'
        }];

[mkxml]

Yeah, I can reproduce this exact problem. Is there any workaround for this?

[janpaepke]

I ran into this as well. Similar to @cbratschi I tried forcing it via middleware:

if (pathname.startsWith('/manifest')) {
	const response = NextResponse.next();
	response.headers.set('Cache-Control', `public, max-age=315360000, immutable`);
	return response;
}

This also resulted in duplicated cache control headers:

[joriregter]

Also having this issue. This does not solely apply to manifest routes, all metadata routes are affected. Sitemap and robots display the same bugs.