Safari与PWA的会话共享问题及解决方案咨询

一、Safari与PWA的共享存储替代方案 #

由于Safari的PWA和主浏览器运行在完全隔离的容器中，localStorage/sessionStorage/Cookie无法直接共享，目前没有官方原生跨容器共享存储方案，推荐以下替代思路：

• 服务器端会话绑定
  放弃客户端存储同步，改用服务器端会话机制：

  1. 用户在Safari登录后，服务器生成唯一会话ID，将其存入Safari的Cookie（设置HttpOnly、Secure、SameSite=Strict保障安全）。
  2. PWA启动时，引导用户通过带会话参数的链接（或二维码）将该会话ID传递给PWA。
  3. PWA拿到会话ID后，向服务器发起验证请求，服务器返回对应用户的登录状态，完成同步。

• 基于设备标识的服务器端关联
  利用Web Crypto API生成设备唯一标识（需注意隐私合规，仅使用浏览器公开的非敏感信息）：

  1. 在Safari中，通过navigator.userAgent、screen等信息，结合Web Crypto生成哈希值作为设备标识，存储到IndexedDB。
  2. 将该标识与用户登录状态绑定到服务器。
  3. PWA启动后，生成相同的设备标识，向服务器查询对应登录状态，自动同步。

二、从Safari直接唤起PWA并传递会话 #

使用target="_blank"无法唤起PWA，可通过以下方式实现：

• 配置Universal Links（通用链接）
  这是Safari唤起PWA的官方方案：

  1. 在你的域名根目录放置apple-app-site-association文件，配置PWA的关联规则（指定域名下的链接唤起PWA）。
  2. 在PWA的manifest.json中，确保start_url和scope覆盖要跳转的链接路径，同时设置display: standalone或display: fullscreen。
  3. 在Safari页面的按钮点击事件中，直接跳转携带会话参数的通用链接：

     document.querySelector('#launch-pwa-btn').addEventListener('click', () => {
       // 从Safari的Cookie或存储中获取当前会话ID
       const sessionId = document.cookie.split('; ').find(row => row.startsWith('session_id=')).split('=')[1];
       // 跳转至带会话参数的通用链接
       window.location.href = `https://your-domain.com/pwa-redirect?session_id=${sessionId}`;
     });
     

  4. PWA启动时，读取URL中的session_id参数，向服务器验证会话，同步登录状态。

• 注意事项

  • 只有当用户已将PWA添加到主屏幕时，通用链接才会直接唤起PWA，否则仍会在Safari中打开页面，可在页面中添加引导用户添加到主屏幕的提示。
  • 会话参数需通过HTTPS传输，同时设置会话ID的过期时间，避免泄露风险。

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