0

我已经使用 Angular 6 创建了一个 PWA。稍后我想要有不同的图标并启动 Urls，因为该应用程序将在多个 url 下运行（每个帐户将被分配一个唯一的 url，并且每个帐户都有不同的徽标）。所以我想动态更改 manifest.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：

我没有找到解决方案。我现在这样尝试：

索引.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。

我可以这样做吗？

4

2 回答 2

1

您可以通过 nodejs 服务（或您选择的语言）提供清单并动态输出对 GET manifest.json 请求的响应来实现此目的。

我过去根据“主机”标头完成了此操作，它将告诉您清单被请求的域。

例如，为此的快速请求处理程序可能类似于：

app.get("/manifest.json", function (req, res) {
    const host = req.header("Host")
    const manifest = buildManifestForHost(host)

    res
        .status(200)
        .send(manifest)
})

function buildManifestForHost(host: string): object {
    // build your manifest.json response here
}
于 2020-01-30T08:40:30.197 回答
1

您可以为每个配置创建一个单独的 manifest.json，并让构建过程将其移动到文档根目录。

  1. 在下创建不同的文件（在此示例中为 dev 和 prod）
  • src/环境/dev/manifest.json
  • src/环境/产品/manifest.json
  1. 将以下内容添加到您的 angular.json 中以获得不同的配置（例如，在 fileReplacements 之后）：
"assets": [
  "src/assets",
  {
    "input": "src/environments/dev",
    "output": "/",
    "glob": "manifest.json"
  }
],

"assets": [
  "src/assets",
  {
    "input": "src/environments/prod",
    "output": "/",
    "glob": "manifest.json"
  }
],
  1. 删除你原来的 manifest.json
于 2021-10-08T08:26:23.510 回答