2019前端必会黑科技之PWA

一、背景

从2018年到现在，作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如

1. 昂贵开发成本

2. 软件上线，版本更新都需要发布到不同的商店，并通过审核

有些APP你可能使用频率特别少，但是你还是不得不去商店中下载庞大安装包，或者可能一段时间不使用以后，随着版本的更新，你也不得不去重新更新并安装

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% 的用户会放弃等待。页面展现之后，用户期望有平滑的体验，过渡动画和快速响应。

快速

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

沉浸式体验

Web应用程序中，可以通过manifest.json控制应用程序的显示方式和启动方式，指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向，甚至可以指定是否显示浏览器Chrome。
根据官方的介绍，不难看出，pwa的目标直指原生app，那接下来我们就来了解下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文件配置，使得可以直接添加到手机的桌面上。

天生优势：

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的时代即将到来，

交流

接下来，我会分享如何使用
Vue + Vue CLI 3.x + ts + Quasar 来搭建并快速开发一个PWA