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

Question

我正在尝试将 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">

（清单文件的 "odd" 名称是我正在使用的 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 includes ABOVE 我的 <link rel="manifest" .. 事情就乱套了。 * 如果我复制页面的 URL，将其粘贴到新的 chrome 选项卡（刷新现有选项卡不会剪切它），然后打开新选项卡的 Chrome Dev Tools ，我可以看到清单的 HTTP request/response，并且在 Dev Tools > Application > Manifest 中似乎可以正确显示所有内容。（到目前为止，一切都很好）。 * 如果我随后刷新此选项卡，我看不到对清单的请求并且“应用程序”>“清单”部分为空白。 HTML 来源完全没有改变。 * 无论我刷新多少次似乎都没有帮助（还有清除缓存等）

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

我一直在搜索文档 (Google, MDN) 以查看是否必须在任何其他包含之前包含清单，但我找不到任何这样说的内容 - 奇怪的是第一次加载选项卡，即使包含在 CSS/JS.

之后，它似乎也能正常工作

我希望有一种方法可以加载它，而不管 <head> <link rel="manifest".. 恰好在哪个位置（因为 CMS 很难保证顺序）

Answer 1

不，<link rel="manifest"> 在您页面 <head> 中的相对位置从它的解析和解释方式来看没有什么不同。

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

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

Does the Web App Manifest include order matter?

javascript

manifest

service-worker

progressive-web-apps

web-app-manifest