提问人：Nicolas 提问时间：10/10/2023 最后编辑：Nicolas 更新时间：10/10/2023 访问量：24
manifest.webmanifest 可变名称和图像
manifest.webmanifest varible name and image
问：
我正在开发一个供多家企业使用的 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"
}
]
}
答：
0赞
Nicolas
10/10/2023
#1
我找到了使用谷歌云功能的方法。
在我的索引.html中<link rel="manifest" href="https://mygooglecloudfunction.run.app/">
并使用该 Google Cloud 功能：
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 Buffer 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;
}
});
评论