PWA 技术与实现
随着移动设备和 Web 应用程序的普及，可以设计出一种新的方式来提供用户体验。这种方式被称为渐进式网络应用程序（Progressive Web App，PWA）。它可以将 Web 应用程序的优势（可访问性、可更新性）与原生应用程序的优势（离线访问、推送通知等）相结合，从而创造出最优的用户体验。本篇文章将介绍 PWA 的技术与实现，并提供有用的指导和示例代码。
- 什么是 PWA
PWA 是一种 Web 应用程序，可以像本地应用程序一样提供功能和体验，但又与传统 web 应用程序不同。PWA 充分利用了 web 技术以及浏览器的功能，使得 web 应用程序能够获得之前只有本地应用程序才具备的优点。一些典型的优势包括：
- 比传统的 Web 应用程序快：可以使用 service worker 和应用程序缓存来缓存重要资源和数据，并且可以更好地管理和优化内容传输。
- 可离线访问：PWA 可以在离线时展示一个像本地应用程序一样的 UI，因为一旦拥有了必要的资源，PWA 便可以直接从本地缓存中提供内容。
- 像应用程序一样安装：PWA 可以让用户轻松地下载指向应用程序的指针，或者直接按照本地应用程序的方式下载。PWA 也更容易集成到各种操作系统和应用商店中。
- 推送通知：通过 Push API 提供的功能，PWA 可以在用户未打开 Web 应用程序的情况下向其发送通知。
- PWA 技术架构
PWA 是由一系列互相依赖的组件组成的。其中最核心的组件是 service worker，这是一种 JavaScript 脚本，用于将网络和本地之间的通信置于更底层的抽象层上。整个组件架构如下：
a. App Shell
App Shell 是 PWA 的核心，它是一个简单的 HTML、CSS 和 JavaScript 文件，作为应用的基本 UI 和架构来加载应用程序的基本结构。它通常比传统的 Web 应用程序更少地依赖于服务器接口，而更多地依靠客户端上的缓存数据。这大大缩短了应用程序的启动时间，并改善了用户体验。
b. Service Worker
Service Worker 是一个独立于 Web 页面的运行时环境，它可以在后台执行自己的任务，例如缓存和响应网络请求。与 App Shell 不同，Service Worker 至少是通过 HTTPS 连接部署的。这是因为，Service Worker 可能会访问敏感数据，比如用户隐私和使用信息，并可以在用户未知的情况下收集数据。同时，在 HTTP 环境下，Service Worker 也无法使用某些功能（如推送通知等）。
c. Push API
Push API 是用于向用户显示推送通知的 API。它允许服务端应用程序（通过 web push 协议）发送通知，并由客户端接收，然后由 Service Worker 处理。这允许用户在浏览器未打开时接收到新的消息，这通常是在 Web 应用程序开发方面的一个缺陷，因为它们需要被打开才能让用户获得最新的数据。
d. App Server
App Server 是 Web 应用程序的后端。它通常是通过 HTTPS 服务器和 API 呈现的，以与部署在浏览器上的 App Shell 链接。
e. Database
在 some PWA 中，Database 允许最大化加快应用程序的性能。课通过将应用程序状态保存在本地缓存中，可以减少对服务器的请求，进而改善应用程序的性能。
- PWA 实现案例
现在，让我们看一下一个简单的例子，展示了如何将 PWA 集成到一个网站中。以下示例将创建一个 Todo List 应用程序，它使用了一些最基本的 PWA 技术。(代码以 React 为例子)
-- -------------------- ---- ------- -- ------- ------ ------------ -- ---------------- -- ---------- - ------------------------------------------ -------------------- -- - -------------------- ------ ---------- ---- -------- -------------------- ---------------- -- - -------------------- ------ ------------ --------- ------- --- - -- ------- --- -------- ----- -------- - ------------------------------- ---------------------------- ------------ ----------------------------- ------------------ ------------------------------------ -- --- ----- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - ------ --- ------ --- -- ---------------- - ---------------------------- ------------------ - ------------------------------ - ------------------- - ------------------- ----------- -- - -- --------- - ----- --- -------------- -------- --- --- ----- - ------ ----------- -- ---------------- -- - --------------- ------ -------- --- -- -------------- -- - -------------------- --- - ------- ---- --- ----- -------------- ------- --- - ------------------ - --------------- ------ ------------------ --- - --------------- - ------------------- - ------- ------- -------- - --------------- ------------------- -- ----- --------------------- ------------------- -- ----------- -- - -- --------- - ----- --- ------------ --- - ------- ---- --- ----- ------------ - ------ ----------- -- ---------------- -- - --------------- ------ --------------------- ---------- ------ --- --- -- -------------- -- - -------------------- --- - ------- ---- --- ----- -------------- ------- --- - -------- - ------ - ----- -------- --------- ---- ---------------------------- -- - --- ------------------------------ --- ----- ------ ----------- --------------------------- ------------------------ -- ------- ----------------------------------------- ------ -- - - -------------------- --- ---------------------------------展开代码
本例子中：
- 使用了 App Shell 来提高性能，而无需从服务器中获取 HTML，因为所有的资源都已经缓存在服务工作线程中。
- Service Worker 建立了拦截网络请求的代理，将基本的 API 调用映射到它们的本地进行调用和缓存。
- 与应用程序后端交互时，我们使用了 FETCH API。
- Manifest 通过声明清单告诉浏览器，应用程序可与操作系统进行集成，提供桌面应用程序的功能
结论
PWA 提供了一种新的方式，可以让 Web 应用程序与原生应用程序接近。通过 PWA，web 应用程序可以带来更好的性能、可靠性和用户体验，可以像本地应用程序一样运行，同时又可以是动态、云端的 Web 应用程序。
在本篇文章中，我们看到 PWA 的优势、它的技术成分，以及一个简单的示例程序，介绍了如何利用 React、Service worker API 等工具来构建，它可以帮助你快速了解如何实现 PWA。希望读者能够从本文中收获绝佳的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67496337a1ce00635459c922
