什么是 PWA？
PWA（Progressive Web App）是一种新型的 Web 应用程序模型，它不仅具备传统 Web 应用的优点，例如可访问性、可搜索性以及与其他 Web 应用的链接性等，同时还具备接近原生应用的许多特性，例如离线支持、消息推送、硬件访问等。
PWA 中的离线支持
离线支持是 PWA 最为重要的特性之一，它能够保证应用程序可以在没有网络连接的情况下运行。在 PWA 中，离线支持主要由以下两个技术实现：
- Service Worker：一种运行在浏览器后台的 JavaScript 脚本，能够拦截所有的网络请求，从而实现请求的离线缓存和自定义响应。
- IndexedDB：一种近似原生数据库的 Web API，允许 Web 应用程序在客户端存储结构化数据，同时提供强大的查询和索引功能。
本文将主要介绍如何使用 IndexedDB 存储离线数据，从而实现 PWA 中的离线支持。
IndexedDB 简介
IndexedDB 是一种在客户端存储结构化数据的 Web API，它与传统的关系型数据库非常相似，但更加轻量级、灵活和易于使用。下面是一些 IndexedDB 的特点：
- 客户端存储：IndexedDB 在客户端存储数据，不需要像传统的 Web 应用一样依赖于服务器端。这样可以减少网络延迟、提高应用性能，并且增强了应用程序的离线支持。
- 面向对象：IndexedDB 以对象存储为核心，每一个对象存储都包含若干个对象，每个对象又包含若干个属性。这种面向对象的设计可以更好地适应客户端的存储需求。
- 索引查询：IndexedDB 支持创建索引，从而可以更快地查询数据。同时，IndexedDB 还提供了灵活的查询语言和事务机制，可以满足更多的查询需求。
IndexedDB 基本操作
IndexedDB 的核心操作主要包括以下几个步骤：
- 打开一个数据库。
- 创建一个对象存储。
- 向对象存储中添加数据。
- 从对象存储中查询数据。
下面是一些 IndexedDB 基本 API 的使用示例：
-- -------------------- ---- -------
-- -------
----- ------- - ---------------------------- ---
-- --------
----------------------- - --------------- -
----- -- - --------------------
----- ----------- - --------------------------------- - -------- ---- ---
------------------------------- ------- - ------- ----- ---
--
-- ----------
----------------- - --------------- -
----- -- - --------------------
----- ----------- - ----------------------------- -------------
----- ----------- - -------------------------------------
----- -------- - - --- ------ ----- ----- ----- ------ ------------------ --
----- ------- - --------------------------
----------------- - --------------- -
--------------------- --------
--
--
-- ----------
----------------- - --------------- -
----- -- - --------------------
----- ----------- - ----------------------------- ------------
----- ----------- - -------------------------------------
----- ------- - -----------------------
----------------- - --------------- -
----------------------------
--
--在 PWA 中使用 IndexedDB 存储离线数据
在 PWA 中，我们可以使用 IndexedDB 存储离线数据，从而实现应用程序的离线支持。下面是一个 IndexedDB 存储离线数据的示例：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
-- -- ------- ------
-------------------------------------------
-- ---- --------- ---
----- ------- - ----------------------------- ---
-- --------
----------------------- - --------------- -
----- -- - --------------------
--------------------------------------- - -------- ----- -------------- ---- ---
--
-- ------------- --------- -
----- ----------- - ----------------- -
----- -- - ---------------
----- ----------- - ----------------------------------- -------------
----- ----------- - -------------------------------------------
---------------------------------
--
-- -------- --------- ----------
----- -------------- - ---------- -
----- -- - ---------------
----- ----------- - ----------------------------------- -------------
----- ----------- - -------------------------------------------
----- -------- - ---------------------
------------------ - --------------- -
----- ---- - ----------------
------------------------------ -
------------------ -
------- ---------------
-------- ----------------
----- -------------
----- ----------
--------- ---------
-------------------------- -
-- ---------------- --- --- -- --------------- --- -- -
-------------------------------
-
---
---
--
--
-- -- ----- ---------
------------------------------ --------------- -
-- ------------------ -- -------------------- --- ------- -
------------------
--- ------------ -
------- ----
----------- -------- ---------
--
--
---------------------------
- ---- -
------------------
------------------------------------- -
------ --- --------------------- ----------- -
-------- - --------------- ----------- --
---
--
--
-
---
-- -- ------ -----------
------------------------------- ---------- -
-----------------
---
-- -------- --------- ---------
------------------------------- ---------- -
-----------------
---
-上述示例中，我们首先打开一个 IndexedDB 数据库，并创建一个对象存储。然后，在离线状态下，我们将请求保存到 IndexedDB 中。在在线状态下，我们使用 Service Worker 拦截所有的 fetch 请求，如果请求失败，则返回一个示意的离线界面，并将请求保存到 IndexedDB 中。在 online 事件触发时，我们重新发送离线请求。
总结
本文介绍了 PWA 中的离线支持，重点介绍了 IndexedDB 存储离线数据的使用方法。如果你想在自己的 Web 应用中使用 PWA 技术，那么 IndexedDB 作为一个非常重要的技术点，一定需要认真掌握和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6546118b7d4982a6ebfd91c2