Vue PWA离线页面如何动态显示缓存状态？

翌萱（打工版）提问于 2026-02-14 16:46:24 阅读 52

移动

我正在开发一个Vue PWA应用，想在页面顶部实时显示离线/在线状态。按教程写了service worker但遇到问题：


<template>
  <div>
    网络状态：{{ isOnline ? '在线' : '离线' }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOnline: navigator.onLine
    }
  },
  mounted() {
    window.addEventListener('online', () => this.isOnline = true)
    window.addEventListener('offline', () => this.isOnline = false)
  }
}
</script>

虽然能初始显示状态，但切换飞行模式后不会更新。用Chrome应用工具看，service worker确实在运行，但页面状态始终显示在线。试过检查navigator.serviceWorker.registered状态也没用，求大神指点哪里没搞对？

我来解答赞 5 收藏

反馈

1 条解答

Good“红凤 Lv1

这个问题其实是Vue PWA和Service Worker的通信机制没搞对。你现在的代码只监听了浏览器的在线状态，但Service Worker的状态变化没有同步到页面上。

要在Vue里动态显示缓存状态，得通过Service Worker的message事件来通信。首先在你的Service Worker文件里加个状态广播：

self.addEventListener('fetch', event => {

  if (!navigator.onLine) {

    self.clients.matchAll().then(clients => {

      clients.forEach(client => client.postMessage({ status: 'offline' }))

    })

  } else {

    self.clients.matchAll().then(clients => {

      clients.forEach(client => client.postMessage({ status: 'online' }))

    })

  }

})

然后在Vue组件里监听这个消息事件，更新状态：

export default {

  data() {

    return {

      isOnline: navigator.onLine

    }

  },

  mounted() {

    window.addEventListener('online', () => this.isOnline = true)

    window.addEventListener('offline', () => this.isOnline = false)



    navigator.serviceWorker.addEventListener('message', event => {

      if (event.data && event.data.status) {

        this.isOnline = event.data.status === 'online'

      }

    })

  }

}

这样改完就好了。不过说实话，PWA这块儿的坑确实多，我都踩过好几次。记得测试的时候要清缓存，不然老版本的Service Worker会捣乱。如果想省事，Workbox插件可以帮你简化很多配置，推荐试试。

2026-02-14 19:14