前端发展趋势技术讲解-PWA

一、背景

从2018年到现在,作为号称下一代web应用模型的PWA,逐渐成为了一个各大前端厂商争先恐后进行涉足,布局的一个新的技术, 其主要的对标物Native app,作为现在最主流的移动端应用,它的安全,性能,用户体验的确明显领先于其他互联网载体,但是原生App始终有一些缺点,比如:

  1. 昂贵开发成本
  2. 软件上线,版本更新都需要发布到不同的商店,并通过审核

有些APP你可能使用频率特别少,但是你还是不得不去商店中下载庞大安装包,或者可能一段时间不使用以后,随着版本的更新,你也不得不去重新更新并安装。
PWA技术的作为web应用,其天生优势能很好的解决以上的问题。

二:PWA是什么?

它的中文意思是渐进式Web应用程序
英文是Progressive Web App
PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。

三:PWA 的主要特点:

  1. 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
  2. 体验 - 快速响应,并且有平滑的动画响应用户的操作
  3. 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面

四:PWA的主要特性:

  1. 渐进式 - 适用于所有浏览器,因为它是以渐进式增强作为宗旨开发的
  2. 连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
  3. 类似应用 - 由于是在 App Shell 模型基础上开发,因为应具有 Native App 的交互和导航,给用户 Native App 的体验
  4. 持续更新 - 始终是最新的,无版本和更新问题
  5. 安全 - 通过 HTTPS 协议提供服务,防止窥探和确保内容不被篡改
  6. 可索引 - 应用清单文件和 Service Worker 可以让搜索引擎索引到,从而将其识别为『应用』
  7. 粘性 - 通过推送离线通知等,可以让用户回流
  8. 可安装 - 用户可以添加常用的 webapp 到桌面,免去去应用商店下载的麻烦
  9. 可链接 - 通过链接即可分享内容,无需下载安装

五:核心功能:

PWA并不是单指某一项技术,你更可以把它理解成是一种思想和概念,目的就是对标原生app,将Web网站通过一系列的Web技术去优化它,提升其安全性,性能,流畅性,用户体验等各方面指标,最后达到用户就像在用app一样的感觉。

  1. Web App Manifest
  2. Service Worker
  3. Cache API 缓存
  4. Push&Notification 推送与通知
  5. Background Sync 后台同步
  6. 响应式设计

具体功能请移步至PWA

六:PWA的发展趋势

2016年, PWA在google正式落地,基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了
随着 iOS 11.3 的发布,iOS正式开始支持PWA
Windows Edge 支持PWA
随着越来越多的游览器大厂,相继的对PWA做出了支持和优化,想必PWA的时代即将到来。

猜你喜欢

转载自blog.csdn.net/weixin_43606158/article/details/90899484