动态图标PWA清单

Question

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

例如：

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

对于URL 1，在浏览器上安装时应该获得不同的图标，而URL 2也应如此。我不知道如何让它起作用，也不确定这是否可行。

- Sam van beastlo

---

这两个URL有什么区别？它们完全相同。 - Jose Cherian

改变它们，以便更清楚地表达我的意思 - Sam van beastlo

可能是如何使用meta标签在manifest.json文件中添加Urls和web_Urls的重复问题。 - Jeff Posnick

Answer 1

Jeff的链接会指导你正确的方向。你的问题让我很好奇，所以我写了一篇博客文章，介绍了使用Express.js实现特定实现方式。

基本上，你可以动态地服务于manifest.json文件。以下是它的要点。你可以从referrer header中获取组织名称。

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"
}

Express路由

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

- Jose Cherian

---

你能给我展示一个完整的工作示例吗？我使用Vue创建了一个应用程序，使用了这个模板https://github.com/vuetifyjs/pwa。当我运行npm run build时，它会自动在dist文件夹中生成清单文件。 - M Usman Nadeem

@MUsmanNadeem，源代码可在链接的博客文章中获得。 - Jose Cherian