什么是 PWA
PWA（Progressive Web Apps）是 Web 应用程序的一种新的类型。与传统的 Web 应用程序（仅仅是网页应用程序的改进版本）不同，PWA 是一种具备类似于原生应用的功能和体验的 Web 应用程序。这意味着用户可以像使用原生应用一样，无需下载安装，即可使用 PWA。它们由 App Shell 和 Service Workers 两个重要组成部分组成。
App Shell
App Shell 是在首次加载应用时加载的 shell（壳）。它包含应用程序的基本外观和页面结构，通常包括 应用程序的头、脚，以及菜单等，这使得用户在离线情况下即使没有数据加载也可以看到应用程序的骨架。
Service Worker
Service Worker 是一种独立的 JavaScript 线程，由浏览器运行在后台。它是一种事件驱动的程序，它可以拦截网络请求，并采取相应的动作。一旦 Service Worker 安装好了，用户访问您的网站或应用程序时，Service Worker 将自动运行，并且被能够侦听来自服务器的请求，以及可以在回调事件发生时响应：
它可以缓存所有应用程序/网站需要的资源，并自动拦截应用程序中的所有 HTTP 请求
它可以允许在后台处理一些工作，以便应用程序在用户关闭它时仍可以运行。
PWA 的优缺点分析
优点
1. 可离线工作
PWA 所搭载的 Service Worker 技术使应用程序可以在缺失网络连接时作为非网络独立应用程序的工作，这是传统 Web 应用程序所不能做的。Service Worker 还可以在在线时缓存资源和数据，在离线时使用缓存并为用户提供所需要的信息。
2. 安装简单
传统应用程序需要从应用商店下载安装，并且占用设备内存。而 PWA 可以像网站一样被用户访问，用户可以将其添加到设备的主屏幕，直接启动，省去了下载和安装的步骤。
3. 与平台无关
PWA 运行在 Web 技术栈上，不依赖于特定的设备或平台，甚至在不同的操作系统或设备上都可以维持相同的用户体验。这使得应用程序可以使用多个平台上的 Web API，使得应用程序可用性更加优越。
4. 更快的加载速度
PWA 使用 Service Worker 技术进行了预先缓存，并启动了像 App Shell 这样的壳体，可以在首次访问后快速启动应用程序和页面。这使得用户不用等待漫长的加载时间，并且可以通过 Push API 接收实时通知而无需重新加载应用程序。
缺点
1. 功能需求有限
由于 PWA 是基于 Web 技术栈运行的，所以它的功能和性能总是有限的。这对某些复杂的应用程序可能会产生限制。一些原生应用程序在特定场景下可以提供的复杂功能，可能需要特殊处理才能在 PWA 中实现。
2. 兼容性问题
PWA 目前主要由谷歌开发，所以它仍然存在兼容性问题。新应用程序必须使用 Service Worker 一类的新 API，而旧的平台则需要单独的版本或代码下降。这可能会增加开发工作量并带来额外的技术难题。
3. 安全限制
PWA 由于采用的是 Web 技术，存在跨域安全问题。PWA 的应用程序必须满足 HTTPS 协议才能生效。这意味着除非网站具有合适的安全证书，否则即使用户想要启用 PWA，它也无法启动。
PWA 的示例代码
Service Worker
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});App Shell
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- --- -----------
----- --------------- ---------------------------- -----------------
----- ---------------- -----------------
----- -------------- ---------------------
-------
------
--------
------ --- --------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------
------
---- ---- ------- ---- ---- ---
-------
--------
--------- ---- -- --- -------
---------
-------
-------总结
PWA 技术在 Web 应用程序中的增长和发展是值得注意的。它提供了一种跨设备和平台的用户体验，同时增加了离线工作、快速加载速度和安装简易化等优点，但由于它的使用限制，如果需要复杂的功能，可能需要在原生应用程序上进行更改或考虑其他解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65431d027d4982a6ebcc588b