1、背景
从2018年到如今，做为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，做为如今最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其余互联网载体，可是原生App始终有一些缺点，好比css
1. 昂贵开发成本前端
2. 软件上线，版本更新都须要发布到不一样的商店，并经过审核web
有些APP你可能使用频率特别少，可是你仍是不得不去商店中下载庞大安装包，或者可能一段时间不使用之后，随着版本的更新，你也不得不去从新更新并安装json
PWA技术的做为web应用，其天生优点能很好的解决以上的问题。浏览器
二. 什么是PWA
PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式加强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。缓存
引用官方介绍：安全
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就像一个客户端代理，它控制缓存以及如何响应资源请求逻辑，经过预缓存关键资源，能够消除对网络的依赖，确保为用户提供即时可靠的体验。架构
2. 快速
据统计，若是站点加载时间超过 3s，53% 的用户会放弃等待。页面展示以后，用户指望有平滑的体验，过渡动画和快速响应。app
3. 沉浸式体验—— 感受就像设备上的原生应用程序，具备沉浸式的用户体验。
渐进式Web应用程序能够安装并在用户的主屏幕上，无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验，甚至能够从新与用户接触的Web推送通知。
Web应用程序中，能够经过manifest.json控制应用程序的显示方式和启动方式，指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向，甚至能够指定是否显示浏览器Chrome。
根据官方的介绍，不难看出，pwa的目标直指原生app，那接下来咱们就来了解下PWA究竟是个怎么样的何方神圣。
三. 核心功能
PWA并非单指某一项技术，你更能够把它理解成是一种思想和概念，目的就是对标原生app，将Web网站经过一系列的Web技术去优化它，提高其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app同样的感受。
PWA中包含的核心功能及特性以下：
- Web App Manifest
- Service Worker
- Cache API 缓存
- Push&Notification 推送与通知
- Background Sync 后台同步
- 响应式设计
四. 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文件配置，使得能够直接添加到手机的桌面上。
天生优点：
1. 无需安装，无需下载，只要你输入网址访问一次，而后将其添加到设备桌面就能够持续使用。
2. 发布不须要提交到app商店审核
3. 更新迭代版本不须要审核，不须要从新发布审核
4. 现有的web网页都能经过改进成为PWA， 能很快的转型，上线，实现业务、获取流量
5. 不须要开发Android和IOS两套不一样的版本
劣势：
1. 游览器对技术支持还不够全面， 不是每一款游览器都能100%的支持全部PWA
2. 须要经过第三方库才能调用底层硬件（如摄像头）
3. PWA如今还没那么火，国内一些手机生产上在Android系统上作了手脚，彷佛屏蔽了PWA, 可是相信当PWA火起来之后，这个问题就不会是问题
五. PWA的发展趋势
2016年， PWA在google正式落地，基于 Chromium 的浏览器 Chrome 和 Opera 已经彻底支持 PWA 了
随着 iOS 11.3 的发布，iOS正式开始支持PWA
Windows Edge 支持PWA
随着愈来愈多的游览器大厂，相继的对PWA作出了支持和优化，想必PWA的时代即将到来
来源：https://www.jianshu.com/p/098af61bbe04