如何在manifest.json中动态设置PWA的start_url为用户当前访问页面地址？

完全可以实现，以下是两种生产环境常用的可行方案：

方案1：动态生成manifest.json #

放弃使用静态的manifest.json文件，改为由后端接口动态生成manifest内容：

• 前端所有页面统一引入manifest的标签：<link rel="manifest" href="/api/generate-pwa-manifest">
• 后端接口收到请求时，先获取用户当前访问的页面URL作为start_url的值，再拼接其余固定的manifest配置项
• 接口返回时设置响应头Content-Type: application/manifest+json即可
  该方案逻辑简单，几乎没有额外的前端适配成本，适配27个页面的需求完全无需逐个页面修改配置。

方案2：Service Worker拦截跳转 #

如果你不想修改后端逻辑，也可以用Service Worker做请求拦截实现动态跳转：

• 静态manifest.json里的start_url先填一个自定义的占位路径，比如/pwa-launch-redirect
• 用户首次添加PWA到桌面时，在安装事件回调里将用户当前访问的页面URL存储到localStorage或者IndexedDB中
• 在Service Worker的fetch事件里拦截对/pwa-launch-redirect的请求，直接重定向到之前存储的用户常用页面地址即可

注意事项 #

如果你的需求是用户从哪个页面添加PWA，打开就默认进入哪个页面，无需后续动态修改的话，也可以直接为27个页面分别生成对应静态manifest文件，页面引入对应自身的manifest即可，开发成本也很低。

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