构建PWA时manifest.json在Chrome出现JSON语法错误的排查与解决

最近我在做一个渐进式Web应用（PWA），部署地址是https://121eddie.github.io。这个应用主要包含两块关键内容：

• 负责应用安装和权限请求的manifest.json文件
• 实现离线缓存的Service Worker（已经成功安装，但暂时还没法响应离线请求）

下面是已经通过验证的manifest.json代码：

{ "name": "Determiner ma position et la partager", "short_name": "PositionWeb", "start_url": "/index.html", "homepage_url":"https://121eddie.github.io/", "display": "standalone", "description": "Une application Web Progressive qui permet de connaitre sa position et de la telecharger ou partager, meme en mode offline", "lang": "fr-FR", "scope": "/", "background_color": "lightyellow", "theme_color": "lightgreen", "permissions": [ "geolocation", "fileSystem", "fileSystem.write", "notifications" ], "icons": [{"src": "icon200.png","sizes": "200x200","type": "image/png"}, {"src": "icon512.png","sizes": "512x512","type": "image/png"} ] }

我在index.html里用这段代码加载它：

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

但在Google Chrome浏览器里一直弹出这个错误：

SytaxError: unexpected token in JSON on position 0

我当时完全摸不着头脑，不知道问题出在哪？

后续优化尝试 #

我先做了几个优化调整：

• 给应用添加了指定尺寸的图标
• 将manifest.json的文件编码从ANSI改成了UTF-8
• 补充添加了favicon.ico文件

最终解决方案 #

折腾了半天，才发现罪魁祸首是Notepad的自动格式设置——它会悄悄在JSON文件的第一个大括号前面添加空格，导致JSON解析器在读取到第一个字符（空格）时直接抛出语法错误。阻止Notepad的这个自动添加行为后，问题就彻底解决了！

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