概念
渐进式web应用
特点
- Discoverable, 内容可以通过搜索引擎发现。
- Installable, 可以出现在设备的主屏幕。
- Linkable, 你可以简单地通过一个URL来分享它。
- Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
- Progressive, 它在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。
- Re-engageable, 无论何时有新的内容它都可以发送通知。
- Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机，平板电脑，笔记本，电视，冰箱，等。
- Safe, 在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据。
优势
- 减少应用安装后的加载时间, 多亏了 Service Workers来进行缓存, 以此来节省带宽和时间。
- 当应用有可用的更新时，可以仅仅去更新发生改变的那部分内容。与之相反，对于一个原生应用而言，即便是最微小的改动也需要强制用户去再次下载整个应用。
- 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上，应用可以全屏运行等。
- 凭借系统通知和推送消息与用户保持连接，对用户产生更多的吸引力，并且提高转换效率。
技术支持
service worker
Service Workers是浏览器和网络之间的虚拟代理。
它们的运行在一个与我们页面的 JavaScript 主线程独立的线程上，并且没有对 DOM 结构的任何访问权限。
他们不仅仅提供离线功能，还提供包括处理通知，在单独的线程上执行繁重的计算等。Service workers 非常强大，因为他们可以控制网络请求，修改网络请求，返回缓存的自定义响应，或合成响应。
Web App Manifest
Push
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
return registration.pushManager.getSubscription()
.then(async function(subscription) {
// 注册部分
});
})
.then(function(subscription) {
// 订阅部分
});
Notifications
请求授权后发送通知
Notification.requestPermission().then(function(result) {
if(result === 'granted') {
randomNotification();
}
});
以上request有3种值：default（没选），granted（同意授权） 或者denied（拒绝）。一旦同意，对发送通知和推送消息都有效
new Notification(notifTitle, options);
Add to Home Screen
App shell（可以理解为程序的外壳）
Streams API
示例项目
参考：
