内联 Web 应用程序清单？

Question

我有一个 marketplace/web 应用程序，其中包含数千个静态单页应用程序。

希望为每个单页应用添加一个 Web App Manifest 在其相应 stem_url 的 <head> </head> 标签中（{root}/index.html 所有 urls 给定 SPA）。

标准方法：

<link rel="manifest" href="/manifest.json">

…似乎不是一个好的前进方式，因为这意味着成千上万的 manifest.js 文件被转储到 /public 文件夹中（这是一个 rails 应用程序！）并且随着这个数字的增加，它最终会使 app/assets 编译工作变得非常繁重。

有没有办法像我们处理样式标签那样内联清单 json：

<style>
  body { // style here }
  …
</style>

清单声明的等价物：

<manifest>
 { 
   "name": "HackerWeb",
   "short_name": "HackerWeb",
   …
}
</manifest>

Answer 1

要记住的主要一点是清单请求仍然只是网络请求。

因此您可以添加查询参数

/manifest.json?title=Hello&icon=.....

或者你可以这样做：

/manifest.json?appId=1234

或者你可以使用漂亮的 URL:

/manifest/1234

然后在您的服务器上您可以 return 您想要的 JSON。

Answer 2

您可以使用 data:url 内联 json。所以而不是标准

<link rel="manifest" href="/manifest.json">

会是

<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />

我也想内联，刚才试了一下。有效

Answer 3

改进答案

如 RADXack 所述，这非常有效

<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />

但是，如果您想添加更多属性，例如颜色或 start_url，该怎么办？

然后在您的服务器上您可以添加：

const manifest = JSON.stringify({
        name: "React Doc",
        short_name: "React"
        start_url: "/",
        background_color: "#fffff",
        theme_color: "#ff00ff",
        display: "standalone",
    });

const HTML = `<!DOCTYPE html>
<html lang="en">
  <head>
   <link rel="manifest" href='data:application/manifest+json,${encodeURIComponent(manifest)}' />
   ...rest of your code`

encodeURIComponent将为您转换所有特殊字符。

这样，您可以确定无论传递的数据是什么，它都会 URL 友好

内联 Web 应用程序清单？

Inline the Web App Manifest?

html

ruby-on-rails

manifest

改进答案