使用 Vue.js 和 v-offline 进行在线/离线检测

任何渐进式 Web 应用程序的关键基石之一是,任何可以离线使用的功能都应该离线使用。为了做到这一点,您需要知道设备在何时在线或离线。如果您使用 Vue.js,则有一个方便的小组件可用,这使您很容易在设备上连接或离线时切换用户界面部分或处理事件。

安装

在 Vue.js 项目中安装 v-offline。

1# Yarn
2$ yarn add v-offline
3
4# or NPM
5$ npm install v-offline --save

使用

 1[label ConnectivityExample.vue]
 2<template>
 3  <!-- @detected-condition fires when the connectivity status of the device changes -->
 4  <offline @detected-condition="handleConnectivityChange">
 5    <!-- Only renders when the device is online -->
 6    <div slot="online">
 7      <p>It looks like you're online! Here's all the things you can do...</p>
 8      ...
 9    </div>
10    <!-- Only renders when the device is offline -->
11    <div slot="offline">
12      <p>You appear to be offline, that's okay, we can still do things...</p>
13      ...
14    </div>
15  </offline>
16</template>
17
18<script>
19import offline from 'v-offline';
20
21export default {
22  components: {
23    offline
24  },
25
26  methods: {
27    handleConnectivityChange(status) {
28      console.log(status);
29    }
30  }
31}
32</script>

没有什么可添加的,这几乎是你所需要的一切。

<$>[注] 如果您喜欢这样的功能,但不愿意将另一个组件添加到您的依赖列表中,请尝试(https://andsky.com/tech/tutorials/js-navigator-online)在组件安装处理器中的窗口对象上的在线和离线事件。