这玩意学名叫
PWA
:
全称:Progressive Web App,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
一、PWA安装条件:
在 Chrome 中,渐进式 Web 应用程序必须满足以下条件才能触发 beforeinstallprompt 事件和显示浏览器内安装推广栏
- 未安装 Web 应用程序
- 符合用户参与启发式
- 通过 HTTPS 提供服务
- 具有一个 Web 应用清单,其中包括:
short_name
或name
icons
- 必须包含一个 192 像素和一个 512 像素的图标start_url
display
- 必须是fullscreen
、standalone
或minimal-ui
- 不能有
prefer_related_applications
,或值为false
- 使用
fetch
处理程序注册服务工作进程
二、实战
1. 新建manifest.json文件
在项目根目录创建
manifest.json
文件
{
"short_name": "Weather",
// 安装的PWA应用名称
"name": "Weather: Do I need an umbrella?",
// 安装的PWA应用描述
"description": "Weather forecast information",
"icons": [
// 不同icon资源调用方式
{
"src": "/images/icons-vector.svg",
"type": "image/svg+xml", // 资源类型:image/svg+xml、image/png、image/png
"sizes": "512x512" // 资源(图像)大小,得和实际的大小一致
},
],
"id": "/?source=pwa",
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "How's weather tomorrow?",
"short_name": "Tomorrow",
"description": "View weather information for tomorrow",
"url": "/tomorrow?source=pwa",
"icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
}
],
"screenshots": [
{
"src": "/images/screenshot2.jpg",
"type": "image/jpg",
"sizes": "720x540",
"form_factor": "wide"
}
]
}
2. 新建一个demo.html文件
<!DOCTYPE html>
<html>
<head>
<!-- 引入manifest.json -->
<link rel="manifest" href="manifest.json" />
</head>
<body>
<h1>Demo</h1>
</body>
</html>
3. 启动HTTP服务测试效果
参考资料: