PWA系列：第一章 PWA使用场景分析

最新推荐文章于 2024-08-29 08:45:00 发布

chongtuoyi8999

最新推荐文章于 2024-08-29 08:45:00 发布

阅读量1.1k

点赞数

原文链接：https://my.oschina.net/u/2251679/blog/3023663

版权

前言

2018年4月份起微软的应用商店上线第一批PWA应用以来，近一年随着safari开始支持ServiceWorkers，国内浏览器厂商也逐步开始大力加持，到本课程发稿起95%以上的浏览器都支持了PWA的横幅安装。PWA轻应用也逐渐被广大站点使用和推广。

PWA轻应用的在线或离线的环境中更好的模拟Navive App，它充分的发挥了离线缓存，Web Service，Serivce Workers、manifest等技术的综合应用。它的开发费用低，推广成本低廉、尤其版本迭代的维护更容易的特性。使得它更受开发厂商的热爱，尤其管理系统beta版，行销模型、引导APP安装等场景更有优异表现。
我们的课程从基础入手，你只要掌握基础的**ECMAScript5的基础**，

课程从零开始梳理各个知识点。从服务端离线缓存实现，用户代理的脱机缓存，CacheStorage，Web Service，Service Workers，Promise、服务器客户端消息等专题，共十二章。帮助开发者从零理解PWA的应用。

优缺点

PWA 在2019年看来已经是一个不年轻的技术了，PWA全称Progressive Web App，即渐进式WEB应用。他使用户在浏览网页的同时，通过用户代理（浏览器）触发，直接在移动终端主屏生成一个应用。优点在于：

开发成本低，现阶段前端打包已经完全可以实现三端统一的代码维护（android,ios,web），但还依赖在市场或store推广，通过PWA技术，可以快速在用户主屏生成应用；
推广成本低廉：可以通过短信，即时聊天，广告直接安装主屏应用。粘性大；
版本迭代容易维护，只要处理缓存无需依赖任何设备；
通过PWA可以协助APP安装和推广；
通知推送，在特定浏览器环境中模拟原生的信息推送

缺点在于：

无法主动安装到用户系统主屏，根据PWA协议规范用户需要2次访问网站，并间隔大于5分钟。用户代理将提示用户是否安装到主屏。但实际应用测试中这种响应并不能统一。有些浏览器在满足PWA条件的页面可以直接呼出安装横幅，有些则无法控制呼出时间；
用户使用习惯性，用户热度不够，或不习惯这种操作模式
iOS系统需要用户操作，并不能一键安装;
更多的原生功能不能被PWA使用，虽然在2017年Google就宣布PWA将在Android上获得和原生应用一样的功能体验，但仅仅Chrome能够使用PWA的功能，其他浏览器还是望尘莫及。像sync同步功能等只有Chrome才在实现。技术开发中不得不考虑更多兼容性。

功能	Android	iOS
使用内存	>50M	<50M
地理位置	√	√
传感器	√	√
摄像头	√	√
音频输出	√	√
语音合成	√	√
WebAssembly	√	√
WebRTCWebGL	√	√
访问蓝牙	√	x
Web App Banner	√	x
推送通知	√	x
打开其他应用	√	x

下面是支持PWA的浏览器：

场景应用

随着手机市场用户的日益活泼，围绕着手机开发的各种APP也层出不穷，PWA是一种轻应用的形态存在。它到底更适合哪种方面的使用和推广呢：笔者也在近几年间开发和跟踪多款轻应用的发展来叙述以下几种场景：

场景一：某大型商超管理平台在2018年要开发基于移动端的管理体系，在梳理业务流程的过程中，发现业务流程非常复杂，采购模型各地市都有差异，地堆等活动方案复杂而且变化量大，各个权限终端业务模型非常庞大。预计开发beta版的周期可能要10个月以上。初期版本迭代会成为大问题，iOS可能延后接入。将导致至少有20%的员工是无法使用管理系统。后期采用了PWA接入的方式。前端采用VUE开发，大大提高的应用速度，定型后使用WEEX生成客户端。

场景二：中小型企业的定制化管理系统。近几年随着微信企业号，钉钉等面向企业管理模型，可以提供更优秀的企业自动化解决方案。现实中很多企业还是依赖以前的非常规的管理系统。某地扎啤供应商，2006年自主开发业务管理系统。2014年建立移动端的业务管理系统。2018年采用PWA技术快速的把管理系统生成桌面应用。降低了二次开发成本，做到低投入高产出的管理型回报

场景三：某在线财经网站，用户访问WEB,通过PWA技术，快速生成选中的股票到桌面。用户可以通过主屏快速访问单只股票,处理买入，卖出。大大提高了产品粘性。

场景四：金融贷款平台，通过大数据的短信精准定位，短信内容点击后跳转浏览器。直接使用PWA技术在客户端生成主屏APP。节省APP推广费用，大大降低客户跳出率。提升了到达率。

场景五：体验性子应用，Facebook在PWA计划后，就推出了自己的PWA。后续新功能业务发展上也大大选用了PWA，从服务或社交媒体平台获得完整的体验。开始部署阶段就尝试通过PWA在用户主屏生成新的入口，慢慢把应用独立出平台。

场景六：中小型网站的独立入口，国内部分中小型网站虽然有独立的APP，但安装量和粘性都很低，采用PWA技术，利用现有流量，快速占领用户主屏。

通过以上案例不难看出PWA具有快速部署的功能。对于Native App 来说，其最大的问题是要由软件市场安装和推广，当用户通过搜索找到某个应用时，他需要下载App后才能享受内容。当再次使用内容时还是需要打开App。降低了用户热情，随着移动互联网的发展。更个性的桌面应用将成为时代主流。自定义自己的应用入口，甚至自定义自己的应用市场，和朋友一起分享应用将来到。PWA技术遵循W3C标准，完全开放。更容易被各个终端浏览器接受。打破市场枷锁。

自2015年以来，PWA 相关的技术不断升级优化，在用户体验和用户留存两方面都提供了非常好的解决方案。PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。
各大浏览器厂商也开始支持PWA，随着PWA安装的放开，首次加载即可安装，国内浏览器厂商也纷纷展开全面技术覆盖。