性能优化黑科技：Progressive Web Application（PWA）

1.什么是PWA

Progressive Web Application，全称“渐进式网页应用”，是谷歌主导的一种新时代网页（应用）

简单的理解，就是网页，可以通过某种方式达到离线使用，还可以拥有类似其他手机app一样拥有一个logo，名称，启动页面等等。

PWA的特点主要有一下

• 可靠 - 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现
• 用户体验 - 快速响应，具有平滑的过渡动画及用户操作的反馈
• 用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验

2.PWA的核心技术

Web App Manifest
首先Web App的使用是需要依赖浏览器的，所以说在手机上如果用户想要浏览某一个页面的话，是需要先打开浏览器，然后在输入网址进行浏览，这个流程是十分的繁琐，Web App Manifest 可以帮助我们将页面像手机app一样直接放置在桌面，并且定义它的logo，名称，启动页面等等。PWA 并不是一个快捷方式，而是能够在系统中作为一个独立的 App 存在的，用户可以设置它的权限，清除它的缓存
Service Work
在PWA中Service Work是非常重要的，如果没有它，PWA 就像没有了动力，无法寸进。
Service Worker 的特点，如下：

• 一个特殊的 worker 线程，独立于当前网页主线程，有自己的执行上下文
• 一旦被安装，就永远存在，除非显示取消注册
• 使用到的时候浏览器会自动唤醒，不用的时候自动休眠
• 可拦截并代理请求和处理返回，可以操作本地缓存，如 CacheStorage，IndexedDB 等
• 离线内容开发者可控
• 能接受服务器推送的离线消息
• 异步实现，内部接口异步化基本是通过 Promise 实现
• 不能直接操作 DOM
• 必须在 HTTPS 环境下才能工作

离线通知
正是有了 Service Worker，其他功能才能发挥更大的作用，例如离线通知。
离线通知是指在用户没有打开 PWA 站点的情况下，也能接受到服务器推送过来的通知并展现给用户，其中包括了两部分，离线推送和展现通知，分别是 Web Push 和 Notification API。
浏览器在接受到对应的消息服务中心推送过来的离线消息时，会唤醒对应站点注册的 Service Worker，开发者可以在 Service Worker 文件中处理接受到的请求，显示通知
App Shell 和骨架屏
App Shell 是 PWA 强调的一个非常重要的设计理念，它能够缩短用户进入页面时的白屏时间，让用户一进入 PWA 就能快速看到 PWA 的整体框架，就和 Native App 一样。从概念上讲，App Shell 是 PWA 界面展示所需的最小资源集合，即让页面能够正常运行起来的最小的 HTML、CSS 和 JavaScript 等静态资源集，每个页面都需要加载这一部分资源。利用 Service Worker 把这部分资源缓存在本地，就能够在打开 PWA 时不需要从服务器端获取这部分资源，从而能够瞬间渲染出页面框架，不仅提升了首屏的速度，还减小了站点流量的消耗。
骨架屏（App Skeleton），也是提升首屏体验的有效方式。它的原理是在真实内容渲染完成之前，使用一些能够快速渲染的静态图片/样式/色块/部分真实内容进行占位，让用户对真实内容区域有心理预期。App Shell 和骨架屏都能提升首屏体验。App Shell 和骨架屏在提升首屏体验上发挥了重要作用