安卓网页固定到桌面后Cookie丢失？SvelteKit/PocketBase认证问题

可能忽略的关键点 #

1. Cookie属性配置不兼容PWA环境 #

安卓Chrome的桌面快捷方式（PWA）会使用独立的存储上下文，对Cookie的属性要求更严格：

• Secure属性：必须开启，Vercel部署的HTTPS环境下，PWA容器强制要求Secure Cookie才能持久化存储。如果PocketBase返回的Cookie未设置Secure，PWA会直接拒绝保存。
• SameSite属性：建议设置为None（需配合Secure），避免PWA跨上下文访问Cookie时被拦截。若设为Lax或Strict，可能导致PWA启动时无法携带Cookie。
• Domain属性：确保Cookie的Domain匹配Vercel的域名（比如your-app.vercel.app），不要设置过于宽泛或错误的域名，否则PWA容器无法识别。
• Path属性：若设置了特定Path，要保证PWA的所有路由都在该Path范围内，否则无法读取Cookie。

2. PocketBase的Session Cookie配置问题 #

检查PocketBase的认证Cookie是否被设为会话Cookie（无Expires/Max-Age），如果是，PWA容器关闭后会自动清除。需要在PocketBase后台或初始化代码中配置持久化Cookie的过期时间，比如设置较长的Max-Age值。

3. 安卓PWA的存储隔离特性 #

部分安卓版本的Chrome会将PWA的存储与普通浏览器完全隔离，若Cookie是在普通浏览器中设置的，PWA容器无法读取。需确保在PWA环境下完成首次登录，生成适配PWA容器的Cookie。

调试方法 #

• 远程调试PWA容器：
  1. 打开安卓设备开发者选项，开启USB调试。
  2. 电脑端Chrome访问chrome://inspect/#devices，找到目标PWA应用并点击inspect。
  3. 在DevTools的Application面板查看Cookies，确认Cookie是否存在、属性是否正确，对比普通浏览器中的Cookie差异。
• 打印Cookie日志：
  在SvelteKit的load函数或前端代码中添加console.log(document.cookie)，分别在普通浏览器和PWA中运行，查看输出的Cookie内容是否一致。
• 验证PocketBase的Cookie响应：
  在DevTools的Network面板查看登录接口的响应头Set-Cookie字段，确认Secure、SameSite、Domain、Max-Age等必要属性是否正确设置。

内容的提问来源于stack exchange，提问作者ludeed