如何创建PWA MANIFENT.json动态? [英] How to create PWA manifest.json dynamic?
本文介绍了如何创建PWA MANIFENT.json动态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在清单.json中使用静态变量变量创建了一个功能,例如:
-- name -- short_name -- start_url
它在"添加到主屏幕"上运行得很好。 当我动态设置MANIFEST.json变量时,添加到屏幕不起作用
基本上我有一个电子商务PWA。我的要求如下:如果用户访问应用程序URL(例如:www.Example.com/Products/PRODUCT_NAME_A),他应该能够在主屏幕上创建一个快捷方式链接,或者根据不同的URL创建许多他们想要的快捷方式链接。
您还可以查看我到目前为止用Java脚本编写的代码:
var domain = document.location.origin;
var currentUrl = window. location. href;
var myDynamicManifest = {
"name": "My App",
"short_name": "My App",
"description": "This is my App",
"start_url": currentUrl,
"scope": ".",
"background_color": "#5F6EDD",
"theme_color": "#efbc4b",
"orientation": "portrait",
"display": "standalone",
"lang": "en",
"dir": "ltr",
"icons": [
{
"src" : domain + "/images/logo/logo_70x70.png",
"sizes" : "70x70",
"type" : "image/png"
},
{
"src" : domain + "/images/logo/logo_120x120.png",
"sizes" : "120x120",
"type" : "image/png"
},
{
"src" : domain + "/images/logo/logo_144x144.png",
"sizes" : "144x144",
"type" : "image/png"
},
]
}
const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/javascript'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('#manifest').setAttribute('href', manifestURL);
我预计输出如下:http://prntscr.com/oej48u
推荐答案
我意识到这是一个老问题。但是,我想我应该传达一下我是如何解决这个问题的。我的前端是通过Netlify服务的,后端API都是GCP云函数。我添加了一个Cloud函数,它响应/manifest?startUrl=...&name=...
并返回正确的清单.json内容。然后,在单页应用程序中,当页面加载或用户导航时,它会动态更新标题<link />
以指向适当的URL。
客户端:
const manifest = document.getElementById('manifest');
const nextManifest = document.createElement('link');
nextManifest.id = 'manifest';
nextManifest.rel = 'manifest';
nextManifest.href =
`https://<cloud function host>/manifest?startUrl=${
encodeURIComponent(`/events/${token}`)
}&name=${encodeURIComponent(event.name)}`;
manifest.parentNode.replaceChild(nextManifest, manifest);
服务器端:
const manifest = {
"short_name": "Photo Feed",
"name": "Photo Feed",
"icons": [
{
"src": "shortcut-icon.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "mobile-app-icon.png",
"sizes": "180x180",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#591A0C",
"background_color": "#06B8B3"
};
/**
* Responds to any HTTP request.
*
* @param {!express:Request} req HTTP request context.
* @param {!express:Response} res HTTP response context.
*/
exports.manifest = (req, res) => {
res.set('Access-Control-Allow-Origin', '*');
if (req.method === 'OPTIONS') {
res.set('Access-Control-Allow-Methods', 'GET');
res.set('Access-Control-Allow-Headers', 'Content-Type');
res.set('Access-Control-Max-Age', '3600');
res.status(204).send('');
return;
}
if (req.method === 'GET') {
// take /?startUrl=<url> and return a manifest file
// with `star_url`, same with name
if (req.query.startUrl) {
res.json({
...manifest,
short_name: req.query.name || manifest.short_name,
name: req.query.name ? `${req.query.name} Photo Feed` : manifest.name,
start_url: req.query.startUrl,
});
} else {
res.json(manifest);
}
}
res.status(405).send();
};
这篇关于如何创建PWA MANIFENT.json动态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文