如何向PWA传递URL参数？跨设备启动配置适配问题

问题背景 #

在浏览器中打开应用时，可通过URL查询参数获取token并存入localStorage的@token键，但将应用添加为手机主屏幕的PWA后，@token为空。这是因为PWA与浏览器拥有独立的本地存储作用域，且默认启动URL（start_url）固定，不会携带原URL的参数。需要实现从浏览器向PWA传递参数（如https://foo.bar?token=123，让PWA能获取到token=123）。

可行解决方案 #

1. 服务器端动态生成Manifest文件

静态Manifest的start_url是固定值，无法携带动态参数。通过服务器根据用户访问的URL参数动态生成Manifest，将token拼入start_url，就能让PWA启动时携带参数。

示例（Node.js/Express）：

app.get('/manifest.json', (req, res) => {
  // 从请求URL中获取token参数
  const token = req.query.token || '';
  // 动态构建Manifest内容
  const manifest = {
    "name": "pwa-test",
    "short_name": "pwa-test",
    "display": "standalone",
    "background_color": "#ffffff",
    "lang": "ru",
    "scope": "/",
    "start_url": `/?token=${token}`, // 将token拼入启动URL
    "theme_color": "#000000",
    "description": "pwa-fullscreen-test description",
    "orientation": "natural",
    "icons": [
      {
        "src": "favicon.ico",
        "sizes": "64x64 32x32 24x24 16x16",
        "type": "image/x-icon"
      },
      {
        "src": "vite192.svg",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "vite512.svg",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "categories": ["education"]
  };
  res.setHeader('Content-Type', 'application/manifest+json');
  res.json(manifest);
});

用户访问https://foo.bar?token=123时，服务器返回的Manifest中start_url会变成/?token=123，添加到主屏幕后，PWA启动时就能直接读取URL参数。

2. 使用Cookie共享Token

同域下，PWA与浏览器共享Cookie（只要Cookie的domain和path配置正确）。将token存入Cookie，而非localStorage，就能实现跨环境的数据共享。

• 浏览器端存入Cookie：

const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
if (token) {
  // 配置Cookie属性，确保同域下PWA可读取
  document.cookie = `token=${token}; path=/; domain=.foo.bar; secure; same-site=strict`;
}

• PWA启动时读取Cookie：

const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};
const token = getCookie('token');
if (token) {
  localStorage.setItem('@token', token);
}

注意：需在HTTPS环境下使用secure属性，same-site属性根据业务需求调整，确保合法性。

3. 兼容Safari与Android的Start_url调整方案

你提到start_url设为空字符串时Safari有效但Android失效，这是因为不同浏览器对start_url的解析规则不同。可尝试以下兼容方案：

• 将静态Manifest的start_url设为"./"（相对路径），然后在浏览器端添加PWA前，通过JS动态修改Manifest的start_url：

// 获取页面中的Manifest链接标签
const manifestLink = document.querySelector('link[rel="manifest"]');
if (manifestLink) {
  const token = new URLSearchParams(window.location.search).get('token');
  if (token) {
    // 假设已获取到原始Manifest内容
    const updatedManifest = {
      ...originalManifest,
      start_url: `/?token=${token}`
    };
    // 生成Blob URL替换原Manifest链接
    const blob = new Blob([JSON.stringify(updatedManifest)], { type: 'application/manifest+json' });
    manifestLink.href = URL.createObjectURL(blob);
  }
}

注意：该方案依赖浏览器对动态修改Manifest的支持，部分旧版本浏览器可能不兼容，优先推荐动态生成Manifest的方案。

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