如何解决是否可以动态更改 manifest.json 文件
我正在研究 React PWA,我想知道是否可以将图标 URL 动态添加到 manifest.json
文件。所以我的目标是在用户登录之前显示通用应用程序图标。之后,我从远程 API 请求一个新图标并将其设置为清单文件,以便更改仪表板上的图标和移动图标.
理想情况下,我希望在没有任何后端更改的情况下实现这一点
解决方法
在 HTML 中有一个带有 rel="manifest"
但没有 href 属性的链接标签。稍后使用此标签来填充您的清单。如:
您的文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="manifest" id="my-manifest-placeholder">
</head>
<body>
<!-- page content -->
</body>
</html>
现在在 Javascript 中你有两个选择:
-
现在在 Javascript 中你有两个选择: 使用 URL 设置 href 属性:
document.querySelector('#my-manifest-placeholder').setAttribute('href','/my-dynamic-manifest-url.json');
-
使用 JSON 对象设置清单
var myDynamicManifest = {
"name": "Your Great Site","short_name": "Site","description": "Something dynamic","start_url": "<your-url>","background_color": "#000000","theme_color": "#0f4a73","icons": [{
"src": "whatever.png","sizes": "256x256","type": "image/png"
}]
}
const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest],{type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('#my-manifest-placeholder').setAttribute('href',manifestURL);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。