渐进式 Web 应用是一种网站；它的所有资源都与 Web 上的资源相同，但要借助新工具使这些资源在线时快速加载，离线时可用。
应用组件
开发应用通常涉及多个资源和资源，从逻辑和代码（无论是否经过编译）到界面元素（如屏幕设计、图片、徽标和字体）。
渐进式 Web 应用是一个网站，因此它的所有资源都与 Web 上的资源相同：
- 用于内容和初始网页呈现的 HTML。
- 用于逻辑的 JavaScript，包括运行 WebAssembly 模块（经过编译的代码）以及渲染针对 2D 和 3D 硬件优化的图形的功能。
- 用于布局、样式和动画的 CSS。
- 采用 Web 格式的图片，例如 PNG、JPEG、WebP 和 SVG。
- 采用 Web 格式的视频，例如 MPEG-4 和 WebM。
- 网络字体。
- JSON 或其他格式的数据。
默认情况下，网站会通过网络下载资源，从 HTML 开始，然后再继续下载其余资源。
管理这些资源以快速加载并支持离线使用一直是 Web 的一大挑战。如今，PWA 使用的功能之前仅与特定于平台的应用相关联。
针对特定平台的应用与 PWA
安装平台专用应用时，您下载的软件包中通常会包含该应用的所有资源：代码、图片、字体、视频等。 因此，即使应用处于离线状态，您也可以从设备存储空间中获取所有这些资源。
另一方面，传统版网站需要连接到网络才能根据需要下载资源。 如果您处于离线状态，您将在客户端看到一条错误消息，因为客户端没有素材资源。
PWA 方法通过使部分或全部资源可在客户端使用，如同平台专用应用一样，增强了传统的 Web 体验。因此，当您打开 PWA 时，初始渲染可能和平台应用一样瞬时完成，因为资源无需前往网络即可使用。
缓存和存储
自网络问世以来，开发者还无法完全控制资源的缓存方式。浏览器负责 HTTP 缓存，不一定会根据不同的政策缓存和提供资源。Web Storage 和 IndexedDB 等其他存储方案旨在保存简单的数据和对象。
PWA 的内容并不需要完全依靠这些政策。 现在，我们有了相应的解决方案，可以更好地控制何时以及如何缓存资源，以及何时以及如何在本地传送资源，即 Cache Storage API。 Web 提供一些客户端存储解决方案：
- Web 存储：包括
localStorage和sessionStorage。这些 API 可存储简单的键值对字符串对。Web 存储有限，并且具有同步 API，因此应尽可能避免使用。 - IndexedDB：基于对象的数据库 (No-SQL)，具有异步 API，有助于提升 Web 性能。IndexedDB 可以在客户端存储结构化数据和二进制数据。它通常用来存储数据，例如您作为 API 请求获取或发送的数据。将数据立即保存在本地并稍后将其同步到服务器也很有用。IndexedDB API 用于与数据库交互。
- 缓存存储空间：一组 HTTP 请求和响应对，可用于存储和检索资源（及其 HTTP 标头），与从服务器传送的资源完全相同。借助 Cache Storage API，您可以存储、检索、更新和删除网络请求（例如针对您的资产的请求），即使处于离线状态也没问题。
Service Worker 的需求
PWA 可以将其资源存储在 Cache Storage 和 IndexedDB 中，但我们如何利用这些资源为用户提供快速的离线体验。答案是什么呢？Service Worker。
借助 Service Worker，您无需前往网络即可传送资源、向用户发送通知、为 PWA 图标添加标记、在后台更新内容，甚至使整个 PWA 离线工作。请阅读下一章，详细了解 Service Worker。
可离线使用
用户希望您的应用能够提供快速且始终开启的体验。这意味着您的应用应该能够离线工作。
可供离线使用并不意味着您的所有内容或服务也可在没有网络连接的情况下使用。 不过，即使用户处于离线状态，至少提供基本的使用体验（例如网页要求您连接到互联网以继续），可以为用户提供更好的体验，让用户保持与应用的使用体验，而不是常见的浏览器错误。 在某些浏览器中，必须具备该功能才能符合 PWA 安装条件。 最好显示 PWA 界面以及缓存的内容。让用户恢复在线状态后继续使用整个 PWA 并同步服务器更改是离线工作的黄金标准。
要使您的应用可离线使用，您需要缓存离线体验所需的资源，并使 Service Worker 稍后提供这些资源。请务必提前将离线资源添加到缓存中，以备不时之需。这是一种特殊情况，在请求时无法缓存它们。
常用的缓存方法
在您的 PWA 中，所有决策都由您负责。您可以根据需求选择缓存或安装资源的最佳方法。您需要做的一些决定包括：
- 预缓存：选择您希望在首次加载时安装的资源；这些资源应包含 HTML 以及用于呈现应用所需的最少量资源。使用预缓存时，请谨记会占用设备的空间和网络。在下载和缓存资源时，请有意识和负责任的做法。
- 按需缓存：用于在收到资产请求时将资产添加到缓存中。这些素材资源通常与应用版本无关，例如图片或内容。如需了解有关如何根据需要缓存的不同策略，请参阅缓存部分。
- API 和网络服务：可以缓存 API 调用；或者，您可以将 API 调用的数据存储在 IndexedDB 中，而不对 API 响应进行缓存。
正在更新资产
在适用于应用目录已安装应用的标准应用模型中，当开发者需要更新其应用时，需要发布新的软件包。用户需要重新下载整个文件包，即使大部分资源尚未更改。 借助 PWA，您可以采用上文中介绍的方法决定如何以及何时更新资源。 以下是有关如何更新资产的不同选项：
- 完全更新：在这种情况下，您每次在应用中做出了更改（即使是细微更改），代码都会重新下载缓存中的所有资源。
- 部分更新：在此方法中，您可以创建一个方法来定义已更新的资产，并且仅在用户未处理的情况下更新这些资产。
- 持续更新：使用此方法，您的资源会在每次使用 PWA 时自动更新
大小和有效期
通常，平台专用应用没有大小限制；在安装时，应用的大小可以达到 GB 或更大。只要设备容量充足，就可以安装相应设备。此外，在安装该应用时，无论您是否使用该应用，它都会占用该总存储空间。 对于 PWA，存储空间的处理方式有所不同。浏览器会根据您在 PWA 逻辑中定义的政策存储您的资源。
大小限制取决于浏览器。 它不像平台专用应用那样灵活，但通常足以用于大多数 Web 应用。您可以在这篇文章中查看各个浏览器的具体限制。
如果用户在浏览器中使用您的 PWA，浏览器可能会根据存储压力或处于非活跃状态数周后逐出资源。在某些平台上，如果用户安装您的 PWA，系统就不会将其逐出。在适用的情况下，代码可以通过 API 请求永久性存储空间，以避免被逐出。