共计 9484 个字符，预计需要花费 24 分钟才能阅读完成。
如果我说，咱们要探讨一个 2016 年被提出、2017 年落地、至今在国内仍可算籍籍无名的概念，你是不是会感觉这没有什么意义？
互联网倒退了这么久，咱们记住了“Native App”、“小程序”、“快利用”、“App clips”、“Hybrid App”、“Web App”，仿佛独独没有 PWA，但 PWA 及其理念却始终在推动着前端畛域后退。
PWA 是什么？
仿佛 PWA 对很多人来说是如此生疏，PWA 对前端开发者来说却又是无处不在。
身边的 PWA
Lighthouse
对前端开发者来说，Lighthouse 是一个很相熟的网站性能诊断工具，在这里，咱们总是能够看到 PWA（Progressive Web App）的身影：
PWA 书籍
又或者，你曾无意间看到这些书籍或者材料：
- 《PWA 利用实战》
开发者相干
啊哈，这些，都没看到过？那你总是拜访过 Google Developers 吧，或者总看见过这样一个图标：
能够认为这个图标在哪里，一个 PWA 利用就在哪里，点击这个按钮，能够 将 PWA 利用装置到桌面。于是，在线 IDE StackBlitz.com 呈现了，字节外部应用的 Goofy Studio PWA 呈现了：
谷歌的摸索
然而，动不动就讲开发，真的太卷了，说说那些更有意思的 PWA 利用吧。
2018 Google Chrome 开发者峰会上，Google 公布了 Squoosh，这是一个开源的图片压缩渐进式 Web 利用（PWA），它同时也是古代 Web 技术的一个理论展现，谷歌实验室公布 Squoosh 的次要指标是演示高级 web 应用程序如何利用古代技术在 web 浏览器中提供高性能的体验。
PROXX 是谷歌 Chrome 团队推出的一款 JavaScript 游戏。该我的项目展现了如何开发疾速平滑的 Web 利用，这些利用在多种平台和输出设施上提供了相近的用户体验。Proxx 我的项目的独到之处在于它次要针对的是 智能性能机。
智能性能机是高价智能机代替设施，在印度和非洲广为应用。绝对于智能机，智能性能机的硬件非常简单。它不反对触控，屏幕绝对较小，大多采纳 240×320 分辨率的 QVGA 屏，CPU 的解决能力也绝对较弱。
这是一款 JavaScript 游戏扫雷游戏，摸鱼时能够玩儿玩儿，如果可怜被老板撞见，你就说在钻研 PWA 嘛。
微博 Lite
微博 Lite，我置信，这，应该是 PWA 离你最近的一次：
我猜你肯定不会问：既然 PWA 利用还是蛮宽泛的，那，它肯定很弱小吧？
蒽，强不弱小看看数据就晓得了。
弱小的生产力
- 2017 年的一篇技术博文显示，堪称图片版的 Twitter 的 Pinterest 将他们的挪动网站重建为 PWA，外围参与度减少了 60%，用户产生的广告支出减少了 44%，破费的工夫也减少了 40%；
- 2016 年初 AliExpress 开始与 Google 团队单干，推动 PWA 技术在 AliExpress 上的落地；后果是十分令人惊奇和称心的。AliExpress 发现新用户的转换率减少了 104%。在 Safari 的转化率也回升了 82%。当初用户每次拜访的页面数量是原先的两倍，也大大晋升了用户浏览页面的工夫；
- 相似这样的胜利案例不可胜数，为了不便你间接丢到老板脸上，我梳理了这个图 😂：
我感觉你能够通知他：这些不仅仅是数字，这些都是 PWA 的胜利案例。
老板说：这些和墙内的你我，间隔能有多近？
没事，离咱们最近的 PWA 利用将在你的手上诞生。
PWA 诞生的条件
咱们应该都深有体会，Native app 体验的确很好，下载到手机上之后入口也不便。但它的优缺点很显著:
而 web 网页开发成本低，网站更新时上传最新的资源到服务器即可，用手机带的浏览器关上就能够应用。然而除了体验上比 Native app 还是差一些，还有一些显著的毛病：
在这些因素的推动下，Web 利用渐进式靠近原生 App的概念 —— PWA 诞生了。
PWA 简介
什么是渐进式
PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，那么，什么是渐进式呢？我感觉渐进式有两个层面的意思：
一是通过各种 Web 技术实现与原生 App 相近的用户体验，即Web 利用渐进式靠近原生 App。
二是因为在过后的背景下，一些浏览器临时不反对，能够利用 PWA 相干技术，给反对 PWA 的浏览器用户带来更好的体验。
另外，兴许你听过 渐进加强 （Progressive Enhancement）和 优雅降级（Graceful Degradation）这两个概念。
渐进加强：针对低版本浏览器进行构建页面，实现根本的性能，而后再针对高级浏览器进行成果、交互、追加性能以达到更好的体验。
优雅降级：构建站点的残缺性能，而后针对浏览器测试和修复。比方一开始应用 CSS3 的个性构建了一个利用，而后逐渐针对各大浏览器进行 hack 使其能够在低版本浏览器上失常浏览。
PWA 实质上是 WEB 利用，所以，我感觉这种“渐进式”其实是一种渐进加强的理念。
PWA 的概念
中武官网解释：采纳所有正确组成因素的网站。
PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，寰球顶级的浏览器厂商，Google、Microsoft、Apple 曾经全数发表反对 PWA 技术。
纵观现有 Web 利用与原生利用的比照差距，如离线缓存、沉迷式体验等等，能够通过曾经实现的 Web 技术去补救这些差距，最终达到与原生利用相近的用户体验成果。
一个 PWA 利用首先是一个网页, 能够通过 Web 技术编写出一个网页利用. 随后增加上 App Manifest 实现增加至主屏幕，通过 Service Worker 来实现离线缓存和音讯推送等性能。
Web Application Manifest，即通过一个清单文件向浏览器裸露 web 利用的元数据，包含名称、icon 的 URL 等，以备浏览器应用，比方在增加至主屏或推送告诉时裸露给操作系统，从而加强 web 利用与操作系统的集成能力。
咱们 原有的整个 Web 利用模型，都是构建在「用户能上网」的前提之下的，所以一离线就只能玩小恐龙了。其实，对于「让 web 利用离线执行」这件事，最早能够追溯到 2007 年的 Google Gears：为了让自家的 Gmail、Youtube、Google Reader 等 web 利用能够在本地存储数据与离线执行，Google 开发了一个浏览器拓展来加强 web 利用。Google Gears 反对 IE 6、Safari 3、Firefox 1.5 等浏览器；要晓得，那一年 Chrome 都还没出世呢。
Gears，前身为 Google Gears，是由 Google 提供的已停产的实用软件，用于通过向 Web 浏览器增加离线存储和其余附加性能来创立更弱小的 Web 应用程序。Gears 是在没有可比替代品的时候构思的，起初，Gears 被终止，取而代之的是最终风行 的标准化 HTML5 办法。在 Gears API 中，咱们通过向 LocalServer 模块提交一个缓存文件清单来实现离线反对。
Service Worker 是一个可编程的 Web Worker，它就像一个位于浏览器与网络之间的客户端代理，能够拦挡、解决、响应流经的 HTTP 申请；配合随之引入 Cache Storage API，你能够自在治理 HTTP 申请文件粒度的缓存，这使得 Service Worker 能够从缓存中向 web 利用提供资源，即便是在离线的环境下。
PWA 实现
实现
一个简略的 PWA demo 很简略，新建我的项目目录，而后：
touch index.html
touch sw.js
npm install serve -g之后进行简略的 html 和 sw.js 文件的编写，最初通过 manifest.json 实现增加到桌面性能，残缺代码能够查看这里。
// manifest.json
{
"name": "Progressive Web App",
"short_name": "PWA",
"description": "Progressive Web App.",
"icons": [
{
"src": "/icon.png",
"sizes": "288x288", // 这里须要分外留神图片的尺寸，如果图片有问题，调试页面 Manifest 里会给你提醒
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#B12A34",
"background_color": "#B12A34"
}示例 demo：
通过对 manifest.json 进行相应配置，能够实现以下性能：
App Shell 模型
另外，我感觉有必要介绍一下的是 App Shell 模型。
App Shell 架构是构建 Progressive Web App 的一种形式，这种利用能牢靠且即时地加载到您的用户屏幕上，与本机利用类似。
App“shell”是 反对用户界面所需的最小的 HTML、CSS 和 JavaScript，如果离线缓存，可确保在用户反复拜访时提供即时、牢靠的良好性能。这意味着并不是每次用户拜访时都要从网络加载 App Shell，只须要从网络中加载必要的内容。
对于应用蕴含大量 JavaScript 的架构的单页利用来说，App Shell 是一种罕用办法。这种办法依赖渐进式缓存 Shell（应用 Service Worker 线程）让利用运行，接下来，为应用 JavaScript 的每个页面加载动静内容。App Shell 非常适合用于在没有网络的状况下将一些初始 HTML 疾速加载到屏幕上。
从微博 Lite 看 PWA
装置 PWA：
装置后，PWA 利用就会呈现在桌面 /Chrome 利用外面：
从下图能够看出，点击桌面图标关上后，咱们能够抉择卸载 PWA，图标将会从桌面移除；同时，咱们还能够发现，微博 Lite 除了缓存图片、JS、CSS 等动态资源外，也会缓存接口：
当咱们将网络设置成离线时，刷新页面，仍然能够持续浏览页面上上次加载过的信息，晋升用户体验：
PWA 的劣势与劣势
在这些存在的问题外面，简略介绍一下摩尔定律。
集体认为，摩尔定律是芯片畛域的 OKR。摩尔在 1965 年文章中指出，芯片中的晶体管和电阻器的数量每年会翻番，起因是工程师能够一直放大晶体管的体积。这就意味着，半导体的性能与容量将以指数级增长，并且这种增长趋势将持续延续下去。1975 年，摩尔又修改了摩尔定律，他认为，每隔 24 个月，晶体管的数量将翻番。
晶体管数量翻倍带来的益处能够总结为：更快，更小，更便宜。依据摩尔定律，芯片设计师的次要工作便是放大晶体管的大小，而后让芯片可能包容越多的晶体管。晶体管的减少能够让设计师为芯片增加更多的性能，比方 3D 显卡，从而节约老本。
能够看出，摩尔定律是和咱们书本上看到的公式、定理存在很大区别的，它更多的是一个经验总结，是芯片畛域自驱的 OKR。
如果说一开始人们抱怨手机内存和流量资费的限度，而不想装置太多的 App，依据摩尔定律，当初的手机内存与硬件都在晋升，运营商资费下调。这 使得 PWA 最后得以呈现的根基开始波动。所以，PWA 当初国内面临的处境即：用户不晓得，也不会用，开发者不见得反对，也不如小程序敌对。
只管有上述的一些毛病，PWA 技术依然有很多能够借鉴和应用的点：
- Service Worker 技术实现离线缓存，能够将一些不常常更改的动态文件放到缓存中，晋升用户体验。
- Service Worker 实现音讯推送，应用浏览器推送性能，吸引用户
- 渐进式开发，只管一些浏览器临时不反对，能够利用上述技术 给应用反对浏览器的用户带来更好的体验。
当然，在告诉这一块儿，抛开 PWA 不谈，浏览器告诉 API Notification 也是一个不错的抉择。
Javascript Workers
咱们晓得，JavaScript 是围绕单线程的概念设计的，不足实现像原生 App 那样的多线程模型所需的性能，比方共享内存。
浏览器应用单个线程（主线程）来运行网页中的所有 JavaScript、执行渲染页面和执行垃圾收集等工作。运行过多的 JavaScript 代码会阻塞主线程，提早浏览器执行这些工作并导致蹩脚的用户体验。
在 Web 中能够通过应用 Workers 在后盾线程中运行脚本来实现相似多线程的模式，容许它们执行工作而不烦扰主线程。Workers 是运行在独自线程上的整个 JavaScript 作用域，没有任何共享内存。
一般来说，Worker 能够让脚本在浏览器主线程之外的独自的线程上运行。如果你想要在 HTML 文档中援用一个 <script> 标签的典型的 JavaScript 文件，它会运行在主线程上。如果主线程上有太多的计算，会拖慢网站的速度，造成交互卡顿和响应提早。Web worker，Service worker 和 Worklet 都是让脚步运行在独自的线程上的。
参考资料：Web workers vs Service workers vs Worklets
Web worker
Web workers 是最罕用的 worker 类型。它不像另外两种，它们除了运行在主线程外的个性外，没有一个非凡的利用场景。所以，Web worker 能够用于缩小主线程上大量的线程流动。
举荐浏览：Workers overview。
一个很好的例子是前文提到的图像处理 Web 应用程序 Squoosh，它 应用 Web Worker 来进行图像处理工作，让主线程可供用户与应用程序进行不中断的交互。
PROXX 也应用了 Web worker 和 Service Worker 相干技术，具体可参考 Proxx: Building Fast Web Applications。
Web Worker 有以下几个应用留神点：
- 同源限度：调配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
- DOM 限度：Worker 线程所在的全局对象，与主线程不一样，无奈读取主线程所在网页的 DOM 对象，也无奈应用 document、window、parent 这些对象。然而，Worker 线程能够应用 navigator 对象和 location 对象。
- 通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能间接通信，必须通过音讯（postMessage）实现。
- 脚本限度：Worker 线程不能执行 alert()办法和 confirm()办法，但能够应用 XMLHttpRequest 对象收回 AJAX 申请。
- 文件限度：Worker 线程无奈读取本地文件，即不能关上本机的文件系统（file://），它所加载的脚本，必须来自网络。
更多应用细节可参考阮一峰的 Web Worker 应用教程
Service worker
Service workers 次要是提供具体的 浏览器和网络 / 缓存间的代理服务，如下图所以：
2014 年，W3C（万维网联盟）颁布了 Service Worker 的相干草案，但真正在生产环境被 Chrome 反对是在 2015 年，比微信小程序要早两年。
下图展现了 Service workers 的生命周期：
而上面这张图则 简直涵盖了 Service workers 所有最重要的知识点：
原图来自 GitHub：service-workers-101
HTTP 缓存与 Service Worker 缓存
可能你会好奇，用 Service Workers 来做缓存？HTTP 缓存它不香吗？咱们能够简略看看这两者的区别：
- HTTP 缓存中，Web 服务器能够应用 Expires 首部来告诉 Web 客户端，它能够应用资源的以后正本，直到指定的“过期工夫”。反过来，浏览器能够缓存此资源，并且只有在无效期满后才会再次查看新版本。
应用 HTTP 缓存意味着你要依赖服务器来通知你何时缓存资源和何时过期（当然，HTTP 缓存管制还包含 cache-control,last-modified,etag 等字段）。 - Service Workers 的弱小在于它们 拦挡 HTTP 申请 的能力，承受任何传入的 HTTP 申请，并决定想要如何响应。在你的 Service Worker 中，能够编写逻辑来决定想要缓存的资源，以及须要满足什么条件和资源须要缓存多久。所有尽归你掌控！（所以，出于平安思考，Service Workers 要求只能由 Https 承载）
注意事项
- Service worker 运行在 worker 上下文（self）–> 不能拜访 DOM（这里其实和 Web Worker 是一样的）；
- 它设计为齐全异步，同步 API（如 XHR 和 localStorage）不能在 service worker 中应用；
- 出于平安考量，Service workers 只能由 HTTPS 承载；
- 某些浏览器的用户隐衷模式，Service Worker 不可用；
- 其生命周期与页面无关（关联页面未敞开时，它也能够退出，没有关联页面时，它也能够启动）。
离线缓存
因为 Service Worker 的呈现，咱们不再尝试离线解决问题，而是让 开发人员本人入手解决缓存问题。通过它能够管制缓存以及如何解决申请。这意味着您能够创立本人的模式。
缓存的模式有很多中，在离线指南中，全面介绍了各种缓存的模式，在实践中，你可能须要依据 URL 和上下文同时应用多种模式。
当然，无论您做了多少缓存，Service Worker 过程都不会应用缓存，除非你通知它何时以及如何应用。下图展现的是缓存优先的示意图：
其余一些缓存模式简略梳理如下：
调试
兼容性
- Service Worker
- manifest
能够看出，兼容性问题最大的其实还是在 manifest.json 的反对上。
Worklet
Worklet 是一个十分轻量级、高度具体的 worker。它。它们使咱们作为开发人员可能连贯到浏览器渲染过程的各个局部（钩子），让开发人员能够拜访渲染管道的底层局部。
当一个 web 页面正在被渲染，浏览器通过很多步骤。在这里咱们须要关注的有四步：Style，Layout，Paint 和 Composite。
在展现网页时，浏览器会执行多个步骤。在这里咱们次要关注四个步骤：Style，Layout，Paint 和 Composite（合成）。
Paint 是浏览器将款式利用于每个元素的中央。与此渲染阶段挂钩的 Worklet 是 Paint Worklet。Paint Worklet 容许咱们创立自定义图片，这个图片能够利用任何 CSS，比方 background-image 属性的值。
要创立一个 Worklet，就像所有 Worker 一样，咱们在咱们的主 javascript 文件中注册它，援用专用的 Worklet 文件。
/* main.js */
CSS.paintWorklet.addModule('myWorklet.js');在咱们的 Worklet 文件中，咱们能够创立自定义图像。该 paint 办法的工作形式与 Canvas API 十分类似。这是一个简略的黑白突变示例。
/* myWorklet.js */
registerPaint(
'myGradient',
class {paint(ctx, size, properties) {var gradient = ctx.createLinearGradient(0, 0, 0, size.height / 3);
gradient.addColorStop(0, 'black');
gradient.addColorStop(0.7, 'rgb(210, 210, 210)');
gradient.addColorStop(0.8, 'rgb(230, 230, 230)');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, size.width, size.height / 3);
}
}
);最初，咱们能够在 CSS 中应用这个新的 Worklet，咱们创立的自定义图像将像任何其余背景图像一样利用。
div {background-image: paint(myGradient);
}除了 Paint Worklet，还有其余的 worklet 能够连贯到渲染过程的其余阶段。Animation Worklet 连贯到 Composite 阶段，而 Layout Worklet 连贯到 Layout 阶段。
总结
Web worker，Service worker 和 worklet 都是将脚本运行在浏览器主线程之外独自的线程中，它们之间的区别是它们所利用的场景和他们的个性。
- Worklet 是浏览器渲染流中的钩子，能够让咱们有浏览器渲染线程中底层的权限，比方款式和布局；
- Service worker 是浏览器和网络间的代理。通过拦挡文档中收回的申请，service worker 能够间接申请缓存中的数据，达到离线运行的目标。
- Web worker 的通常目标是让咱们加重主线程中的密集解决工作。
PWA 倒退与现状
PWA in China
看看 Google 官网宣传较多的 PWA 案例就会发现，FlipKart、Housing.com 来自印度；Lyft、华盛顿邮报来自北美；惟一来自中国的 AliExpress 次要发展的则是海内业务。
因为中国的特殊性，PWA 的前景在肯定水平上比拟乐观：
- 国内较器重 iOS，而 iOS 目前还不反对 PWA。
- 国内的 Android 实为「安卓」，不自带 Chrome 是一，可能还会有其余兼容问题。
- 国内厂商可能并不会像三星那样对推动自家浏览器反对 PWA 那么感兴趣。
- 依赖 GCM 推送的告诉不可用，Web Push Protocol 还没有国内的推送服务实现。
- 国内 webview 环境较为简单（比方微信），黑科技比拟多。
反观印度，因为 Google 服务健全、标配 Chrome 的 Android 手机市占率十分高，PWA 的用户达到率几乎直逼 100%，也不免取得有数好评与反对了。
参考资料：下一代 Web 利用模型 —— Progressive Web App | 小程序的老祖宗 PWA 为什么没有火起来？
百度
在 2017 年 7 月 5 日“百度 AI 开发者大会”（Baidu Create2017）——Web 生态分论坛上，百度开发者介绍了百度 Lavas 解决方案，帮忙开发者疾速搭建 PWA 利用。
lavas 不是一个框架，而是一个基于 vue 的 PWA 解决方案，通过 lavas 导出的模板帮忙开发者解决了接入 PWA 过程中遇到的问题：
- Service Worker 生成
- Service Worker 更新，以及 sw 更新后的操作
- App Skeleton，页面渲染实现之前的页面框架
- 页面切换后退后退过渡动画
- App Shell，集成了 vuetify 组件库
- 主题切换
- vue 的图标解决方案 …
而当初 lavas 官网曾经无法访问，这在很大水平上能够反馈 PWA 在国内业务的一个现状。
微软
Microsoft 仍然在保护着相干文档：Get started with Progressive Web Apps，工夫显示，最近更新时 2022 年 3 月 1。
总结：App、小程序、快利用与 App Clips
高清大图可点击这里查看。
举荐参考资料
- Learn PWA
- 渐进式 Web 利用
- 讲讲 PWA
- 6 myths of Progressive Web Apps
- PWA 文档
- 网站渐进式加强体验 (PWA) 革新：Service Worker 利用详解
- Web 离线利用解决方案——ServiceWorker
- What self.skipWaiting() does to the service worker lifecycle
- ServiceWorker 工作原理、生命周期和应用场景
本文首发于集体博客，欢送斧正和 star。
