Web App Manifest 是否包含订单事项？答案

【问题标题】：Does the Web App Manifest include order matter?Web App Manifest 是否包含订单事项？
【发布时间】：2018-08-09 23:22:23
【问题描述】：

我正在尝试将 PWA 功能添加到一个简单的网站，但我在 Chrome 版本 68.0.3440.106 中遇到了奇怪的问题。

我在http://localhost:4502 上运行我的测试，在CMS 的上下文中（所以我在一些限制内工作）。另外，请注意，我删除了所有 PWA/Service Worker 代码，因此没有缓存在起作用。

在<head> .. 我通过以下方式包含清单：

<link rel="manifest" href="/content/foo/bar.pwa.manifest.webmanifest" type="application/manifest+json">

（清单文件的“奇数”名称是我正在使用的 CMS 的约束；我还使用了“json”扩展名，效果与下文所述相同）。

其中包含...

{"name":"Sample",
"short_name":"sample",
"theme_color":"#001F3F",
"background_color":"#FF4136",
"display":"standalone",
"scope":".",
"start_url":"/content/foo/bar.html",
"icons":[{"src":"/content/assets/sample.jpg","size":"192x192","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"512x512","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"144x144","type":"image/jpeg"}]}

我观察到以下情况：当我的 JS/CSS 包含在我的<link rel="manifest" .. 之上时，事情就会变得混乱。 * 如果我复制页面的 URL，将其粘贴到新的 chrome 选项卡中（刷新现有选项卡不会剪切它），然后为该新选项卡打开 Chrome 开发工具，我可以看到清单的 HTTP 请求/响应，并且在 Dev Tools > Application > Manifest 中似乎可以正确显示所有内容。（到目前为止，一切都很好）。 * 如果我随后刷新此选项卡，我看不到清单请求，并且应用程序 > 清单部分为空白。 HTML 源代码根本没有改变。 * 无论我刷新多少次它似乎都没有帮助（还清除缓存等）

2) 当我将<link rel="manifest" 移动到<head> 中的任何CSS/JS 之上时，它似乎始终正确地加载。刷新显示清单的 HTTP 请求页面，应用程序 > 清单显示正确的信息。

我一直在搜索文档（Google、MDN）以查看清单是否必须在任何其他包含之前包含，但我找不到任何说明 - 奇怪的是在第一次加载选项卡时，即使在 CSS/JS 之后包含它似乎也可以工作。

我希望无论<head> 和<link rel="manifest".. 碰巧在哪里（因为CMS 很难保证订单），我都希望有一种方法可以加载它

【问题讨论】：

标签： javascript manifest service-worker progressive-web-apps web-app-manifest

【解决方案1】：

不，<link rel="manifest"> 在您页面的 <head> 中的相对位置从解析和解释的角度来看并没有影响。

我很难解释您所看到的行为，除了可能包含您的 JavaScript 和 CSS 的 HTML 中的语法错误，导致随后的 <link rel="manifest"> 被错误地解析。但总的来说，位置应该无关紧要。

【讨论】：