PWA离线时a标签跳转失效但window.location.href正常的原因

这个现象本质是两种导航行为的底层实现逻辑、浏览器对不同请求的处理规则存在差异，和PWA的Service Worker缓存拦截逻辑直接相关。
注：你贴出的a标签存在闭合标签书写错误，正确写法应该是<a href="/alink">Back</a>，但这个问题不会导致离线跳转失败。

<a>标签导航的逻辑特性 #

• 点击<a>标签触发的是浏览器原生硬导航，对应请求的mode固定为navigate，属于最高优先级的用户主动导航请求。
• 浏览器对这类请求默认采用「网络优先」的校验逻辑：发起请求前会先检查网络连通性，如果处于离线状态，且Service Worker没有针对navigate类型的请求返回有效缓存响应，浏览器会直接中断导航，展示系统默认的无网络错误页，不会主动回退到本地HTTP缓存、内存往返缓存（bfcache）里的资源。
• 大部分开发者编写Service Worker缓存规则时，默认只会匹配脚本、样式、图片、接口这类普通资源请求，不会专门处理navigate类型的导航请求，这也是离线时a标签跳转失败的最常见诱因。

window.location.href赋值导航的逻辑特性 #

• 脚本修改window.location.href触发的同域导航，不会被浏览器标记为最高优先级的用户主动硬导航，在多数浏览器内核中这类请求会被归类为普通同域资源请求，不会强制触发网络连通性前置校验。
• 这类请求发起时，浏览器会优先查找内存缓存、bfcache、HTTP缓存里的已存资源，只要存在有效副本就直接加载，哪怕处于离线状态、Service Worker没有做专门拦截处理，也能正常打开页面。
• 即使缓存未命中，这类请求触发的网络错误也不会直接弹出系统级无网络提示，部分场景下会允许页面做自定义降级处理。

要让a标签在离线状态下也能正常跳转，只需要在Service Worker的fetch事件监听中，补充对navigate类型请求的缓存匹配逻辑即可，参考代码：

self.addEventListener('fetch', (event) => {
  // 拦截所有导航类请求
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // 命中缓存直接返回，未命中时可回退到已缓存的首页或自定义离线页
          return cachedResponse || caches.match('/index.html');
        })
    );
    return;
  }
  // 保留原有静态资源、接口请求的缓存处理逻辑
  // ...
})

如果是使用Workbox等PWA工具库开发，直接开启导航路由回退配置即可，不需要手写原生fetch拦截逻辑。

内容的提问来源于stack exchange，提问作者Ngọc Nguyễn