轻量级兼顾本地体验，PWA应用到底有多卷？
随着智能手机的普及，移动端应用几乎成为每个互联网产品的标配。在快速迭代的互联网战场中高效开发、低成本上线产品，是每个应用开发团队追求的目标。此时，选择合适的应用类型和开发模式便至关重要。
移动应用可以粗分为四种：原生应用(Native App)， 网页应用(Web App，或HTML5 App)，混合模式移动应用(Hybrid App)，还有我们今天要聊的渐进式网页应用(Progressive Web App)。
PWA 本质上还是一个 Web App ，但在表现上比 Web App 更加接近 Native App 。虽然我们在此与 Native App 进行了比较，但是 PWA 的目的并不是为了取代 Native App ，也不是为了与 Native App 一较高下，而是对 Web App 的升级，是为了带给用户更好的用户体验。
知乎某文章关于四种应用类型的对比，仅供参考
PWA具有快速、可靠、用户粘性高的特点。
快速即快速响应，通过独立的线程进行资源缓存，提高页面的加载时间；可靠指在不稳当的网络环境下，App 也能瞬间加载并展现内容，在离线环境下也提供用户有效反馈；用户粘性高则是通过沉浸式的用户界面、桌面图标、消息推送等手段来增强用户的粘度。
下面，我们就从这三个特点展开，来说说这些特点是如何具体实现的，并且能够给开发者带来怎样的收益，对于用户而言又能带来哪些优化体验。
快 速
资源缓存
在使用PWA时，Service Worker 会将特定响应缓存下来，然后在下次监听到相同请求时，直接返回缓存，提高响应时间，并减少服务器压力。开发者可以通过请求路径的正则匹配，在用户第一次访问网站时，缓存所有更新较少的静态资源，之后都从缓存中更新，提高冷启动的响应时间。
可 靠
离线 offline 页面
在用户网络不佳或断网的情况下，通常会出现浏览器自带的网络崩溃页面，给人一种服务可访问性差的印象。但是PWA可以在用户第一次访问网站时，预缓存一个 offline 的静态页面，在监听到请求失败时返回该页面，改善用户的体验。
用户粘性高
屏幕留存图标
即在配置文件中添加桌面留存图标的 icon 和名称，当用户将网站保存在桌面后，会自动启用配置信息。
添加到主屏幕的好处有很多，桌面图标减少了网站的入口深度，用户可以从主屏幕直达站点，而无需从浏览器首页一层层进入。添加屏幕图标无需下载，类似桌面快捷键，减少了用户安装应用的成本。
以上四个均是PWA服务的本地桌面添加图标
当然，添加桌面图标和添加网页快捷方式仍有所不同：
1. 屏幕留存图标拥有独立的图标和名称。
2. 点击图标打开网站，资源加载时不会像普通网页那样出现白屏，取而代之的是一个展示应用图标和名称的启动页面，资源加载结束时加载页消失。
3. 当网页最终展现时，地址栏、工具栏等浏览器元素将不会展现出来，网页内容占满屏幕，看起来与 Native App 一样。
安装弹窗
浏览器会根据用户的访问频率，在合适的时间弹出弹窗，询问用户是否需要添加屏幕图标。这主要用于引导用户“安装”，留存屏幕图标，提高屏幕图标的添加率。
星巴克PWA版的安装弹窗
推送消息提醒
提供消息推送有很多优点，首先可以吸引用户访问；而且PWA消息的推送只要浏览器在运行即可，无需用户打开网页；消息推送需要获取用户授权，但对于同一个域名下的网页，只需要获取一次授权。
这一功能实现其实包含了两个API——Push API和Notificatiion API。其中，Push API提供推送服务，获得用户订阅授权后，在服务端需要推送消息时，直接向用户提供消息推送；而Notificationg API保证了即使是在用户关闭该PWA时，依然可以收到提醒，类似于Native中的消息提醒。
如今，PWA正逐渐受到开发者群体的追捧，也许很多人会基于开发成本、用户体验等原因优先考虑开发PWA。但是，每个产品各具特色，还没有哪一种解决方案可以完美地应万变。关于不同产品的争论也从未停止。
仅供参考
PWA将在未来大放异彩，目前虽然还有很多实际的问题需要解决，但我们相信，在开发者们共同的努力下，这些问题都能迎刃而解。本文只是对PWA的优势和实现做了个粗浅的介绍，具体如何开发，我们将慢慢与大家分享~
鼎道智联致力于打造以人为本、基于设备的，智能推荐并交付物联网服务的Ding OS，并构建面向未来的 PWA 网络应用程序生态。Ding OS将为 PWA 提供丰厚的沃土，除了全面强大的技术支持，我们还会提供更具生命力的商业模式，与开发者一同建设持续、开放、共赢的生态，欢迎各界开发者朋友们关注并加入我们！
内容参考：
1、现代化 Web 开发实践之PWA：
https://zhuanlan.zhihu.com/p/299469913
2、让你的WebApp离线可用 ：
https://www.jianshu.com/p/25331bf16543
更多精彩内容推荐：
《互联网体检》过于真实，作为开发者，我们还能做点啥？
什么是Web开发的现在与将来？
轻量级兼顾本地体验，PWA应用到底有多卷？相关推荐
- 9.9学python靠谱吗-宅家亲测：9.9的python体验课，到底值不值？
"股市开始动荡.公司无法正常复工.每月工资收入下降.高额房租依旧不减....."受新冠肺炎的影响,这段时间,一系列的现实经济问题让大多数人都过得不是很舒心. 部分人员开始在家线上办 ...
- 开屏广告=让用户等？小红书如何兼顾用户体验和广告投放效果
开屏广告作为小红书品牌广告的重要组成部分,已成为诸多品牌客户触达目标用户.实现品牌营销诉求的强力助推器.小红书开屏广告的投放策略,既要满足客户对保量和效果的诉求,还要兼顾对用户体验的影响.由此我们配套 ...
- 2017 到 2018，PWA 技术到底经历了什么
高磊 OpenWeb开发者 1周前 在 GMTC 2018 全球大前端会议举办期间,高磊担任主题演讲嘉宾,并担任 PWA 专场出品人.作为有近 10 年 Web 前端技术开发.管理经验的开发者,高磊一 ...
- 本地笔记软件_到底哪个笔记软件适合你
比较1 比较2 比较3 我个人选笔记软件的原则: 1.必须可以本地保存数据库. 所以有道云这一类的全部否决,不是说和它绝缘,会用它,只是作为辅助.拒绝云笔记的原因是,稍微有些年纪的人应该都知道,你生命 ...
- 微信o2o的本地体验——王府井书店6层拍卖会上微信活动体验
第一次去王府井目的很单纯,就是体验繁华地方的微信营销商业模式. 没有计划,就是去发现看看有木有多地发现和体验. 王府井地铁站下了地铁1号线从B出口出来,就能看到很大的金色的大字"王府井&qu ...
- 遇到一位贵人是什么体验，贵人到底有多重要？
亲身经历. 2007年,我做生意失败,欠下了10多万元的债务,只好去了深圳打工,在一家电子厂当业务员,每个月拿着1500多元的工资,内心备受煎熬. 后来,我遇到了一位贵人,是个37岁的大姐,在她的帮助 ...
- 到底有多卷? CVPR 2022 + ECCV 2022 论文作者统计
点击下方卡片,关注"CVer"公众号 AI/CV重磅干货,第一时间送达 点击进入-> CV 微信技术交流群 作者:ZzZZzzZZZzzz | 已授权转载(源:知乎)编辑: ...
- Multipass，多平台本地轻量级Linux体验！
Multipass 是由Ubuntu官方提供,在Linux,MacOS和Windows上快速生成 Ubuntu虚拟机 的工具.它提供了一个简单但功能强大的CLI,可让我们在本地快速进入Ubuntu系统 ...
- NSUserDefaults的用法（轻量级本地数据存储）
NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefa ...
最新文章
- .net应用程序如何批上XP的外衣?
- 每日一皮：啥一文理解TCP和UDP的区别！这张图才是最屌的！
- matlab编译错误怎么查找,matlab - Matlab mex文件编译错误-“未启用SSE2指令集” - 堆栈内存溢出...
- LeetCode Pow(x, n)
- microsoft word中在公式后插入可交叉引用的公式编号
- 速卖通运营之商品结构及分层逻辑
- 调用oracle常用方法,区分Oracle和SQL Server常用函数调用方法
- 交叉编译 for arm-linux-gcc... no,QT4.8.6、tslib库移植到arm上配置出错！求大神指点
- Android 简单闪屏
- 起II6.0中使用windows2003自带的虚拟主机管理系统
- Linux 系统中用户切换（su user与 su - user 的区别）
- jeb 高级教程之动态调试
- RFC4568规范：SDP协商SRTP密钥
- 教你制作高逼格的技术分享Keynote(PPT)
- Wait for me和waitting for me有什么区别？
- gg修改器偏移量修改_烧饼修改器地址偏移计算器功能使用说明
- （社会舆情） 小世界网络，规则网络，随机网络
- 电商行业如何投放UC头条信息流广告？UC广告投放的扣费模式
- 2022年武汉江岸区助企惠企政策汇总，附奖励补贴标准及申报条件
- 【SQL基础】SQL常用函数简要解析