PWA初体验

时间:2021-04-26 03:24:44

一、前言

  现在市面上的Native  APP成千上万个,各种应用商店里面的APP琳琅满目。原生的APP下载到手机上之后,用户就可以获取一个方便的入口,体验上也十分顺畅。但是再好的事物难免有点缺点:

1、开发成本高,一般同时安卓和ios两个版本;

2、版本迭代、打包、上传、过审这一些的步骤拉长了开发周期,有时候还有面临别被下架的风险;

3、不利于SEO;

  相对于原生APP,web网页开发开发周期快,没有过审之类的烦恼,也更加利于SEO,当时也存在很明显的不足:

1、只能借助浏览器访问,没有桌面快捷入口;

2、不具备离线能力,offline就GG了;

3、不能主动给用户推送消息;

4、硬件权限的缺失;

  有什么实现方案可以取其上两种方法的精华?微信小程序?PWA?

二、什么是PWA?

      PWA全称Progressive Web App,是Google在移动时代力推的一个提升webapp性能和体验解决方案,是一种渐进式WEB应用。PWA应用,可以通过 Web 技术编写出一个网页应用.,随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能;

1、可添加webapp到桌面,无需下载,提供方便的入口;

2、可以离线储存,offline也不怕;

3、实现消息推送,方便用户回流;

4、持续更新,无版本更新迭代问题;

5、只能通过 HTTPS 协议提供服务,防止窥探和确保内容不被篡改;

三、核心技术

       Web App Manifest

  Service Worker

  App Shell

  Push Notification

  Fetch API

  Service Workers 只是后台运行的 worker 脚本。它们是用 JavaScript 编写的,它们便可使开发者能够拦截网络请求,处理推送消息并执行许多其他任务;

其他核心功能具体实现可以看《PWA-BOOK》!

四、后话

1、PWA的优势开头已经讲了,目前各大厂商虽没有明确的支持pwa,但是它还是有很多可以使用的点;

2、上次在腾讯web前端大会上听企鹅电竞PWA实践,收获颇多。

3、新技术的诞生是要经过时间的筛选,好的技术将会被不断更新,沉淀,最后更好的服务大家。

参考:

1、《PWA-BOOK》!

2、腾讯web前端大会TFC2017 PPT

链接:https://pan.baidu.com/s/1GB4r9fAqrHA9o-o2RwUzRg

密码:h45t