动态图标PWA清单 [英] Dynamic icon PWA manifest

问题描述

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

I am making a white label PWA using angular5. I am wondering if it is possible to dynamically change the png icon in the manifest file on info from the URL. I want a different icon for each unique organization.

喜欢:

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

在浏览器中安装URL 1时，应该获得与URL2不同的图标. 我不知道如何进行这项工作，甚至不可能.

URL 1 should get a different icon when installed on the browser then URL2. I do not have a clue on how to make this work and if it is even possible.

推荐答案

Jeff的链接将指导您正确的方向.您的问题使我感到好奇，我写了博客文章关于使用Express.js的特定实现.

Jeff's link will guide you in the right direction. Your question made me curious and I wrote a blog post on the specific implementation using Express.js.

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

Basically, you can serve the manifest.json dynamically.Here is the essence of it. You can grab the organization name from the 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"
}

快速路线

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

这篇关于动态图标PWA清单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！