多商户子域名PWA动态生成manifest.webmanifest可行性问询

问题背景 #

我正在开发一款服务于多商户的PWA应用，每个商户拥有独立子域名，已配置DNS通配符使所有子域名指向同一应用，可从URL提取对应商户信息。想咨询能否在页面首次加载时通过变量或动态生成manifest.webmanifest，使其内容匹配对应商户？

示例场景 #

商户子域名：acoolbusiness.myapp.com

对应的manifest.webmanifest内容：

{  
  "name": "A Cool Business",  
  "short_name": "A Cool Busi..",  
  "display": "fullscreen",  
  "orientation": "landscape",  
  "start_url": "./",  
  "scope": "/",  
  "lang": "fr",  
  "description": "my app description",  
  "icons": [  
    {  
      "src": "/assets/acoolbusiness-192x192.png",  
      "sizes": "192x192",  
      "type": "image/png"  
    },  
    {  
      "src": "/assets/acoolbusiness-256x256.png",  
      "sizes": "256x256",  
      "type": "image/png"  
    }  
  ]
}

商户子域名：anothershop.myapp.com

对应的manifest.webmanifest内容：

{  
  "name": "Another Shop",  
  "short_name": "Another Shop",  
  "display": "fullscreen",  
  "orientation": "landscape",  
  "start_url": "./",  
  "scope": "/",  
  "lang": "fr",  
  "description": "my app description",  
  "icons": [  
    {  
      "src": "/assets/anothershop-192x192.png",  
      "sizes": "192x192",  
      "type": "image/png"  
    },  
    {  
      "src": "/assets/anothershop-256x256.png",  
      "sizes": "256x256",  
      "type": "image/png"  
    }  
  ]
}

解决方案 #

完全可以实现动态生成匹配商户的manifest.webmanifest，以下是两种可行方案，优先推荐后端驱动的方式：

1. 后端接口动态生成（推荐） #

• 解析商户标识：后端从请求的Host头中提取子域名（如acoolbusiness），匹配预先存储的商户配置（名称、图标路径等）。
• 构造并返回manifest：生成符合Web App Manifest规范的JSON结构，设置响应头Content-Type: application/manifest+json后返回给浏览器。
• 修改页面引用：将HTML中原本指向静态文件的manifest链接，改为指向该后端接口：

<link rel="manifest" href="/api/dynamic-manifest">

关键注意事项

• 子域名解析准确性：确保后端能正确处理各种子域名格式，避免因特殊字符或多段子域名导致匹配错误。
• 缓存策略：为接口配置合理的缓存规则（如ETag或基于商户配置更新时间的Cache-Control），平衡性能与配置更新的及时性。
• 规范兼容性：生成的manifest必须包含name、start_url、icons等必填字段，且格式符合规范，否则浏览器无法识别为有效PWA配置。

2. 前端动态生成（兼容性受限） #

若无法依赖后端，可通过JavaScript在页面加载时动态创建manifest：

// 解析当前子域名
const subdomain = window.location.hostname.split('.')[0];

// 构造商户专属manifest内容
const manifestData = {
  name: getMerchantFullName(subdomain), // 需自定义函数从商户配置中获取名称
  short_name: getMerchantShortName(subdomain),
  display: 'fullscreen',
  orientation: 'landscape',
  start_url: './',
  scope: '/',
  lang: 'fr',
  description: 'my app description',
  icons: [
    { src: `/assets/${subdomain}-192x192.png`, sizes: '192x192', type: 'image/png' },
    { src: `/assets/${subdomain}-256x256.png`, sizes: '256x256', type: 'image/png' }
  ]
};

// 生成Blob对象并创建URL
const manifestBlob = new Blob([JSON.stringify(manifestData)], { type: 'application/manifest+json' });
const manifestUrl = URL.createObjectURL(manifestBlob);

// 将manifest链接添加到页面头部
const linkElement = document.createElement('link');
linkElement.rel = 'manifest';
linkElement.href = manifestUrl;
document.head.appendChild(linkElement);

提示：这种方式存在兼容性问题，部分浏览器（尤其是移动端）可能不会识别动态添加的manifest，仅作为后端方案的备选。

内容的提问来源于stack exchange，提问作者Nicolas