javascript - Web App Manifest是否包含订单问题？

我正在尝试将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请求/响应，然后在“开发工具”>“应用程序”>“清单”中会正确显示所有内容。（到目前为止，一切都很好）。
*如果我然后刷新此标签，则看不到清单的请求，并且“应用程序”>“清单”部分为空白。 HTML源代码完全没有改变。
*不管我刷新多少次似乎都无济于事（还清除缓存等）

2）当我将<link rel="manifest"移到<head>中的所有CSS / JS上方时，它似乎一致且正确地加载。刷新页面，显示清单的HTTP请求，然后“应用程序”>“清单”显示正确的信息。

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

我希望有一种方法可以加载此文件，而不管<head>在<link rel="manifest"..的什么位置（因为CMS很难保证顺序）

最佳答案

不，从页面的<link rel="manifest">解析和解释的角度来看，<head>的相对位置没有任何区别。

除了包含JavaScript和CSS的HTML中的语法错误（导致随后的<link rel="manifest">解析错误）之外，我很难解释您所看到的行为。但总的来说，职位并不重要。

关于javascript - Web App Manifest是否包含订单问题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51776989/