PWA（Progressive Web App）是一种结合了 Web 和 native app 的技术方案，可以让 Web 应用具备类似 native app 的用户体验。其中一个重要的特性就是可以实现在线和离线状态的切换，本文将详细介绍 PWA 技术如何实现这一功能。
PWA 的离线存储
实现 PWA 应用离线状态的基础是离线存储机制。可以借助 Service Worker 技术，将应用所需的资源（如 HTML、CSS、JavaScript、图片、字体等）缓存到离线存储空间（Cache API），当网络不可用时，从离线存储空间中获取这些资源进行展示。
使用 Cache API 进行缓存管理，可以形成一个离线资源版本号（cacheName），通过在 Service Worker 中监听 fetch 事件实现拦截用户请求并返回本地资源。
-- -------------------- ---- -------
-- -----
----- ---------- - ------------------
----- ----------- - -
----
------------------
--------------
------------------
--
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
------ -------- -- ---------------------
--
--
---以上代码定义了一个 cacheName（'my-pwa-cache-v1'）和需要缓存的文件（urlsToCache），在 Service Worker 安装完成后通过 cache.addAll 方法将需要缓存的文件加入缓存空间中，请求时如果匹配到缓存资源则使用缓存资源，否则通过 fetch 方法请求远程资源。
PWA 的在线和离线切换
使用 Service Worker 实现 PWA 的离线存储，可以缓存指定资源并在网络恢复前使用本地缓存资源，但离线状态下用户只能使用缓存的本地资源，为了提供更加友好的用户体验，需要对离线状态进行提示和管理。
监听网络状态变化
在 Service Worker 中可以监听网络状态变化事件，通过联网或断网的状态更新应用界面，从而实现在线和离线状态的切换。
-- -------------------- ---- ------- -- ----- -------------------------------- -- -- - ----------------------- -- ---- --- ------------------------------- -- -- - ---------------------- -- ---- ---
监听应用状态变化
除了监听网络状态变化外，还可以通过 navigator.onLine 属性判断当前应用是否在线，以达到相应的处理方式。
if (navigator.onLine) {
// 在线
} else {
// 离线
}添加离线提示功能
当应用进入离线状态时，可以通过 Notification API、Toast、Dialog 等方式提醒用户当前为离线状态，无法进行网络请求。
// main.js
if (!navigator.onLine) {
// 离线
const offlineTip = document.createElement('div');
offlineTip.innerText = '您目前是离线状态，无法加载新数据';
document.body.appendChild(offlineTip);
}示例
以下是一个使用 PWA 实现在线和离线切换的示例，可以先在线状态下打开该应用，将资源缓存至本地，待网络不可用时再次访问该应用。
-- -------------------- ---- -------
--------- -----
------
------
------------------
----- ---------------- --------------- ----------------------
-------
------
--------
------------
---------
------
-------------
--------------
-------
------- ---------------------- --------------------------
-------
--------- -------------------- ---- ------- -- ---------- -- ---- - ------- -- -------- -- ------------ ------ ----------- ----------------- -------- - ------ - ------- ----- ----------------- ----- ------ -------- -------- ----- ---------------- ------- ------------ ------- - ---- - ---------- ------ ------- - ----- -------- ----- - --- -- - ----------- ------- -------------- ----- - -- - ----------- -- - - - ---------- ----- ------------ ---- -
-- -------------------- ---- -------
-- -------
-- -------------------------- -
---------------- ------- ---------
- ---- -
------------------------------------------------------------ -- -
-------------------- ------ -------
-- ------
--------------------------------- -- -- -
-----------------------
---
---------------------------------- -- -- -
-----------------------
-----------------
---
-- -- ------- ------ ----------
------------------------------------------------------------ -- -
-- --------------- -
----------------- -------
------------------------------------
---------------- -----
--------------------- ----------------------------------------------------------------------------------------------------------------
--
------------------ -- -
------------------------------------------
--
---------- -- ------------------
- ---- -
------------------------------------------
-
---
-------------- -- -
-------------------- ------ -------
-------------------
---
-
-------- ---------------- -
----- ---------- - ------------------------------
-------------------- - -------------------
--------------------------------------
-
-------- ----------------------------------- -
----- ------- - ------------- - ------------------- - -- - ---
----- ------ - ------------- - ----------------------- ------------------ -----
----- ------- - --------------------
----- ----------- - --- ---------------------------
--- ---- - - -- - - --------------- ---- -
-------------- - ----------------------
-
------ ------------
--- -------------------- ---- -------
-- -----
----- ---------- - ------------------
----- ----------- - -
----
------------------
-------------
--
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------------------- --------
------ --------------------------
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
------ -------- -- ---------------------
--
--
---总结
PWA 技术实现在线和离线状态的切换，主要是通过 Service Worker 实现离线存储机制和监听网络状态变化，当应用处于离线状态时可以提醒用户无法进行网络请求，提升用户体验。PWA 技术的应用前景广阔，在实战中需要灵活运用 PWA 技术，为用户提供更加流畅、稳定、快捷的应用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b042ec48841e9894c782cc