渐进式 Web 应用程序是否可以将 Web 清单嵌入到 html 页面中？

Question

我想通过如下嵌入来在我的 index.html 中提供指向清单文件的链接，但似乎不受支持。是否可以将清单描述嵌入网页中？

<link rel="manifest" href="data:application/manifest+json;base64,PCVAIFBhZ2UgQ29udGVudFR5cGU9ImFwcGxpY2F0aW9uL2pzb24iICU+DQp7DQoJIm5hbWUiOiAiU2hhcmVQb2ludCBUaXRsZSIsDQoJInNob3J0X25hbWUiOiAiU1AgVGl0bGUiLA0KCSJkZXNjcmlwdGlvbiI6ICJUaGUgb25lIGFuZCBvbmx5IFNoYXJlUG9pbnQgU2l0ZSBUaXRsZSBwcm9ncmFtISIsDQoJInN0YXJ0X3VybCI6ICJpbmRleC5odG1sIiwNCgkiaWNvbnMiOiBbDQoJCXsNCgkJCSJzcmMiOiAiYW5kcm9pZC1jaHJvbWUtMTQ0eDE0NC5wbmciLA0KCQkJInNpemVzIjogIjE0NHgxNDQiLA0KCQkJInR5cGUiOiAiaW1hZ2VcL3BuZyINCgkJfSwNCgkJew0KCQkJInNyYyI6ICJhbmRyb2lkLWNocm9tZS0xOTJ4MTkyLnBuZyIsDQoJCQkic2l6ZXMiOiAiMTkyeDE5MiIsDQoJCQkidHlwZSI6ICJpbWFnZVwvcG5nIg0KCQl9LA0KCQl7DQoJCQkic3JjIjogImFuZHJvaWQtY2hyb21lLTI1NngyNTYucG5nIiwNCgkJCSJzaXplcyI6ICIyNTZ4MjU2IiwNCgkJCSJ0eXBlIjogImltYWdlXC9wbmciDQoJCX0NCgldLA0KICAgICJiYWNrZ3JvdW5kIjogIiNmZjAwMDAiLA0KCSJ0aGVtZV9jb2xvciI6ICIjZmZmZmZmIiwNCgkiZGlzcGxheSI6ICJzdGFuZGFsb25lIg0KfQ0K">

Answer 1

您问题中的数据 URI 没有任何问题。有用。

但是，它包含无效的 JSON。

JSON 无效，因为它的开头为：

<%@ Page ContentType="application/json" %>

相反，如果您使用：

<link rel="manifest" href="data:application/manifest+json;base64,ewoKCSJuYW1lIjogIlNoYXJlUG9pbnQgVGl0bGUiLAoKCSJzaG9ydF9uYW1lIjogIlNQIFRpdGxlIiwKCgkiZGVzY3JpcHRpb24iOiAiVGhlIG9uZSBhbmQgb25seSBTaGFyZVBvaW50IFNpdGUgVGl0bGUgcHJvZ3JhbSEiLAoKCSJzdGFydF91cmwiOiAiaW5kZXguaHRtbCIsCgoJImljb25zIjogWwoKCQl7CgoJCQkic3JjIjogImFuZHJvaWQtY2hyb21lLTE0NHgxNDQucG5nIiwKCgkJCSJzaXplcyI6ICIxNDR4MTQ0IiwKCgkJCSJ0eXBlIjogImltYWdlXC9wbmciCgoJCX0sCgoJCXsKCgkJCSJzcmMiOiAiYW5kcm9pZC1jaHJvbWUtMTkyeDE5Mi5wbmciLAoKCQkJInNpemVzIjogIjE5MngxOTIiLAoKCQkJInR5cGUiOiAiaW1hZ2VcL3BuZyIKCgkJfSwKCgkJewoKCQkJInNyYyI6ICJhbmRyb2lkLWNocm9tZS0yNTZ4MjU2LnBuZyIsCgoJCQkic2l6ZXMiOiAiMjU2eDI1NiIsCgoJCQkidHlwZSI6ICJpbWFnZVwvcG5nIgoKCQl9CgoJXSwKCiAgICAiYmFja2dyb3VuZCI6ICIjZmYwMDAwIiwKCgkidGhlbWVfY29sb3IiOiAiI2ZmZmZmZiIsCgoJImRpc3BsYXkiOiAic3RhbmRhbG9uZSIKCn0=">

（与您所拥有的相同，但删除了第一个 JSON 无效行）

它会起作用的。

明文替代方案：

或者，您甚至不需要对base-64数据进行编码：

<link rel="manifest" href='data:application/manifest+json,{"name":"SharePoint Title","short_name":"SP Title","description":"The one and only SharePoint Site Title program!","start_url":"index.html","icons":[{"src":"android-chrome-144x144.png","sizes":"144x144","type":"image/png"},{"src":"android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"android-chrome-256x256.png","sizes":"256x256","type":"image/png"}],"background":"rgb(255,0,0)","theme_color":"rgb(255,255,255)","display":"standalone"}' />

Answer 2

不

清单文件必须是单独的文件。它还需要有正确的 Content-Type 标头 - application/json；字符集=utf-8

它可以被压缩。

您希望它是独立的，因为浏览器只会下载一次（当然每个版本）并使用它来指导 PWA 的呈现方式。这与 Windows 中的 Live Tile 支持多年来的工作方式非常相似。但是，使用 Live Tiles，您可以将属性内联为 META 标记值。

拥有一个单独的文件会更好，因为每次请求页面时都可以避免重复的开销。现在，最终用户只下载一次内容，而不是每次。