manifest.webmanifest 变量名称和图像

Question

我正在开发一个供多个企业使用的 PWA 应用程序。每个业务都有自己的子域，我想知道是否可以使用变量或在第一次加载页面时生成manifest.webmanifest，以便其中的数据与这些业务匹配？ 知道我正在使用 DNS 通配符，因此所有子域都指向同一个应用程序，并且从 URL 中提取正确的业务。

示例：

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

Answer 1

我找到了使用谷歌云功能的方法。

在我的index.html中

<link rel="manifest" href="https://mygooglecloudfunction.run.app/">

并使用谷歌云功能：

export const httpsManifest: HttpsFunction = onRequest(async (req: Request, res): Promise<void> => {
  try{
    // get subdomain if exist //
    let subdomain: null | string = null;
    const callingUrl: string | undefined = req.headers.origin;

    if(!callingUrl){ throw new Error("req.headers.origin is undefined");}

    const urlElem: string[] = callingUrl.split('.');
    if(urlElem.length >= 3){
      subdomain = urlElem[0].replace('https://', '');
    }

    // get manifest as JSON
    const manifest: string = await makeManisfest(subdomain);

    // Create a Buffer from the content
    const buffer: Buffer = Buffer.from(manifest, 'utf-8');

    // Set response headers for downloading the Blob as a file
    res.setHeader('Content-Disposition', 'attachment; filename="manifest.webmanifest"');
    res.setHeader('Content-Type', 'application/manifest+json');

    // CORS -> dev change for prod use//
    res.set('Access-Control-Allow-Origin', '*');
    // Send the buffer as the response
    res.end(buffer, 'binary');
    return;
  } catch(err: any){
    res.json({error: err});
    return;
  }
});