PWA跳转其他网页地址栏复现问题及配置详解

你用location.href = './xxx.html'跳转时浏览器地址栏重新显示，本质是目标页面没有被识别为当前PWA的内部页面，浏览器判定你跳出了应用边界，自动切回了普通网页浏览模式。你查到的两个解决方向具体操作和原理如下：

配置覆盖全站作用域的Service Worker #

Service Worker是PWA的请求控制层，它的scope（作用域）直接决定了哪些页面会被PWA接管，只有处于作用域内的页面，跳转时才会保持独立应用窗口状态，不会露出浏览器地址栏。
具体操作步骤：

• 优先把Service Worker脚本放在站点根目录，路径为/sw.js。如果脚本存放在子目录（比如/assets/sw.js），默认作用域只会覆盖对应子目录，无法接管全站页面请求。
• 受部署限制必须把子目录下的SW设为全站生效时，注册SW时手动指定scope为根路径，参考代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/assets/sw.js', { scope: '/' })
  })
}

• 配置SW缓存策略时，要把所有站内跳转的目标页面都加入预缓存列表，不要只缓存首页，否则跳转子页面时仍会触发普通网页加载逻辑。

全站页面关联同一份Web Application Manifest #

Manifest是PWA的应用身份配置文件，浏览器通过它判断页面是否属于同一个PWA应用，只有关联了同一份有效Manifest的页面，才会被判定为应用内页面。
具体操作步骤：

• 将Manifest文件放在站点根目录，路径为/manifest.webmanifest。
• 站点内所有HTML页面的<head>标签内，都要加入同一份Manifest的引用代码，不要只在首页添加：

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

• 检查Manifest的核心配置，确保scope字段设为站点根路径，display字段统一设为standalone（独立窗口模式），参考配置片段：

{
  "name": "应用全称",
  "short_name": "应用短名",
  "start_url": "/index.html",
  "scope": "/",
  "display": "standalone",
  "icons": []
}

如果不同页面关联的Manifest配置不一致，比如有的页面display设为browser（普通浏览器模式），跳转时就会触发模式切换，露出地址栏。

额外注意事项 #

• 站内跳转不要使用target="_blank"打开新窗口，新窗口默认会走普通浏览器模式，必然露出地址栏。
• 跳转到非本站域名的外部页面时，不管怎么配置都会跳出PWA窗口，这是浏览器的安全限制，无法绕过。
• 配置修改完成后，要清除浏览器中旧的Service Worker缓存和PWA安装记录，重新触发PWA安装，否则旧配置缓存会导致新规则不生效。

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