渐进式Web应用（PWA）manifest.json失效，Chrome报意外令牌错误求助

看起来你遇到的这个第1行第1列的意外令牌错误，大概率不是JSON语法本身的问题，而是文件加载环节出了问题，结合你的配置和目录情况，我给你几个排查方向：

1. 优先检查路径匹配问题 #

你在HTML里用的是绝对路径 /manifest.json，这个路径是相对于服务器根目录的，而不是你的项目根目录。如果你的服务器没有把你的项目文件夹设为根目录，这个路径就会找不到文件，服务器可能返回404页面（HTML内容），Chrome尝试把HTML解析成JSON自然就会报“意外令牌”错误。

建议先改成相对路径试试：

<link rel="manifest" href="./manifest.json">

如果你的manifest.json和index.html在同一级目录，这个相对路径是完全正确的，能避免服务器根目录配置不一致的问题。

2. 检查manifest.json的文件编码 #

有时候文件如果是UTF-8带BOM格式，开头的隐藏BOM字符会被Chrome当成无效的JSON令牌，导致第1行报错。你可以用文本编辑器（比如VS Code）打开文件，点击右下角的编码选项，选择「通过编码保存」，然后选「UTF-8」（不要选UTF-8 with BOM）。

3. 用Network面板验证请求结果 #

打开Chrome开发者工具的「Network」面板，刷新页面，找到manifest.json的请求：

• 看请求状态是不是200 OK，如果是404，说明路径肯定错了，根据你的目录结构调整href；
• 切换到「Response」标签，确认返回的内容是你写的JSON代码，如果是HTML页面（比如404错误页），那就是服务器没正确返回manifest文件，得调整路径或者服务器配置。

4. 再次确认JSON语法（虽然你说有效，但再检查一遍） #

把你的manifest内容复制到JSON校验工具里，确认没有隐形的语法问题，比如全角空格、遗漏逗号、引号不匹配等。你当前给出的JSON内容看起来是有效的，但以防万一还是校验下更稳妥。

按照这几个步骤排查，应该能解决这个问题~

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