角7 pwa动态清单 [英] angular 7 pwa manifest dynamically
本文介绍了角7 pwa动态清单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建了一个角度为6的PWA。 稍后我想有不同的图标和启动URL，因为应用程序将在多个URL下运行(每个帐户将被分配一个唯一的URL，每个帐户都有不同的标志)。因此，我希望动态更改清单.json。
有办法做到这一点吗？
编辑：
我这样试一试：
<head>
<meta charset="utf-8">
<title>Pwatest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/icons/coffee.png">
<link rel="manifest" id="my-manifest-placeholder">
<link rel="apple-touch-icon" href="assets/icons/icon-192x192.png">
<!-- <link rel="manifest" href="manifest.json"> -->
<meta name="theme-color" content="#1976d2">
<script>
var test = true;
var myDynamicManifest = {
"name": "pwatest",
"short_name": "pwatest",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": []
}
if(test){
myDynamicManifest['icons'].push({
"src": "assets/icons/coffee-192x192.png",
"sizes": "192x192",
"type": "image/png"
});
}else{
myDynamicManifest['icons'].push({
"src": "assets/icons/frog-192x192.png",
"sizes": "192x192",
"type": "image/png"
});
}
console.log(myDynamicManifest);
const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('#my-manifest-placeholder').setAttribute('href', manifestURL);
console.log(document.querySelector('#my-manifest-placeholder'));
</script>
</head>
编辑2：
我没有找到解决方案。我现在这样试一试：
index.html
<link rel="manifest" id="my-manifest-placeholder" href="/manifest.php">
清单.php
<?php
$test = [
"name" => "pwatest",
"gcm_user_visible_only" => true,
"short_name" => "pwatest",
"start_url" => "/",
"display" => "standalone",
"orientation" => "portrait",
"background_color" => "#fafafa",
"theme_color" => "#1976d2",
"icons" => [
"src" => "assets/icons/coffee-192x192.png",
"sizes"=> "192x192",
"type" => "image/png"
]
];
header('Content-Type: application/json');
echo json_encode($test);
?>
但我变成了完整的php文件，而不是JSON。
我可以这样做吗？
推荐答案
您可以为每个配置创建单独的清单.json，并让生成过程将其移动到文档根目录。
- 在 下创建不同的文件(在本例中为dev和prod)
- src/Environment/dev/mark.json
- src/Environment/prod/mark.json
- 在angular.json中为不同的配置添加以下内容(例如，在文件替换之后)：
"assets": [
"src/assets",
{
"input": "src/environments/dev",
"output": "/",
"glob": "manifest.json"
}
],
"assets": [
"src/assets",
{
"input": "src/environments/prod",
"output": "/",
"glob": "manifest.json"
}
],
- 删除您的原始清单.json
这篇关于角7 pwa动态清单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
