PWA

Web App Manifest（manifest.json）

Web app manifest 是一个从页面 head 链接的 JSON 文件（通常是 manifest.json 或 site.webmanifest），它告诉浏览器当你的网站被安装到主屏幕或启动器时该如何表现。它提供应用名称、图标集、主题色和背景色，以及显示模式。没有它，浏览器就不会提议把网站作为 PWA 安装。

生成所有尺寸

Manifest 声明了什么

Manifest 是一个用 <link rel="manifest"> 链接的小型 JSON 文档。当用户安装网站时，浏览器会读取它来给应用命名、选择图标、为启动画面着色，并决定显示多少浏览器界面。

它只对可安装性和主屏幕行为有意义。一个普通的浏览器标签页从不需要它（favicon link 标签已覆盖那部分），这就是为什么很多网站根本没有 manifest。

一个最小的 manifest

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#111111",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

关键字段

字段	用途
name / short_name	完整名称与主屏幕标签
icons	安装与主屏幕的图标集
display	已安装应用显示多少浏览器界面
theme_color	为应用周围的操作系统界面着色
background_color	启动时的启动画面颜色
start_url	已安装应用打开时进入的页面

Web app manifest 常见问题

我需要一个 web app manifest 吗？

只有当你想让网站可作为 PWA 安装、或想控制它的主屏幕外观时才需要。一个只有 favicon 的普通网站并不需要它。

manifest.json 和 site.webmanifest 有什么区别？

除了文件名什么区别都没有。两者都是同一个 web app manifest；浏览器使用你的 <link rel="manifest"> 所指向的那个文件。

我在哪里链接 manifest？

在页面 head 里，用 <link rel="manifest" href="/site.webmanifest">。在每一个应当可安装的页面上放一条 link。