PWA 渐进式网络应用 - 3 - manifest.json 添加应用至桌面
简介 WEB 应用清单 manifest.json
web 应用清单是一个简单的 json 文件，其中包含
short_name以及icons字段，目的是提供将应用添加至桌面的功能，从而使用户可以无需下载如同原生应用一般从桌面打开 web 应用，只要在service worker基础上添加一个描述性的配置文件manifest.json就可以了
使用
添加应用至桌面，也称为 “Web 应用安装操作栏”，这是一种允许用户在浏览器中快速无缝地将 Web 应用添加到主屏幕的绝佳方法。为了确保用户可以快速地访问网站，此功能会显示提示，询问用户是否要将 Web 应用添加到主屏幕。如果用户接受，一个图标会被添加设备的主屏幕上，此图标引用了应用的 URL 。此后访问 Web 应用只需手指轻轻一按。
PWA 添加到主屏幕的不仅仅是一个网页快捷方式，它提供了更多的功能，让 PWA 具有更加原生的体验
添加到主屏幕功能是浏览器提供的不需要写代码，但是需要满足以下的条件
- manifest.json 文件
- 清单文件需要启动 URL
- 需要 144x144 的 PNG 图标
- 网站正在使用通过 HTTPS 运行的 Service Worker
- 用户需要至少浏览网站两次，并且两次访问间隔在五分钟之上
1. manifest.json 文件配置说明
<!-- html 文件中引入 manifest 文件 -->
<link rel="manifest" href="/manifest.json" />// 实际上是个 json 文件，这里为了方便注释
{
"name": "Progressive Times web app", // 用作当用户被提示安装应用时出现的文本
"short_name": "Progressive Times", // 用作当应用安装后出现在用户主屏幕上的文本
"start_url": "/index.html", // 打开后第一个出现的页面地址
"display": "standalone", // 定义应用的显示方式
"description": "应用描述", // 参考 meta 中的 description
"orientation": "natural", // 定义默认应用显示方向，竖屏、横屏
"prefer_related_applications", false, // 是否设置对应应用
"theme_color": "#FFDF00", // 主题颜色，用于控制浏览器地址栏着色
"background_color": "#FFDF00", // 应用加载之前的背景色，用于应用启动时的过渡
"icons": [ // 定义不同尺寸的图标，最终会根据应用场景选择合适大小的图标
{
"src": "icon.png",
"sizes": "144x144",
"type": "image/png" // 非必填
}
],
"scope": "/" // 设置 PWA 的作用域
}用户点击主屏幕上的 web 应用后，浏览器渲染页面第一针时，将显示一个临时的启动页面
应用清单中的
display配置项，可以设置 web 应用的显示模式，有一下选项- FullScreen 打开 Web 应用并占用整个可用的显示区域。
- Standalone 独立原生应用模式 用户代理将排除诸如 URL 栏等标准浏览器 UI 元素，但可以包括诸如状态栏和系统返回按钮的其他系统 UI 元素
- Minimal-ui 此模式类似于 fullscreen，但为终端用户提供了可访问的最小 UI 元素集合，例如，后退按钮、前进按钮、重载按钮以及查看网页地址的一些方式。
- Browser 使用操作系统内置的标准浏览器来打开 Web 应用
可以通过在 CSS 中设置
display-mode这个媒体查询条件去指定在不同的显示类型下不同的显示样式
@media all and (display-mode: fullscreen) {
body {
}
}注意
- 目前如果修改了 manifest.json，已添加到主屏幕的应用样式不会改变，除非重新添加到桌面
- start_url 如果配置相对地址，则基本地址与 manifest.json 相同
2. 提示用户添加应用至桌面
// 取消添加到主屏幕
window.addEventListener('beforeinstallprompt', function(e) {
e.preventDefault();
return false;
});
// 添加到主屏幕后响应
window.addEventListener('beforeinstallprompt', function(event) {
event.userChoice.then(result => {
console.log(result);
// {outcome: "dismissed", platform: ""} // 取消添加
// {outcome: "accepted", platform: "web"} // 完成添加
});
});
// 手动添加，要等到符合规格后才能起效
let savedPrompt = null; // 用来保存 事件
const btn = document.getElementById('btn');
// 添加到主屏幕后响应
window.addEventListener('beforeinstallprompt', function(e) {
e.preventDefault();
savedPrompt = e;
return false;
});
btn.addEventListener('click', function() {
if (savedPrompt) {
console.log(savedPrompt);
// 异步触发横幅显示，弹出选择框，代替浏览器默认动作
savedPrompt.prompt();
// 接收选择结果
savedPrompt.userChoice.then(result => {
console.log(result);
});
}
});