前言
现代化的网络应用程序需要在移动设备上提供快速而可靠的用户体验。PWA（渐进式网络应用程序）是一种能够提供这种体验的技术，它提供了许多 Web 应用程序的基本功能，如离线和缓存。
然而，在实施 PWA 应用时，使用 cookie 或 session 存储用户会话可能会遇到一些问题。本文将阐述这些问题并提供解决方式。
问题
在传统的 Web 应用程序中，我们可以使用 cookie 或 session 存储用户身份验证和其他会话数据。但在 PWA 应用程序中，由于 service worker 的存在，这些 cookie 或 session 存储机制可能会导致一些问题。
具体而言，由于 service worker 可以在后台运行并拦截网络请求，这可能会导致 cookie 或 session 数据在应用程序离线时无法更新。这会导致应用程序出现不一致的用户会话状态，从而破坏用户体验。
解决方案
方案一：使用 IndexedDB
IndexedDB 是一种可在浏览器中保存数据的 JavaScript API。在使用 PWA 应用程序时，可以使用 IndexedDB 存储用户身份验证和其他会话数据，而不是 cookie 或 session。
使用 IndexedDB 存储会话数据的好处是，即使用户处于离线状态，数据也会得到更新。当用户重新联网时，存储在 IndexedDB 中的数据会在后台提交到服务器，从而保持与服务器的同步。
以下是示例代码：
-- -- --------- ---
----- ------- - ---------------------------- ---
--------------- - --------------- -
-----------------------
--
----------------- - --------------- -
----- -- - --------------------
-- ------
----- ----------- - --------------------------- -------------
----- ----- - -----------------------------------
----- ------- - -------------------- ------ ---------------- -------
----------------- - --------------- -
-----------------------
--
---------------------- - --------------- -
---------------------
--
--方案二：使用 JWT
JWT（JSON Web Tokens）是一种开放标准，用于在网络应用程序之间传递声明。在使用 PWA 应用程序时，可以使用 JWT 来存储用户身份验证和其他会话数据，而不是 cookie 或 session。
使用 JWT 存储会话数据的好处是，它是不附加到 cookie 中的。当请求 PWA 应用程序时，JWT 会以 Authorization header 的形式发送给服务器。这使得 PWA 应用程序免受 cookie 同源政策的限制，并且可以与多个域名一起使用。
以下是示例代码：
-- -- ---
----- ----- - ------------------- ------ ---------------- ------ ----------
-- ---- --- ---
---------------------- -
-------- -
---------------- ------- ---------
-
--
-------------- -- -
-----------------------
---结论
在使用 PWA 应用程序时，使用 cookie 或 session 存储用户身份验证和其他会话数据可能会导致一些问题。因此，我们可以使用 IndexedDB 或 JWT 来解决这些问题。这两种方案都有其优点和缺点，具体取决于您的应用程序的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/672430c22e7021665e1291cf