任何渐进式 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)在组件安装处理器中的窗口
对象上的在线
和离线
事件。