PWA渐进式增强WEB应用

PWA是Progressive Web App的英文缩写,是渐进式增强WEB应用, 是Google新开发的web技术。目的就是在移动端利用提供的标准化框架,在网页应用中实现和Native app原生应用相近的用户体验的渐进式网页应用。它的安全,性能,用户体验的确明显领先于其他互联网载体,各大前端厂商争先恐后进行涉足,布局。

PWA的优点

下面是英文介绍

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

1. 可靠——即时加载,即使在不确定的网络条件下也不会受到影响。 当用户从主屏幕启动时,service work可以立即加载渐进式Web应用程序,完全不受网络环境的影响。service work就像一个客户端代理,它控制缓存以及如何响应资源请求逻辑,通过预缓存关键资源,可以消除对网络的依赖,确保为用户提供即时可靠的体验。

pwa优势

2. 快速
据统计,如果站点加载时间超过 3s,53% 的用户会放弃等待。页面展现之后,用户期望有平滑的体验,过渡动画和快速响应。

pwa优势

3. 沉浸式体验—— 感觉就像设备上的原生应用程序,具有沉浸式的用户体验。
渐进式Web应用程序可以安装并在用户的主屏幕上,无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验,甚至可以重新与用户接触的Web推送通知。

pwa优势

还有其他一些优势

1. 无需安装,无需下载,只要你输入网址访问一次,然后将其添加到设备桌面就可以持续使用。
2. 发布不需要提交到app商店审核
3. 更新迭代版本不需要审核,不需要重新发布审核
4. 现有的web网页都能通过改进成为PWA, 能很快的转型,上线,实现业务、获取流量
5. 不需要开发Android和IOS两套不同的版本

当然它不是十全十美的产品,也存在一些不足的地方

1. 游览器对技术支持还不够全面, 不是每一款游览器都能100%的支持所有PWA
2. 需要通过第三方库才能调用底层硬件(如摄像头)
3. PWA现在还没那么火,国内一些手机生产上在Android系统上做了手脚,似乎屏蔽了PWA, 但是相信当PWA火起来以后,这个问题就不会是问题

Web应用程序中,可以通过manifest.json控制应用程序的显示方式和启动方式,指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向,甚至可以指定是否显示浏览器Chrome。
根据官方的介绍,不难看出,pwa的目标直指原生app,那接下来我们就来了解下PWA到底是个怎么样的何方神圣。

PWA核心功能

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

PWA中包含的核心功能及特性如下:
1.Web App Manifest
2.Service Worker
3.Cache API 缓存
4.Push&Notification 推送与通知
5.Background Sync 后台同步
6.响应式设计

PWA如何弥补和原生App的差距

性能差异
PWA使用app Shell架构模型
1. 快速加载
2. 尽可能使用较少的数据
3. 使用本机缓存中的静态资产
4. 将内容与导航分离开来
5. 检索和显示特定页面的内容(HTML、JSON 等)
6. 缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容,但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时,应用会自动显示最新版本。无需在使用前下载新版本。
为了保证首屏的加载,在内容请求完成之前,可以优先保证 App Shell 的渲染,做到和 Native App 一样的体验,App Shell 是 PWA 界面展现所需的最小资源。

无法离线使用
Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技术实现离线加载和缓存

数据更新
Background Sync 后台同步技术

无法实现推送
Push&Notification 实现推送与通知

无法添加到桌面
通过manifest.json文件配置,使得可以直接添加到手机的桌面上。

PWA的发展趋势

2016年, PWA在google正式落地,基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了
随着 iOS 11.3 的发布,iOS正式开始支持PWA
Windows Edge 支持PWA

随着越来越多的游览器相继的对PWA做出了支持和优化,各大前端厂商已经争先恐后进行涉足布局了

2020.04.14消息,Chrome OS 开始使用 PWA 替代部分 Android App,原文在这https://www.cnbeta.com/articles/tech/967105.htm

Chrome OS 最近正开始尝试用渐进式 Web 应用程序(Progressive Web Apps,以下简称 PWA)来替代原先的 Android 应用程序。渐进式 Web 应用程序是依靠普通网页或网站架构起来的网络应用程序,但同时又以传统移动应用程序的形式来呈现,也因此保有原生体验,能够将浏览器提供的功能与移动设备的体验优势相结合。

对于许多 Chromebook 用户来说,这大概是个好消息。在某些情况下,PWA 比 Android 同类产品速度更快、功能更强大。并且,PWA 所占用的储存空间和运行内存都较少。

Chrome OS 上的某些 Android 应用程序体验算不上好,谷歌多年来一直在努力优化可在平板电脑大小的屏幕上运行的 Android 应用程序。不过,谷歌现在决定尝试用 PWA 来直接替代它们。

实际上,PWA 此前也在 Play 应用商店中有提供,区别在于,现在它们成为了默认版本。也就是说,当你下载应用程序时,会自动被识别到系统为 Chrome OS,并开始安装 PWA 而不是 Android 版本。

外媒 Chrome Unboxed 发现,首个被替代的应用程序是 Twitter。Chrome OS 应用程序平台的技术主管 Dominick Ng 透露,下一个将会是 YouTube。

Dominick 表示,这是他“完成过的最具挑战性和满意度的工作之一”。他还贴出了一段关于介绍 PWA 的演讲视频。谷歌近期似乎对 PWA 较为上心,今年年初以来甚至开了一个专题页面来对 PWA 展开介绍。那么,这种趋势会否是应用程序的未来呢?

参考资料https://www.jianshu.com/p/098af61bbe04

posted @ 2020-05-15 10:30  ytkah  阅读(995)  评论(0编辑  收藏  举报
IPO发家故事 网址导航 gg N / G Sitemap

部分内容来源于网络,如有版权问题请联系删除