如何在安装PWA时将manifest的start_url设为用户当前唯一URL？

直接通过前端JS修改manifest是行不通的——浏览器在页面加载初期就会请求并缓存manifest文件，之后修改DOM里的<link rel="manifest">标签或者尝试改写manifest内容，浏览器都不会认。下面给你两个可行的方案：

方案一：服务端动态生成manifest.json（推荐） #

这是最直接可靠的方式，让服务端根据当前请求的用户身份，动态返回包含专属start_url的manifest内容。

举个Node.js/Express的例子：

// 后端路由处理manifest请求
app.get('/manifest.json', (req, res) => {
  // 从请求中获取用户ID（比如从Cookie、URL参数或认证信息里取）
  const userId = req.query.id || req.cookies.userId;
  const manifest = {
    name: '用户专属PWA',
    short_name: '我的PWA',
    start_url: `/user/id=${userId}`,
    display: 'standalone',
    // 其他manifest配置项...
    icons: [
      {
        src: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png'
      }
    ]
  };
  res.setHeader('Content-Type', 'application/manifest+json');
  res.json(manifest);
});

前端只需要正常引入manifest：

<link rel="manifest" href="/manifest.json">

当用户访问自己的专属页面时，浏览器请求manifest时，后端会返回带有对应start_url的文件，安装后PWA启动就会直接打开该用户的专属页面。

方案二：用Service Worker拦截启动请求并重定向（备选） #

如果没法改服务端，可以用Service Worker在PWA启动时，把默认的start_url重定向到用户的专属地址。

步骤如下：

1. 页面加载时，把当前用户的专属URL存入缓存：

// 用户访问专属页面时执行
async function saveUserStartUrl(url) {
  const cache = await caches.open('user-settings');
  await cache.put('start-url', new Response(url));
}
saveUserStartUrl(window.location.href);

2. 在Service Worker中，拦截导航请求并判断重定向：

self.addEventListener('fetch', (event) => {
  // 假设你的默认start_url是根路径"/"
  if (event.request.url.endsWith('/') && event.request.mode === 'navigate') {
    event.respondWith(
      caches.open('user-settings').then(cache => {
        return cache.match('start-url').then(response => {
          if (response) {
            return response.text().then(url => fetch(url));
          }
          return fetch(event.request);
        });
      })
    );
  }
});

这样用户安装PWA后，每次启动都会重定向到之前存储的专属URL。

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