manifest.json直接在HTML代码中(没有文件)

时间:2016-10-26 11:54:52

标签: json google-chrome web-applications manifest manifest.json

包括manifest.json的标准方式:

<link rel="manifest" href="manifest.json">

有没有办法直接在manifest文档中包含manifest.json的内容?

(原因是为了避免HTTP请求,并根据我的html模板中直接提供的标签自动生成文件)

更确切地说,这是一个非工作的例子,我想要做的只是为了这个想法:

<link rel="manifest" content="{"name": "Web Starter Kit", "other options": "directly here"}">

2 个答案:

答案 0 :(得分:0)

首先,不要使用相同的引号。 HTML认为它是

content=
"{"
name
": "
Web Starter Kit
", "
other options
": "
directly here
"}"

Plus链接不能包含内容属性,因此请使用<script type="application/json">

接下来,要使用点表示法,您应该排除空格,因为manifest.other options可能会混淆程序。

现在阅读JSON使用

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON

以下是您想要的工作示例。

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

是的,您可以将<script>用于javascript并且还有全局变量(变量不在函数中)

答案 1 :(得分:0)

如何使用标准 JavaScript 内联动态生成的 manifest.json 文档

我在 html 标头中包含了如下链接 rel,但没有有效的 href 属性:

link rel="manifest" id="my-manifest-placeholder"

(另请参阅“如何使用 Javascript 动态设置您的 Web 应用程序清单”https://medium.com/@alshakero/how-to-setup-your-web-app-manifest-dynamically-using-javascript-f7fbee899a61,不幸的是它对我不起作用!)

(或“Inline Web App Manifest”,Inline the Web App Manifest? 对我的解决方案很有启发)

后来,我运行了以下 javascript:

thisHostUrl = "http://localhost/";

// json manifest,转义为字符串

var myManifest  = '{\"short_name\": \"ungravel\",\"name\": \"Ungravel:%20Cofounder%20GroupWallet\",\"icons\": [{\"src\": \"' + thisHostUrl + 'icon192x192.png\",\"type\": \"image\/png\",\"sizes\": \"192x192\",\"purpose\": \"any%20maskable\"},{\"src\": \"' + thisHostUrl + 'icon512x512.png\",\"type\": \"image\/png\",\"sizes\": \"512x512\",\"purpose\": \"any%20maskable\"}],\"start_url\": \"' + thisHostUrl + '\",\"background_color\": \"rgb(225,230,233)\",\"display_override\": [\"window-control-overlay\", \"standalone\"],\"display\": \"fullscreen\",\"orientation\": \"landscape-primary\",\"scope\": \"' + thisHostUrl + '\",\"theme_color\": \"rgb(179,231,253)\",\"shortcuts\": [{\"name\": \"Ungravel:%20Cofounder%20GroupWallet\",\"short_name\": \"ungravel\",\"description\": \"Create%20co-founder%20group%20with%20shares%20and%20GroupWallet\",\"url\": \"' + thisHostUrl + '\",\"icons\": [{ \"src\": \"' + thisHostUrl + 'icon64x64.png\", \"sizes\": \"64x64\", \"type\": \"image\/png\" }, { \"src\": \"' + thisHostUrl + 'icon192x192.png\", \"sizes\": \"192x192\", \"type\": \"image\/png\"}]}],\"description\": \"Co-found%20a%20distributed%20group%20on%20ethereum%20blockchain,%20based%20on%20ERC20-compatible%20GroupToken%20shares%20and%20NameRegistry%20NFTs%20(ENS)\",\"screenshots\": [{\"src\": \"' + thisHostUrl + 'screenshot1.jpg\",\"type\": \"image\/jpg\",\"sizes\": \"842x790\"},{\"src\": \"' + thisHostUrl + 'screenshot2.jpg\",\"type\": \"image\/jpg\",\"sizes\": \"1144x630\"}]}';


const stringManifest = 'data:application/manifest+json,'+myManifest;

document.querySelector('#my-manifest-placeholder').setAttribute('href', stringManifest);    

不要忘记转义空格和特殊字符,例如 / 和 ""。 https://www.tutorialspoint.com/json_simple/json_simple_escape_characters.htm

注意 background 和 themeColors 的颜色代码:rgb(179,231,253) 请勿使用十六进制颜色或转义 #-special 字符。

我尝试过 URL.createObjectURL(xxxxx),但动态 href 很满意:

data:application/manifest+json + 动态生成的清单,在我的例子中是 myManifest

Google 版本 91.0.4472.77 (Offizieller Build) (x86_64) 从我的源加载清单,无需任何额外的网络访问,从而节省了我的单页 PWA 的网络请求。有点难看,但很管用。

由于清单格式尚未最终确定并且仍在开发中,我认为属性可能会发生变化,并且此解决方案可能无法在其他 Google Chrome 浏览器中使用。