PWA（Progressive Web Apps）是一种让我们在移动端和桌面端提供类似于原生应用的体验的技术。它们可以在离线状态下工作，并具有许多安装原生应用才可使用的功能。但是，与传统网站不同的是，PWA 有一个严重的限制：它们不支持 Cookie。
在本文中，我们将讨论 PWA 不支持 Cookie 导致的问题，以及可行的解决方案。
问题：PWA 不支持 Cookie
当用户首次访问您的 PWA 时，您无法为其设置 Cookie。这意味着您无法使用基于 Cookie 的身份验证和授权，也无法使用跨站请求伪造（CSRF）保护，因为它需要使用 Cookie 来工作。
那么，如果没有 Cookie，如何在 PWA 中实现身份验证和授权呢？这涉及到一个在 PWA 中使用的新流程：Web Authentication。
解决方案：使用 Web Authentication
Web Authentication 是一个新的 Web API 标准，它提供了一种在 PWA 中进行身份验证和授权的方法，而无需使用 Cookie。它基于公钥加密 / 解密机制来实现。
在 Web Authentication 中，用户首先通过用户名和密码登录，然后系统将生成一个公钥 / 私钥对。公钥将被保存在服务器上，而私钥将保存在用户的设备上。
下面是一个示例代码，展示了如何使用 Web Authentication 来进行身份验证：
-- -------------------- ---- -------
----- -------- -------------- -
----- ----- - ----- ------------------------------
---------- -
---------- --- ------------ -- ------- -- ---
--- -
----- ------
--
----- -
----- ------------------
------------ ---- --------
--
----------------- --
----- -------------
---- --
--
-
---
-- -------------------
-
----- -------- --------------- -
----- ----- - ----- ---------------------------
---------- -
-------- -----
----- ----------
-
---
-- ----------------
-上述代码仅用于演示目的，实际使用时需要编写更多代码来处理 Web Authentication 流程的各个步骤。
总结
PWA 的 Cookie 限制可能会阻碍某些功能的实现，但是通过 Web Authentication，我们可以在 PWA 中实现身份验证和授权而无需使用 Cookie。虽然这需要编写更多的代码，但是这一解决方案为 PWA 在身份验证和授权等方面的使用提供了灵活性和安全性。
参考文献
- Using the Credential Management API
- Web Authentication: An API for accessing Public Key Credentials Level 1
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc38bc5ad90b6d0424f9f3