《浏览器原理》学习笔记Day62

渐进式网页应用（PWA）：它究竟解决了Web应用的哪些问题？

浏览器三大进化路线：

• 第一个是应用程序 Web 化；
• 第二个是 Web 应用移动化；
• 第三个是 Web 操作系统化；

PWA，全称是 Progressive Web App，翻译过来就是渐进式网页应用。根据字面意思，它就是“渐进式 +Web 应用”。对于 Web 应用很好理解了，就是目前我们普通的 Web 页面，所以 PWA 所支持的首先是一个 Web 页面。至于“渐进式”，就需要从下面两个方面来理解。

• 站在 Web 应用开发者来说，PWA 提供了一个渐进式的过渡方案，让 Web 应用能逐步具有本地应用的能力。采取渐进式可以降低站点改造的代价，使得站点逐步支持各项新技术，而不是一步到位。
• 站在技术角度来说，PWA 技术也是一个渐进式的演化过程，在技术层面会一点点演进，比如逐渐提供更好的设备特性支持，不断优化更加流畅的动画效果，不断让页面的加载速度变得更快，不断实现本地应用的特性。

Web 应用 VS 本地应用

什么是 Service Worker
在 2014 年的时候，标准委员会就提出了 Service Worker 的概念，它的主要思想是在页面和网络之间增加一个拦截器，用来缓存和拦截请求。整体结构如下图所示：

Service Worker 的设计思路

1. 架构
   通过前面页面循环系统的分析，我们已经知道了 JavaScript 和页面渲染流水线的任务都是在页面主线程上执行的，如果一段 JavaScript 执行时间过久，那么就会阻塞主线程，使得渲染一帧的时间变长，从而让用户产生卡顿的感觉，这对用户来说体验是非常不好的。
   为了避免 JavaScript 过多占用页面主线程时长的情况，浏览器实现了 Web Worker 的功能。
   “让其运行在主线程之外”就是 Service Worker 来自 Web Worker 的一个核心思想。
2. 消息推送
   消息推送也是基于 Service Worker 来实现的。

3. 安全
   基于 Web 应用的业务越来越多了，其安全问题是不可忽视的，所以在设计 Service Worker 之初，安全问题就被提上了日程。

   关于安全，其中最为核心的一条就是 HTTP。对 Service Worker 采用 HTTPS 协议，因为采用 HTTPS 的通信数据都是经过加密的，即便拦截了数据，也无法破解数据内容，而且 HTTPS 还有校验机制，通信双方很容易知道数据是否被篡改。
   所以要使站点支持 Service Worker，首先必要的一步就是要将站点升级到 HTTPS。

此文章为4月Day23学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪