gpt4 book ai didi

progressive-web-apps - 如何动态创建 PWA manifest.json?

转载 作者:行者123 更新时间:2023-12-03 23:35:57 47 4
gpt4 key购买 nike

我在 manifest.json 中使用静态变量创建了一个功能,例如:

 -- name -- short_name -- start_url

And it's working fine for the "Add To Home Screen".When I set manifest.json variable dynamically, the add to screen does not work

Basically I have an e-commerce PWA. My requirement is the following: if a user visits the app url (ex: www.example.com/products/PRODUCT_NAME_A ), he should be able to create a shortcut link on home screen or many they want based on different URLs.

You can also check my code that I have done so far in javascript:



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 Functions。我添加了一个响应 /manifest?startUrl=...&name=... 的云函数并返回正确的 manifest.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();
};

关于progressive-web-apps - 如何动态创建 PWA manifest.json?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57022591/

47 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com