使用@nuxtjs/pwa实现无缓存跳转离线页及离线页返回首页问题求助

根因定位 #

该问题的随机表现核心是@nuxtjs/auth-next的登录态校验逻辑优先级高于Workbox的路由捕获逻辑，离线状态下未登录/登录态过期时，auth中间件会先触发重定向到/login，进而触发跨域Keycloak跳转，Workbox无法捕获跨域请求的异常，最终出现默认离线页或循环跳转的表现。

修复步骤 #

1. 调整Workbox路由规则，排除认证相关路径捕获 #

修改workbox-cache.js，增加路径过滤规则，避免拦截/login和跨域请求的导航：

workbox.routing.setCatchHandler(async ({ event, request }) => {
  const url = new URL(request.url)
  // 跳过认证相关路径、跨域请求的捕获
  if (
    request.mode !== 'navigate' ||
    url.pathname.startsWith('/login') ||
    url.origin !== location.origin
  ) {
    return Response.error()
  }
  return await workbox.precaching.matchPrecache('/offline.html')
})

2. 调整nuxt.config.js的Workbox配置，预缓存必要静态资源 #

把首页依赖的核心应用壳资源加入预缓存列表，避免离线加载首页时请求未缓存的_nuxt文件：

pwa : {
  workbox: {
    cachingExtensions: ['@/plugins/workbox-cache.js'],
    offlineAssets: ['/offline.html', '/'],
    // 预缓存应用壳核心chunk，可根据实际项目调整匹配规则
    precache: {
      include: [/^_nuxt\/app\..*\.js$/, /^_nuxt\/commons\..*\.js$/, /^_nuxt\/.*\.css$/]
    }
  }
}

3. 新增离线态登录态校验拦截 #

在auth-next的配置中增加离线判断，离线状态下禁止触发登录重定向：
修改nuxt.config.js的auth配置：

auth: {
  plugins: ['@/plugins/auth-offline.js'],
  // 其余原有配置保持不变
}

新增plugins/auth-offline.js：

export default function ({ app, redirect, route }) {
  // 离线状态下直接返回，不触发登录重定向
  if (!navigator.onLine) {
    // 若当前路径不是离线页也不是首页，直接跳转到离线页
    if (route.path !== '/offline.html' && route.path !== '/') {
      return redirect('/offline.html')
    }
    return
  }
}

4. 修改offline.html的跳转逻辑 #

离线页内的首页跳转不要直接用原生href跳转，改为先判断在线状态再执行操作：

<a href="javascript:void(0)" onclick="goHome()">返回首页</a>
<script>
function goHome() {
  if (navigator.onLine) {
    location.href = '/'
  } else {
    alert('当前处于离线状态，无法跳转首页')
    // 也可直接在离线页展示离线态首页内容，无需跳转
  }
}
</script>

验证步骤 #

1. 清理浏览器缓存和已注册的Service Worker
2. 首次在线访问首页，确保Service Worker注册成功、所有预缓存资源加载完成
3. 断开网络后测试三类场景：已登录状态访问未缓存路由、未登录状态访问任意路由、离线页点击返回首页

依赖适配说明：
该方案适配当前使用的nuxt 2.15.8、@nuxtjs/pwa 3.3.5、@nuxtjs/auth-next 5.x版本，无需升级依赖即可生效。

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