如何使用meta标签在manifest.json文件中添加URL和web_URLs

Question

我正在创建一个渐进式 Web 应用程序，并且需要使用 meta 标签在 manifest.json 文件中添加当前 URL。

我创建了这个 manifest.json 文件：

{
 "name": "app",

  "icons": [{
    "src": "images/avatar.jpg",
    "sizes": "64x64"

  }, {
    "src": "images/avatar.jpg",
    "sizes": "64x64"
    }, {
    "src": "images/avatar.jpg",
    "sizes": "128x128",
    "density": 2
   }],
   "app": {
    "urls": [
           "https://www.example.com"
           ],
    "launch": {
          "web_url": "https://www.example.com"
  }
 }
  "theme_color":"#06ADD5",
  "display": "standalone",
 "orientation": "portrait"
}

上述JSON在静态URL和Web URL中运行良好，但我希望它能够作为动态URL（例如：www.example.com/<PRODUCT_ID>）正常工作。

- kishan patel

Answer 1

那个JSON不符合Web App Manifest规范，这是Chrome和Firefox目前用于将Web应用添加到设备主屏幕时使用的元数据。具体来说，您需要使用start_url属性来指定要打开的初始URL。

无论如何，根据某些条件自定义/path/to/manifest.json内容的问题归结为在将其返回给客户端之前如何通常对任何资源进行服务器端自定义。您可以传递一个URL参数，例如/path/to/manifest.json?start_url=*something*，然后让您的Web服务器基于something返回JSON响应中的不同start_url值。

如果您无法实现服务器端逻辑，可能是因为您仅部署静态文件并对所有内容使用客户端渲染，则最好是预先生成多个manifest-*something*.json文件，每个文件都有不同的start_url值，然后在每个页面上将<link rel="manifest">标记设置为指向适当的manifest-*something*.json URL，具体根据您的需求确定。

- Jeff Posnick

---

你可以解释一下在哪里运行Web服务器以生成start_url吗？ - Georgiana M

这取决于您使用的特定Web服务器。它需要读取URL查询参数，然后根据该值编写不同的响应正文。 - Jeff Posnick

我使用后端服务器AWS Lambda，但我不明白REST API在哪里被调用来生成JSON。 我创建了一个REST API调用，返回manifest.json上下文，但作为JSON响应体，但是应用程序没有读取该文件。 我认为文件必须单独存储在Web中。 - Georgiana M

如果您正在生成一组静态资产，可以在多个子域上提供服务，并且子域确定多租户Web应用程序中的租户，则此方法将无法正常工作。可能可以通过JavaScript动态生成并添加到HTML中的<link>标记来生成清单，但我不知道这对清单的使用者有什么影响，以及他们是否仍然会检测到它。简而言之，我认为清单中动态URL的支持仍然不足，理想情况下，我们应该有类似通配符支持的东西（%baseUrl%/index.html）。 - Adam Reis