Vue.jsとv-offlineを使用したオンライン/オフライン検出

プログレッシブウェブアプリの重要な基礎の1つは、オフラインで利用できる機能はすべてオフラインで利用できるようにする必要があるということです。 そのためには、デバイスがオンラインかオフラインかを知る必要があります。 Vue.jsを使用している場合は、便利な小さなコンポーネントを利用できます。これにより、デバイスがオンラインまたはオフラインになるたびに、UIの一部を切り替えたり、イベントを処理したりすることが非常に簡単になります。 見てみましょう。

インストール

Vue.jsプロジェクトにv-offlineをインストールします。

# Yarn
$ yarn add v-offline

# or NPM
$ npm install v-offline --save

使用法

ConnectivityExample.vue

<template>
  <!-- @detected-condition fires when the connectivity status of the device changes -->
  <offline @detected-condition="handleConnectivityChange">
    <!-- Only renders when the device is online -->
    <div slot="online">
      <p>It looks like you're online! Here's all the things you can do...</p>
      ...
    </div>
    <!-- Only renders when the device is offline -->
    <div slot="offline">
      <p>You appear to be offline, that's okay, we can still do things...</p>
      ...
    </div>
  </offline>
</template>

<script>
import offline from 'v-offline';

export default {
  components: {
    offline
  },

  methods: {
    handleConnectivityChange(status) {
      console.log(status);
    }
  }
}
</script>

追加するものは他にあまりありません。必要なのはそれだけです。 楽しみ！

このような機能が必要であるが、依存関係リストにさらに別のコンポーネントを追加することに熱心でない場合は、 onlineおよびofflineイベントをリッスンしてみてください。コンポーネントのマウントされたハンドラー内のX179X]オブジェクト。