PWA Manifest未被检测到的问题排查与解决

问题场景 #

我正在构建一个PWA，已经把manifest.json放在项目根目录，内容如下：

{ 
  "name": "MiniSysteme", 
  "short_name": "MiniSys", 
  "start_url": "/index.php", 
  "display": "standalone", 
  "background_color": "#FFE9D2", 
  "theme_color": "#FFE1C4", 
  "orientation": "portrait-primary", 
  "icons": [ 
    { "src": "/img/icons/icon-72x72.png", "type": "image/png", "sizes": "72x72" }, 
    { "src": "/img/icons/icon-96x96.png", "type": "image/png", "sizes": "96x96" } 
  ]
}

项目采用MVC结构，index.php通过require("view/viewHeader.php")引入头部文件，我在头部的<head>里添加了：

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

但浏览器始终检测不到这个manifest文件，想问问这种MVC的文件引入结构会不会影响manifest的获取？

排查与解决方案 #

经过检查，问题并不是MVC的引入结构导致的，而是<link>标签里link和rel之间存在不可见字符——这个隐藏字符破坏了<head>标签的结构，导致浏览器提前解析开启了<body>标签，进而忽略了后续的manifest链接。

修复这个不可见字符后，浏览器就能正常检测到manifest.json文件了。

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