什么是 PWA？
PWA（Progressive Web App）指一种新兴的 Web 应用形式，它允许我们将 Web 应用快速、充分地利用出色的 Web 技术打造成类似于原生应用的、离线可用的应用程序。PWA 通过 Service Worker、Manifest 和 CacheStorage 等 Web API 来达到更快、更可靠和更令人赏心悦目的应用体验，同时与常规 Web 应用和原生应用相比还具备更低的开发和维护成本。
PWA 离线状态下的数据展示
由于 PWA 应用允许离线使用，因此我们需要考虑离线状态下用户如何浏览数据。对于 PWA 应用而言，我们有两种核心方案——预缓存和网络优先。
预缓存
预缓存指的是 PWA 应用在在线状态下预先下载并缓存一定量的静态资源（包括样式、脚本、页面、图片、字体等），这些资源将会用于离线时展示，以此来加速页面加载。如果用户在离线状态下访问页面，PWA 应用会首先尝试从 Service Worker 缓存里查找相应的资源，如果存在的话，直接将缓存的内容返回给用户。
下面是一个简单的 PWA 应用的 Service Worker 脚本，用于启用页面预缓存：
-- -------------------- ---- -------
----- ---------- - ------------------
----- ----------- - -
----
--------------
-------------------
-------------------
------------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---在上面的代码片段中，我们在 Service Worker 安装后，将 urlsToCache 数组中的资源加入到 CACHE_NAME 缓存中，并且每次触发 fetch 事件时，如果 Service Worker 缓存中存在相应资源，就返回缓存的内容。
网络优先
如果预缓存不可用或者 Service Worker 缓存中不存在必要的资源时，我们需要一种优先请求网络资源的机制。在这种情况下，PWA 应用会尝试与服务器建立连接，如果连接成功，就将网络请求的响应内容缓存到本地，下次用户再次访问离线页面时，就直接使用缓存内容。
下面是一个简单的实现网络优先的示例代码：
-- -------------------- ---- -------
-------- ------------------- -
------ --- ----------------- ------- -- -
-- ------------------ -
------------------- -- -
------ -----------
------------ -- -
-- ------
----------------------------------------- -- -
---------------------- -- -
----------------- -------- -----
---
---
--------------
-------------- -- -
--------------
---
- ---- -
-- ---------
-------------------------- -- -
-- ----- -
------------------ -------- -----
--------------------
- ---- -
---------- ----- --------
-
---
-
---
-在上面的代码片段中，我们使用 getOfflineData 函数对指定的 URL 发送网络请求。如果在线状态下，我们直接发送网络请求，将服务端返回的数据缓存到 my-pwa-cache-v1 缓存中；如果离线状态下，我们则从缓存中读取相应的数据。
总结
在 PWA 应用中实现数据离线展示，对于提升应用体验具有非常重要的作用。通过 Service Worker 的缓存机制，我们能够在离线状态下加载已经预先缓存的静态资源，从而使得 PWA 应用更快、更可靠。同时，合理地实现网络优先机制，也可以保证即使离线状态下，用户也能够正常访问要求网络请求的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492afc148841e989407c19b