如果我们讨论一个2016年提出、2017年实施、在中国还不为人知的概念，你不觉得没有意义吗？
互联网发展了这么久，我们已经记住了“App”、“小程序”、“快应用”、“App”、“App”、“Web App”。似乎没有单独的 PWA，但 PWA 及其理念一直在推动着前端领域的进步。
什么是 PWA？
似乎PWA对于很多人来说是那么的陌生，但是PWA对于前端开发者来说却无处不在。
大约
对于前端开发者来说，是非常熟悉的网站性能诊断工具。在这里，我们总能看到PWA（Web App）：
渐进式网页应用书籍
或者你可能无意中看到过这些书籍或资料：
开发者相关
啊哈，你没见过这些吗？那么你一直访问过[2]，或者说你一直看到这样一个图标：
你可以认为这个图标在哪里，就有一个 PWA 应用程序。单击此按钮将 PWA 应用程序安装到桌面。于是，出现了在线IDE[3]，出现了Byte内部使用的PWA[4]：
谷歌探索
然而，总是谈论发展实在是太复杂了。我们来谈谈比较有趣的 PWA 应用。
在2018年开发者峰会上，发布了[5]，这是一个开源的图像压缩渐进式Web应用程序（PWA）。它也是现代Web技术的实际演示。 实验室 [6] 的主要目标是演示先进的 Web 应用程序如何利用现代技术在 Web 浏览器中提供高性能体验。
[7]是团队推出的一款游戏。该项目演示了如何开发快速、流畅的 Web 应用程序，以跨多个平台和输入设备提供类似的用户体验。该项目的独特之处在于它主要针对智能功能手机。
智能功能手机是印度和非洲广泛使用的低成本智能手机替代设备。与智能手机相比，智能功能手机的硬件非常简单。不支持触摸，屏幕比较小，大多采用QVGA屏幕分辨率，CPU处理能力比较弱。
这是一款扫雷游戏。您可以在尝试钓鱼时玩它。如果你不幸被老板抓到，就说你是在研究PWA吧。
微博精简版
Lite[8]，我相信，这应该是最接近你的PWA：
我想你不会问：PWA既然被广泛使用，那么它一定很强大吧？
蒽强不强，看数据就知道了。
生产力强
我想你可以告诉他：这些不仅仅是数字，这些都是 PWA 的成功故事。
老板说：墙内你我的距离能有多近？没问题，离我们最近的 PWA 应用将会在你的手中诞生。
PWA诞生的条件
我们都应该有深刻的认识。该应用体验确实不错，下载到手机后即可轻松访问。但它的优点和缺点也很明显：
网页开发成本低。网站更新时，只需将最新资源上传到服务器，用手机浏览器打开即可使用。但除了体验比app差之外，还存在一些明显的缺点：
在这些因素的推动下，Web应用逐渐逼近原生App的概念——PWA诞生了。
PWA 简介 什么是渐进式
PWA全称Web App，中文翻译为 Web APP。那么，什么是进步呢？我认为进步有两个层面的含义：
首先是利用各种Web技术来实现类似于原生App的用户体验，即Web应用逐渐向原生App靠拢。
其次，由于当时的背景，部分浏览器暂时不支持。可以利用PWA相关技术为支持PWA的浏览器用户带来更好的体验。
此外，也许您听说过渐进增强（ ）和优雅降级（ ）的概念。
渐进式增强：为低版本浏览器构建页面完成基本功能，然后为高级浏览器添加效果、交互和附加功能，以达到更好的体验。
优雅降级：将您的网站构建为具有完整功能，然后针对浏览器进行测试和修复。例如，我们首先利用CSS3的特性构建了一个应用程序，然后逐步破解主流浏览器，使其可以在较低版本的浏览器上正常浏览。
PWA本质上是一个WEB应用，所以我觉得这个“渐进”其实是一个渐进增强的概念。
渐进式Web应用的概念
中文官网解释：使用所有正确组件的网站。
普瓦
PWA是2016年提出的概念，2017年正式实施，2018年迎来重大突破。全球顶级浏览器厂商、、、、都宣布支持PWA技术。
看看现有的Web应用程序和原生应用程序之间的差距，例如离线缓存、沉浸式体验等，这些差距可以通过实现Web技术来弥补，最终实现类似于原生应用程序的用户体验。
PWA应用首先是一个网页，可以使用Web技术来编写Web应用。然后将App添加到主屏，实现离线缓存、消息推送等功能。
Web[11]，通过清单文件将Web应用程序的元数据暴露给浏览器，包括名称、图标URL等，供浏览器使用，例如添加到主屏幕或添加到操作系统时暴露给操作系统推送通知，从而增强Web应用程序和操作系统的集成能力。
我们整个原来的Web应用模型是建立在“用户可以访问互联网”的前提下的，所以一旦离线，就只能玩恐龙了。
事实上，“允许Web应用程序离线执行”的问题可以追溯到2007年：为了让诸如、、、等Web应用程序能够在本地存储数据并离线执行，开发了浏览器扩展来增强Web应用程序的性能。应用程序。 。支持IE 6、3、1.5等浏览器；要知道，那一年它还没有出生。
，以前称为 ，是一款已停产的实用软件，由 提供，用于通过向 Web 浏览器添加离线存储和其他附加功能来创建更强大的 Web 应用程序。
它是在没有可比较的替代方案时构想出来的，后来被终止，取而代之的是最终流行的标准化方法。在API中，我们通过向模块提交缓存文件清单来实现离线支持。
它是一个可编程的网络。它就像浏览器和网络之间的客户端代理。它可以拦截、处理和响应流经它的 HTTP 请求。通过API的引入，您可以自由管理HTTP请求文件粒度。缓存，即使在离线环境中，也可以从缓存向 Web 应用程序提供资源。
渐进式应用实施
完成
一个简单的PWA demo很简单，新建一个项目目录，然后：
touch index.html
touch sw.js
npm install serve -g
然后编写简单的html和sw.js文件，最后通过.json实现添加到桌面的功能。完整的代码可以在这里查看[12]。
// 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"
}
示例演示：
通过相应配置.json，可以实现以下功能：
模型
另外，我觉得有必要介绍一下App模式。
应用程序架构 [13] 是一种构建 Web 应用程序的方法，该应用程序可以可靠且即时地加载到用户的屏幕上，类似于本机应用程序。
应用程序“”是支持用户界面所需的最少 HTML、CSS 和 CSS，如果离线缓存，可确保重复访问时即时、可靠和良好的性能。这意味着App不必每次用户访问时都从网络加载，而只需要从网络加载必要的内容。
App 是处理包含大量架构的单页应用程序的常见方法。此方法依赖于渐进式缓存（使用线程）来允许应用程序运行，然后为所使用的每个页面加载动态内容。应用程序非常适合在没有网络连接的情况下快速将一些初始 HTML 加载到屏幕上。
从微博精简版查看 PWA
安装渐进式应用程序：
安装后，PWA应用程序将出现在桌面/应用程序中：
从下图可以看出，点击桌面图标打开后，我们可以选择卸载PWA，该图标就会从桌面上移除；同时我们还可以发现，除了缓存图片、JS、CSS等静态资源外，微博精简版还会缓存接口：
当我们将网络设置为离线并刷新页面时，我们仍然可以继续浏览页面上次加载的信息，以提高用户体验：
优点和缺点
在这些存在的问题中，我们简单介绍一下摩尔定律。
我个人认为摩尔定律就是芯片领域的OKR。 在 1965 年的文章中指出，芯片中晶体管和电阻器的数量每年都会增加一倍，因为工程师可以继续缩小晶体管的尺寸。这意味着半导体的性能和容量将呈指数级增长，并且这种增长趋势还将持续下去。 1975年，摩尔修改了摩尔定律。他相信晶体管的数量每 24 个月就会增加一倍。
晶体管数量加倍的好处可以概括为：更快、更小、更便宜。根据摩尔定律，芯片设计者的主要任务是缩小晶体管的尺寸，使芯片能够容纳更多的晶体管。晶体管的加入使得设计者可以为芯片添加更多功能，例如3D显卡，从而节省成本。
可见，摩尔定律与我们在书本上看到的公式、定理有很大不同。更多的是芯片领域的经验总结和自我驱动的OKR。
如果说一开始人们抱怨手机内存和流量费率的限制，不想安装太多的应用程序，那么根据摩尔定律，现在手机内存和硬件都在进步，运营商费率也降低了。这使得PWA最初出现的根基开始动摇。因此，PWA目前在国内面临的情况是：用户不知道，无法使用，开发者可能不支持，不像小程序那么友好。
尽管存在上述缺点，PWA技术仍然有很多值得学习和使用的点：
当然，说到通知，除了PWA之外，浏览器通知API[14]也是一个不错的选择。
我们知道它是围绕单线程的概念设计的，缺乏像原生App那样实现多线程模型所需的功能，比如共享内存。
浏览器使用单个线程（主线程）来运行网页中的所有任务，例如渲染页面和执行垃圾收集。运行太多代码可能会阻塞主线程，延迟浏览器执行这些任务并导致糟糕的用户体验。
通过使用在后台线程中运行的脚本，可以在 Web 中实现类似多线程的模型，从而允许它们在不干扰主线程的情况下执行任务。整个范围是否在没有任何共享内存的单独线程上运行。
一般来说，您可以让脚本在浏览器主线程之外的单独线程上运行。如果您想参考