PWA详解 Love The Way You Lie 2022-09-10 14:18 341阅读 0赞 PWA(Progressive Web App,渐进式网页应用,渐进式接近原生app的web app)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。 PWA不能包含原生OS相关代码。PWA**仍然是网站**,只是在缓存、通知、后台功能等方面表现更好。Electron程序相当于包裹OS原生启动器(Launcher)的网站,未来,许多Electron程序可能转化为PWA。 ### 1. 概念 ### PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。 PWA 全称为 Progressive Web App,中文译为渐进式 Web APP,其目的是通过各种 Web 技术实现与原生 App 相近的用户体验**(用户体验逐渐接近原生App)**。 纵观现有 Web 应用与原生应用的对比差距,如离线缓存、沉浸式体验等等,可以通过已经实现的 Web 技术去弥补这些差距,最终达到与原生应用相近的用户体验效果。 ### 2. 特性 ### * 安全可靠 使用 Service Work 技术实现即时下载,当用户打开应用后,页面资源的加载不再完全依赖于网络,而是使用 Service Work 缓存离线包存在本地,确保为用户提供即时可靠的体验。 * 访问更快 首屏可以部署在服务端,节省网页请求时间,加载速度更快,拥有更平滑的动态效果和快速的页面响应。 * 响应式界面 支持各种类型的终端和屏幕。 * 沉浸式体验 在支持 PWA 的浏览器和手机应用上可以直接将 Web 应用添加到用户的主屏幕上,无需从应用商店下载安装。从主屏幕上打开应用之后,提供沉浸式的全屏幕体验。 ### 3. 功能 ### * 手机应用配置(Web App Manifest) 可以通过 manifest.json 文件配置,使得可以直接添加到手机的桌面上。 * 离线加载与缓存(Service Worker+Cache API ) 可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。 * 消息推动与通知(Push&Notification ) 实现实时的消息推送与通知 * 数据及时更新(Background Sync ) 后台同步,数据及时更新 ### 4. 优势与劣势 ### **优势:** 1. 超简单的安装和下载。 以谷歌发布的 squoosh.app 为例。 PC 桌面版: 方式1:在浏览器输入并打开 [squoosh.app][] 之后。可以点击右上角【Install】进行安装。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center] 方式2:可以点击右上角三个点的图标,然后选择【安装Squoosh】进行安装。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 1] 安装之后就可以在桌面看到快捷方式的图标,直接打开就可以拥有与原生应用媲美的沉浸式体验。 ![在这里插入图片描述][20200829112024492.png_pic_center] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 2] 手机移动版: 1. 首先在浏览器中输入并打开网址“squoosh.app”。 2. 然后点击向上的图标,在弹出的选项中选择“添加到主屏幕”。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_10_color_FFFFFF_t_70_pic_center] 1. 在弹出的【添加到主屏幕】编辑对话框中可以修改应用名称。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 3] 1. 点击完成或者【添加】就可以将应用添加到主屏幕,下次直接打开就可以使用了。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 4] 1. 发布迭代不需要第三方平台审核。 我们都知道发布一个苹果应用是需要提交 App Store 商店进行审核,通过了方可发布成功的。安卓应用也是一样。并且更新迭代版本的时候也需要审核,还需要提交一些功能说明,图片等资料。但是网页版的应用就完全不需要这个审核过程,直接部署服务器就可以使用。 2. 渐进式 现有的 Web 项目可以通过 PWA 的几个核心技术点一步步转型成一个完整的 PWA 应用。 **劣势:** 1. 因为推出的时间不长,所以现有浏览器的支持还不够全面, 不是每一款浏览器都能100%的支持所有的 PWA 特性。 2. 对于底层硬件的调用还是需要依赖第三方库才能实现(如打开摄像头,实现语言功能等等)。 3. PWA 现在还没那么火,国内一些手机生产商在 Android 系统上做了手脚,似乎屏蔽了 PWA, 但是等 PWA 真正流行起来之后,相信这个问题就不会存在了。 ### 5. 发展 ### * 谷歌 基于 Chromium 开发的浏览器 Chrome 和 Opera 已经完全支持 PWA 。 这里说一下 Chromium 和 Chrome 的区别。 Chromium 是谷歌的开源项目,由开源社区去维护。拥有众多的版本包括Windows、Mac、Linux。国内所有的 “双核浏览器”,都是基于 Chromium 开发的,而我们下载的 Chromium 浏览器是其源码未经修改的直接编译版本。 Chrome 是基于 Chromium 开发的,是闭源的,跨平台多端支持,特性更加丰富。 Google上线了两个新网站,web.dev 和 squoosh.app 都支持 PWA( web.dev 是宣传和推广 PWA 的,解释了 PWA 的几个关键技术。squoosh.app 是一个图片压缩工具) 。 * 微软 微软将 PWA 带到了 Windows 10。同时 Windows Edge(windows 10 之后微软推出的浏览器,比 IE更流畅、外观 UI 更舒适) 也支持 PWA。 * IOS 随着 iOS 11.3 的发布,iOS 正式开始支持 PWA,可以将它放在苹果手机主屏。 * Android Twitter 和 Flipboard 都推出了 PWA,可以将它放在安卓手机主屏。 * 国内 国内支持 PWA 的应用有微博、淘宝、豆瓣和饿了么。 随着越来越多的浏览器大厂对 PWA 做出了支持和优化,PWA 的时代已经不远了。 [squoosh.app]: https://squoosh.app/ [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/871d53cf82f54272bf304ebc79751734.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/40e9e9fe7adb4395bc07d24310bf604f.png [20200829112024492.png_pic_center]: /images/20220829/14d5d928f6ca4a53a1d1399c562d3097.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/2ecde848be5a4bd680317812796bfa40.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_10_color_FFFFFF_t_70_pic_center]: /images/20220829/8edf3078a35748ca9dc651d07790f409.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220829/adbb58b242194a47b8f61759bef7e516.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220829/23f4c420161e4ba9a840f9c5d2490bd5.png
还没有评论,来说两句吧...