如何动态创建PWA的manifest.json文件？

Question

如何动态创建PWA的manifest.json文件？

7

我使用manifest.json文件中的静态变量来创建功能，如下所示：

 - 名称
 - 短名称
 - 启动网址（start_url）

对于“添加到主屏幕”而言，这种方法有效。但是当我动态设置manifest.json变量时，“添加到主屏幕”就无法工作。

基本上，我有一个电子商务渐进式网络应用程序。我的要求是：如果用户访问应用网址（例如：www.example.com/products/PRODUCT_NAME_A），他应该能够在主屏幕上创建快捷方式链接或多个链接，具体取决于不同的URL。

您还可以检查我在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。此内容与IT技术有关，请让我知道您是否需要进一步的翻译。

- Er Parwinder Hirkewal

这不是你之前问过的同一个问题吗？ - Mathias

是的，确实是这样。不幸的是，我不小心删除了之前的内容。 - Er Parwinder Hirkewal

你尝试过这个方法，但它对你没有起作用？你遇到了什么问题？https://technowhisp.com/dynamic-pwa-manifest/ - Mathias

当我使用这段代码时，无法添加到屏幕。 - Er Parwinder Hirkewal

如果您在帖子中附上了您尝试过的代码以及出现问题的情况，那么也许其他人可以帮助您找出问题所在。这通常比一般的“如何”问题获得更多回复。 - Mathias

试试这个，可能会有帮助：https://dev59.com/vCf_s4cB2Jgan1znJWtU#67638176 - Sanjeet kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eric Soderberg · Accepted Answer

我知道这是一个旧问题。但是，我想分享一下我如何解决这个问题。我的前端通过Netlify提供服务，后端API全部使用GCP Cloud Functions。我添加了一个Cloud Function来响应/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();
};