PWA

PWA是Progressive Web App的英文缩写, 翻译过来就是渐进式增强WEB应用, 是Google 在2016年提出的概念,2017年落地的web技术。
 
目的是在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。
 
优势:

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

特点:

1、 可靠——即时加载,即使在不确定的网络条件下也不会受到影响。

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

2、快速

3、沉浸式体验—— 感觉就像设备上的原生应用程序,具有沉浸式的用户体验。

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

PWA中包含的核心功能及特性:

  1. Web App Manifest
  2. Service Worker
  3. Cache API 缓存
  4. Push&Notification 推送与通知
  5. Background Sync 后台同步
  6. 响应式设计

PWA弥补与原生APP的差距方式:

  1、PWA使用app Shell架构模型

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

  2、离线使用

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

  3、数据更新

Background Sync 后台同步技术

  4、消息推送

Push&Notification 实现推送与通知

  5、添加到桌面

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

  

快速上手 pwa 应用:https://blog.csdn.net/sd19871122/article/details/105476669/

           https://www.jianshu.com/p/0dd50715fa9d

           https://www.cnblogs.com/fundebug/p/pwa-tutorial.html

原文地址:https://www.cnblogs.com/zhou-xm/p/13433645.html