背景
PWA（Progressive Web App）是指具有 Native App 体验的 Web 应用，可实现类似离线缓存、推送通知等功能。PWA 使用了 Service Worker 技术来实现离线缓存和网络请求拦截等功能。
然而，在 PWA 开发中，我们常常会遇到某些 Cookie 问题，例如：
- Service Worker 中无法访问客户端的 Cookie
- PWA 在 iOS 设备上 Cookie 失效
本文将深入探讨以上问题，并提供对应的解决办法。
问题一：Service Worker 中无法访问客户端的 Cookie
在 Service Worker 中，使用 document.cookie 无法获取客户端的 Cookie，而使用 self.clients.matchAll() 获取所有客户端信息时，也无法获取到客户端的 Cookie。
造成这个问题的原因是，Service Worker 本身是运行在后台的，与客户端是分离的两个线程。因此，Service Worker 没有办法直接访问客户端的 Cookie。
解决办法
1. 将 Cookie 存储到 IndexedDB 中
在客户端中，将 Cookie 存储到 IndexedDB 中。然后在 Service Worker 中，通过 IndexedDB API 获取这些数据。实现代码如下：
客户端中存储 Cookie 到 IndexedDB：
-------- --------------------------- ------ -
------ ------------------------- -- -- -- -
-- ------------------------------------------ -
------------------------------- - -------- ------ ---
-
---------- -- -
----- ----------- - --------------------------- -------------
----- ----------- - -----------------------------------
----------------- ----- ----- ---
------ ---------------------
--
-Service Worker 中读取 IndexedDB 中的 Cookie：
----- -------- ------------------------------- - ----- -- - ----- ------------------------- --- ----- ----------- - ------------------------- ------------- ----- ----------- - ----------------------------------- ----- ------ - ----- ------------------------------------------------------------- ------ ------ - -------------------------------- - --- -
这种方法可以很好地解决 Service Worker 无法访问客户端的 Cookie 的问题。但是，如果客户端的 Cookie 很多，将会占用大量的 IndexedDB 空间，进而影响性能。
2. 将 Cookie 存储到 Cache Storage 中
通过将 Cookie 存储到 Cache Storage 中，可以实现在 Service Worker 中访问 Cookie 的功能。实现代码如下：
客户端中存储 Cookie 到 Cache Storage：
-------------------------------------- -- - -------------------- --- ----------------------------------------- --
Service Worker 中从 Cache Storage 中读取 Cookie:
----- -------- --------------------------- - ----- ----- - ----- ---------------------------- ----- -------- - ----- ----------------------- ------ -------- - --------------- - --- -
这种方法可以在保证性能的同时，实现 Service Worker 访问客户端 Cookie 的功能。
问题二：PWA 在 iOS 设备上 Cookie 失效
在 iOS 设备上，PWA 中的 Cookie 会在应用进入后台后失效。这个问题造成的原因是，Safari 会清理掉浏览器 Background Fetch 的数据，进而导致 Cookie 失效。
解决办法
在 iOS 设备上，可以通过向 PIN 码推送一个时间戳来解决 Cookie 失效的问题。实现代码如下：
-------- --------------- - ----- ---- - --- ----------------- ------------------------ - ------ -
这样，每次在进入后台前，都会通过 PIN 码推送一个时间戳。当回到应用时，如果 Cookie 已经失效，则通过时间戳重新获取 Cookie，实现 Cookie 的保持。
结论
在 PWA 开发中，Cookie 问题是一个需要注意的问题。服务端、客户端、Service Worker、iOS 设备等都会受到 Cookie 的影响。为了解决这个问题，我们需要对于各种情况，提供相对应的解决办法，从而实现 Cookie 的保持。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f75709c5c563ced596b7d0