App Manifest
App Manifest
添加到主屏幕的好处有很多，主要体现在用户粘性和用户体验上。桌面图标减少了网站的入口深度，用户可以从主屏幕直达站点，而无需从浏览器首页一层一层进入。添加到主屏幕的图标具有接近
从桌面图标进入网站时具有启动页面和脱离浏览器
- 屏幕留存图标拥有独立的图标和名称。
- 点击图标打开网站，资源加载的过程并不会像普通网页那样出现白屏，取而代之的是一个展示应用图标和名称的启动页面，资源加载结束时加载页消失。
- 当网页最终展现时，地址栏、工具栏等浏览器元素将不会展现出来，网页内容占满屏幕，看起来与
Native App 一样。
编写配置文件后在<link rel="manifest" href="/manifest.json">。
// manifest.json
{
"name": "Sharee PWA", // 用于安装横幅、启动画面显示
"short_name": "Sharee PWA", // 用于主屏幕显示
// 浏览器会根据有效图标的 sizes 字段进行选择。首先寻找与显示密度相匹配并且尺寸调整到 48dp 屏幕密度的图标
"icons": [
{
"src": "../logo/180.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "../logo/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "../logo/512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/?from=homescreen", // 启动网址，相对于manifest.json所在路径
"scrope": "/", // sw的作用范围只能在此路径或子路径
"display": "standalone",
"theme_color": "#FFF",
"background_color": "#FFF" // 启动时的背景色
}
// iOS不支持manifest配置，通过meta标签添加到head中
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
<meta name="apple-mobile-web-app-title" content="Sharee PWA" />
<link rel="apple-touch-icon" sizes="180x180" href="../logo/180.jpg" />
<meta name="msapplication-TileColor" content="#fff" />
<meta name="theme-color" content="#fff" />
安装弹窗
网站添加
- name / short_name，优先采用
short_name - start_url
- icons
display 为standalone或fullscreen或minimal-ui
站点必须注册fetch 事件，用户访问频率足够高（浏览器未明确说明频率beforeinstallprompt 事件拦截弹窗事件并保存，然后提供按钮触发：
let appPromptEvent = null;
const installBtn = document.getElementById("install-btn");
self.addEventListener("beforeinstallprompt", function (e) {
e.preventDefault();
// 保存弹窗事件
appPromptEvent = event;
installBtn.classList.add("visible");
return false;
});
window.addEventListener("appinstalled", function () {
console.log("应用已安装");
installBtn.classList.remove("visible");
});
installBtn.addEventListener("click", function () {
if (appPromptEvent !== null) {
console.log(appPromptEvent);
// 触发弹窗
appPromptEvent.prompt();
appPromptEvent.userChoice.then(function (result) {
if (result.outcome === "accepted") {
console.log("同意安装应用");
} else {
console.log("不同意安装应用");
}
appPromptEvent = null;
});
}
});
beforeinstallprompt 的兼容性如下，大多数浏览器不支持弹窗。其实在支持弹窗的浏览器中，它的触发策略也是很低频的，需要用户在短时间内与网站进行高频互动才会触发，且在用户选择取消安装后很长一段时间内都不会再次触发，浏览器需要保证用户的使用体验，没有人会喜欢频繁弹出的广告影响自己浏览。
启动动画
从屏幕图标进入时，根据
