Question

我正在使用angular5制作白标PWA。我想知道是否可以从URL动态更改清单文件中的png图标。我希望每个独特的组织都有一个不同的图标。

像：

www.mywebsite.com/organisation1
www.mywebsite.com/organisation2

当在浏览器上安装URL2时，URL 1应该获得不同的图标。我不清楚如何使这项工作，甚至可能。

Answer 1

杰夫的链接将引导您朝着正确的方向前进。你的问题让我好奇，我用Express.js写了一篇关于具体实现的https://allegro.pl/listing?string=windows&where=%2Flisting&order=m&bmatch=ss-base-relevance-floki-5-nga-hcp-wp-eng-ele-1-4-0501。

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

<强> manifest.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});
});

blog post

动态图标PWA清单

1 个答案: