angular5 - 动态图标 PWA 清单
问题描述
我正在使用 angular5 制作白标 PWA。我想知道是否可以根据来自 URL 的信息动态更改清单文件中的 png 图标。我想为每个独特的组织使用不同的图标。
喜欢:
- www.mywebsite.com/organisation1
- www.mywebsite.com/organisation2
当安装在浏览器上时,URL 1 应该得到一个不同的图标,然后是 URL2。我不知道如何使这项工作以及是否有可能。
解决方案
Jeff 的链接将引导您朝着正确的方向前进。你的问题让我很好奇,我写了一篇关于使用 Express.js 的具体实现的博客文章。
基本上,您可以动态地提供 manifest.json。这是它的精髓。您可以从引荐来源标题中获取组织名称。
清单.hbs
{
"name": "{{orgName}} App",
"short_name": "{{orgName}}",
"icons": [{
"src": "/images/icons/{{orgName}}/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
}],
"start_url": "/{{orgName}}",
"display": "standalone"
}
快线
app.get ('/manifest.json', (req, res) => {
// You can dynamically generate your manifest here
// You can pull the data from database and send it back
// I will use a template for simplicity
//Use some logic to extract organization name from referer
var matches = /\/([a-z]+)\/?$/i.exec (req.headers.referer);
if (matches && matches.length > 1) {
var orgName = matches[1];
} else {
var orgName = 'ORGA'; //Default
}
// Need to set content type, default is text/html
res.set ('Content-Type', 'application/json');
res.render ('manifest.hbs', {orgName});
});
推荐阅读
- r - glmulti 函数(来自 gmulti 包)是否需要 set.seed 值?
- c - 编写库时使用 OpenMP
- java - 将两个 int 作为字符串返回
- javascript - 游戏循环中一个元素上的两个 jQuery 动画
- reactjs - 如何在 react.js 的新选项卡中打开组件?
- jsp - JSP 未在 Spring Boot 中呈现
- compression - 压缩大的、几乎相同的文件
- http2 - 为什么在 light-4j 中同时启用 https/http2 时端口 8080 停止工作
- java - 使用 Zenmuse XT2 将相机模式更改为视频失败并显示错误:不支持
- vuejs2 - VueJS试图在父组件处理输入之前捕获子组件上的输入