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

问题描述

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

喜欢:

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

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

解决方案

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

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.

like:

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

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'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.

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

express route

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屋！