渐进式 Web 应用是一个网站；其所有资源与 Web 上的资源相同，但具有新的工具，可使这些资源在在线时快速加载，并在离线时可用。
应用组件
开发应用程序通常涉及多个资源，从逻辑和代码（无论是否编译）到用户界面元素，例如屏幕设计、图像、徽标和字体。
渐进式 Web 应用是一个网站，因此其所有资源与 Web 上的资源相同
- 用于内容和初始页面呈现的 HTML。
- 用于逻辑的 JavaScript，包括运行 WebAssembly 模块（编译代码）和渲染 2D 和 3D 硬件优化图形的能力。
- 用于布局、样式和动画的 CSS。
- Web 格式的图像，例如 PNG、JPEG、WebP 和 SVG。
- Web 格式的视频，例如 MPEG-4 和 WebM。
- Web 字体。
- JSON 或其他格式的数据。
默认情况下，网站通过网络下载资源，从 HTML 开始，然后继续下载其余资源。
管理这些资源以实现快速加载和离线可用性一直是 Web 的一项挑战。如今，PWA 使用了以前仅与特定于平台的应用相关联的功能。
特定于平台的应用与 PWA
当您安装特定于平台的应用时，您通常会下载一个软件包，其中包含该应用的所有资源：代码、图像、字体、视频等。因此，即使应用处于离线状态，所有这些资源也可以从您的设备存储中获得。
另一方面，传统的网站需要网络连接才能在需要时下载资源。如果您处于离线状态，您将看到来自浏览器的错误，因为客户端没有资源。
PWA 方法通过使某些或所有资源像特定于平台的应用一样在客户端可用，从而增强了传统的 Web 体验。因此，当您打开 PWA 时，初始呈现可以像平台应用一样即时，因为资源可用，而无需访问网络。
缓存和存储
自 Web 诞生以来，开发人员一直没有完全控制资源的缓存方式。浏览器负责 HTTP 缓存，并且可能会或可能不会根据不同的策略缓存和提供资源。Web Storage 和 IndexedDB 等其他存储选项旨在保存简单的数据和对象。
PWA 不需要单独依赖这些策略来获取其内容。相反，我们今天有解决方案可以更好地控制何时以及如何缓存资源，以及何时以及如何本地交付它们：Cache Storage API。Web 有一些可用的客户端存储解决方案
- Web 存储：包括
localStorage和sessionStorage。这些 API 存储简单的键/值字符串对。Web 存储受到限制，并且具有同步 API，因此应尽可能避免使用。 - IndexedDB：一个基于对象的数据库 (No-SQL)，具有异步 API，对 Web 性能有利。IndexedDB 可以在客户端存储结构化数据和二进制数据。它通常是您将用于存储数据的内容，例如您从 API 请求中获取或作为 API 请求发送的内容。它也可用于立即在本地保存数据，稍后将其同步到服务器。IndexedDB API 用于与数据库交互。
- Cache storage：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 和 Web 服务：API 调用可以缓存；或者，您可以将 API 响应的数据存储在 IndexedDB 中，而不是缓存 API 响应。
更新资源
在应用目录安装应用的 стандарт 应用模型中，当开发人员需要更新其应用时，他们会发布新软件包。用户需要再次下载整个软件包，即使大多数资源没有更改。对于 PWA，使用上面部分中的方法，您可以决定如何以及何时更新资源。以下是有关如何更新资源的不同选项
- 完全更新：在这种情况下，每次您在应用中进行更改（即使是很小的更改）时，您的代码都会再次在缓存中下载所有资源。
- 部分更新：在这种方法中，您创建一种方法来定义已更新的资源，并且您仅更新这些资源，无论是否需要用户干预。
- 持续更新：使用此技术，您的资源将在每次 PWA 使用时自动检查和更新。
大小和生命周期
通常，特定于平台的应用不处理大小限制；在安装时，应用的大小可能为千兆字节或更大。只要设备有容量，就允许安装。此外，虽然应用已安装，但无论您是否使用该应用，它都会使用该总存储量。PWA 的存储处理方式不同。浏览器将根据您在 PWA 逻辑中定义的策略存储您的资源。
大小限制取决于浏览器。它不像特定于平台的应用那样灵活，但通常对于大多数 Web 应用来说都足够好。您可以在本文中找到按浏览器划分的具体限制。
浏览器可能会根据存储压力或在用户在浏览器中使用您的 PWA 几周不活动后删除资源。在某些平台上，如果用户安装了您的 PWA，则不会发生删除。在可用的情况下，代码可以通过 API 请求持久存储以避免删除。