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">

（清单文件的“奇数”名称是我正在使用的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很难保证顺序）

Answer 1

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

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

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

1 个答案: