Question

我正在研究 React PWA，我想知道是否可以将图标 URL 动态添加到 manifest.json 文件。所以我的目标是在用户登录之前显示通用应用程序图标。之后，我从远程 API 请求一个新图标并将其设置为清单文件，以便更改仪表板上的图标和移动图标. 理想情况下，我希望在没有任何后端更改的情况下实现这一点

Answer 1

在 HTML 中有一个带有 rel="manifest" 但没有 href 属性的链接标签。稍后使用此标签来填充您的清单。如：您的文档：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="manifest" id="my-manifest-placeholder">
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

现在在 Javascript 中你有两个选择：

现在在 Javascript 中你有两个选择：使用 URL 设置 href 属性： document.querySelector('#my-manifest-placeholder').setAttribute('href', '/my-dynamic-manifest-url.json');
使用 JSON 对象设置清单

var myDynamicManifest = {
  "name": "Your Great Site",
  "short_name": "Site",
  "description": "Something dynamic",
  "start_url": "<your-url>",
  "background_color": "#000000",
  "theme_color": "#0f4a73",
  "icons": [{
    "src": "whatever.png",
    "sizes": "256x256",
    "type": "image/png"
  }]
}
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);

SOURCE

是否可以动态更改 manifest.json 文件

1 个答案: