vercel / vercel/next.js

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

Open
#64,864 10 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Metadata
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

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'
        }];

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction and the manifest.webmanifest response during npm run dev, then inspect the next.config.js headers configuration. Compare manifest requests across page transitions and the cache-control headers from next build and next start. Done means the manifest URL supports immutable versioning and is served with the intended cache policy without duplicate headers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.