Next.js14项目中Chrome无法获取manifest.json问题求助

1. 确认 manifest 的引入方式（Next.js 专属） #

在 Next.js 14 的 App Router 架构下，必须在根布局（app/layout.tsx）的 <head> 区域正确引入 manifest，路径要指向 public 目录下的文件：

import Head from 'next/head';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <Head>
        <link rel="manifest" href="/manifest.json" />
        {/* 补充苹果端图标，避免 Chrome 因资源不全忽略 manifest */}
        <link rel="apple-touch-icon" href="/icon-192x192.png" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

注意：manifest 文件必须放在项目根目录的 public 文件夹下，不能放在 app 或 src 内，否则会被 Next.js 路由系统拦截。

2. 修正 manifest 语法（Chrome 校验更严格） #

Chrome 对 manifest 的语法兼容性要求比 Firefox 高，必须确保：

• 包含 name、short_name、start_url、display 四个必填字段，start_url 必须是绝对路径（如 / 或 /dashboard）
• 图标尺寸至少包含 192x192 和 512x512 两种，路径指向正确
• 不能有 trailing comma（末尾逗号），Firefox 可兼容但 Chrome 会直接解析失败
  示例合格片段：

{
  "name": "我的 Next.js 应用",
  "short_name": "Next应用",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. 调整 Service Worker 注册逻辑 #

自定义 SW 时，Next.js 14 要求在客户端组件内注册，避免在服务端渲染阶段执行：

'use client';

import { useEffect } from 'react';

export default function SWRegistration() {
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', async () => {
        try {
          await navigator.serviceWorker.register('/sw.js');
        } catch (err) {
          console.error('SW 注册失败:', err);
        }
      });
    }
  }, []);
  return null;
}

将这个组件引入根布局即可，同时要保证 SW 的 scope 与 manifest 的 start_url 匹配。

4. 清除 Chrome 站点缓存 #

Chrome 会缓存旧的 manifest 或 SW 数据，导致新配置不生效：

• 打开 DevTools → 「应用程序」标签 → 「存储」→ 点击「清除站点数据」
• 重启 Chrome 后重新访问站点，再检查「应用程序」标签下的 manifest 是否显示

5. 验证 manifest 的响应头 #

Chrome 要求 manifest 文件的 Content-Type 必须是 application/manifest+json，可以在 DevTools 的「网络」标签中，请求 /manifest.json，查看响应头是否符合要求。如果有自定义中间件或服务器配置，不要修改这个响应头。

内容的提问来源于stack exchange，提问作者Nishant Majumdar