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

时间:2016-12-06 00:22:51

标签: progressive-web-apps

我希望在我的index.html中有一个清单文件的链接,方法是嵌入如下,但似乎不支持。是否有可能将清单描述嵌入网页?

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

2 个答案:

答案 0 :(得分: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"}' />

答案 1 :(得分:0)

清单文件必须是单独的文件。它还需要具有适当的Content-Type头 - application / json;字符集= UTF-8

它可以被gzip压缩。

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

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