动态图标 PWA 清单

Question

我正在使用 angular5 制作白标 PWA。我想知道是否可以根据 URL 中的信息动态更改清单文件中的 png 图标。我想为每个独特的组织使用不同的图标。

喜欢：

1. www.mywebsite.com/organisation1
2. www.mywebsite.com/organisation2

URL 1 安装在浏览器上时应该得到一个不同的图标，然后是 URL2。我不知道如何使这项工作以及是否可能。

Answer 1

Jeff 的链接将引导您朝着正确的方向前进。你的问题让我很好奇，我写了一篇关于使用 Express.js 的具体实现的博客文章。

基本上，你可以动态地为 manifest.json 提供服务。这里是它的本质。您可以从引荐来源标头中获取组织名称。

清单文件

{
    "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});
});