Skip to content
导航

Web app manifest

Web app manifest 是PWA可以安装的必要条件。

Web 应用清单是一个 JSON 文件,用于定义应如何将 PWA 视为已安装的应用程序,包括操作系统中的外观和基本行为。

文件的官方扩展名是.webmanifest ,命名例如app.webmanifest
但如果浏览器不支持,则尝试旧的命名方式manifest.json

使用

<head>标签中添加以下内容以使用 Web 应用清单

html
<link rel="manifest" href="/app.webmanifest">

打开浏览器开发者工具,在应用程序 - 清单中查看浏览器识别支持的配置项

内容

js
{
  "name": "HackerWeb", //全名
  "short_name": "HackerWeb",  // 12字符以下的短名称,以免截断
  "id": "HackerWeb", // 唯一标识,避免重复安装
  "start_url": ".", // 从PWA图标启动的url
  "display": "standalone", // 操作系统应如何绘制 PWA 窗口
  "description": "A simply readable Hacker News app.", // PWA描述
  "icons": [{ // 至少定义一个图标,唯一图标推荐尺寸是512
    "src": "images/touch/homescreen512.png", // 相对路径取manifest的URL
    "sizes": "512x512",
    "type": "image/png" // 浏览器不支持的type会忽略
    "purpose": "maskable" // 操作系统需要调整图标时,优先使用此标识的图标
  }],

  // 以下是推荐字段,非必须。颜色不支持透明度
  "theme_color": "#fff", // 应用程序默认颜色,影响操作系统显示。可被`HTML <meta name="theme-color">`覆盖
  "background_color": "#fff", // 在加载样式表前显示的背景色
  "scope": "/pwa/", // 限制导航范围,超出范围的URL将按浏览器访问
  
  // 以下是扩展字段
  "lang": "en-US", // 指定主要语言
  "dir": "auto", // 清单字段name、short_name、description展示方向
  "orientation": "portrait", // 指定应用展示方向
  
  // 营销字段,用于应用商店、搜索
  "screenshots": [], // 类似icons,没有purpose
  "categories": [], // 所属类别,取值列表见https://www.w3.org/TR/manifest-app-info/#categories-member
  "iarc_rating_id": "", //  Web 应用程序的国际年龄分级联盟 (IARC) 认证代码

  // 未来可能扩展更多内容
}

参考资料