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) 认证代码
// 未来可能扩展更多内容
}