PWA——下一代的web应用模型
概述
不知道从什么时候开始,当我们在浏览网页时,页面会出现一个弹窗,询问我们是否要将此网页保存到本地,如果我们选择了确定,在设备的主屏上就会出现一个新的app,而它就是我们刚才浏览的网页。这种app我们并没有从应用商店去下载,但是我们可以像使用app一样去使用它,也可以像卸载其他app一样去将它卸载,那么这究竟是个什么东西呢,它就是这篇文章的主角——PWA。
什么是PWA
PWA是Progressive Web App的简写,中文名称为渐进式web应用。它是Google 在2016年提出的概念,2017年落地的web技术,一种在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。PWA不单指一种技术,你也可以将其理解为一种思想和概念,目的就是对标原生app,将Web网站通过一系列的Web技术去优化它,提升其安全性,性能,流畅性,用户体验等各方面指标,最后达到用户就像在用app一样的感觉。
PWA为什么会出现
说到app,我们就不得不提起native app即原生app,现在非常主流的移动端应用。原生app使用起来会很流畅,性能好,安全性也可以很高,这是它很显著的优势。但是缺点呢,也很明显,比如:
1. 开发成本很昂贵
2. 软件上线,版本更新都需要发布到不同的商店,并通过审核
这对开发人员来说是比较麻烦的事情。
而对于用户来说,有些APP可能使用频率特别少,但还是不得不去商店中下载庞大的安装包,或者可能一段时间不使用以后,随着版本的更新,也不得不去重新更新并安装。
PWA则完美地避免了这些问题。
如何判断一个web应用是PWA
要判断一个web应用是否是PWA,可以从以下几个方面去考虑:
1. 可发现的—— 内容可以通过搜索引擎发现。
2. 可安装—— 可以出现在设备的主屏幕。
3. 可链接—— 你可以简单地通过一个URL来分享它。
4. 独立于网络——它可以在离线状态或者是在网速很差的情况下运行。
5. 渐进式—— 它在老版本的浏览器仍旧可以使用,在新版本的浏览器上可以使用全部功能。
6. 可重用—— 无论何时有新的内容它都可以发送通知。
7. 响应性—— 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机,平板电脑,笔记本,电视,冰箱,等。
8. 安全—— 在你和应用之间的连接是安全的,可以阻止第三方访问你的敏感数据。
当然,在安装方式上PWA应用与原生app有很大的不同,但是在实际使用上,与原生应用的差距非常小,对于用户来说,几乎是无感的。
核心功能
Service-Workers
Service Workers是浏览器和网络之间的虚拟代理,运行在一个与页面的 JavaScript 主线程独立的线程上,并且没有对 DOM 结构的任何访问权限,并且可以在不同的上下文之间发送和接收信息。 您可分配给 Service Worker 一些任务,并使用基于 Promise 的方法在任务完成时收到结果。他们不仅仅提供离线功能,还提供包括处理通知,在单独的线程上执行繁重的计算等。Service workers 非常强大,因为他们可以控制网络请求,修改网络请求,返回缓存的自定义响应,或合成响应。因为它们非常强大,所以 Service Workers 只能在安全的上下文中执行(即 HTTPS )。
注册service worker
if ('serviceWorker' in navigator) {
// 浏览器支持SW
// Service Worker 的注册路径决定了其 scope 默认作用页面的范围。如果存放在网站的根路径下,则将会收到该网站的所有 fetch 事件。如果希望改变它的作用域,可在第二个参数设置 scope 范围
navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
console.log('ServiceWorker注册成功: ', registration.scope);
}).catch(function (err) {
console.log('ServiceWorker注册失败: ', err);
});
}
注册完成后,serviceWorker.js 文件会自动下载,然后安装,最后激活。
service worker中的常用事件
1. install