Offline Screen in Vue, Angular, React with Capacitor

ネットワークとを使用して、Vue、Angular、またはReactアプリケーションでオフライン画面を実装する方法を学びます。 API と Capacitor を使用して、ユーザー体験を向上させて、オフラインシナリオを効果的に処理します。

記事のクレジット

マーティン・ドナディュー

ライター

バレリア

レビュアー

ジョーダン

エディター

Vue 3、Angular 14、またはReactでオフライン画面を作成する方法

このチュートリアルでは、Vue 3、Angular 14、Reactアプリケーションでオフライン画面を作成する方法を学びます。Network APIを使用して、Network APIはネットワークと接続性に関する情報を提供し、オフラインシナリオを処理し、ユーザー体験を向上させることができます。ネットワークのより深い到達可能性チェックのために、単純なオンライン/オフラインフラグを超えて、 @capgo/capacitor-ネットワーク診断 URLのアクセス性やTCPポート、WebSocketハンドシェイクを、ネイティブのcodeからテストできます。

前提条件

始める前に、以下をインストールしてください:

Node.js (バージョン14以上)
Vue CLI
Angular CLI
/ja/blog/create-offline-screen-in-vue-angular-react/

Live Update

Cloudflare

Capacitor

GitHub

vue create offline-screen-vue3

Capgo

code

API

ng new offline-screen-angular14

SDK CLI npm

React

ターミナルを開いて、次のコマンドを実行して新しいReactプロジェクトを作成します:

npx create-react-app offline-screen-react

プロジェクトの作成を待ちます。

Network APIのインストール

Network __CAPGO_KEEP_0__を提供するパッケージをインストールしましょう。 @capacitor/network パッケージ、ネットワーク API を提供します。

__CAPGO_KEEP_0__プロジェクトの場合、次のコマンドを実行してネイティブプロジェクトファイルを同期することも必要です:

npm install @capacitor/network

グローバルにCapacitor __CAPGO_KEEP_1__がインストールされていることを確認するには、次のコマンドを実行してください:

npx cap sync

Make sure you have the Capacitor CLI installed globally by running:

npm install -g @capacitor/cli

次に、各フレームワークでオフライン画面の機能を実装します。ユーザーがオフラインになったときに、シンプルなメッセージを表示します。

Vue 3プロジェクトで、ファイルを開きます。 src/main.js ファイルと Network モジュールをインポートします。 @capacitor/network:

import { createApp } from 'vue';
import { Network } from '@capacitor/network';

const app = createApp(App);

// Your application setup

app.mount('#app');

Network.addListener('networkStatusChange', status => {
  if (status.connected) {
    // User is back online
    // Hide the offline screen
    document.getElementById('offline-screen').style.display = 'none';
  } else {
    // User is offline
    // Display the offline screen
    document.getElementById('offline-screen').style.display = 'block';
  }
});

const logCurrentNetworkStatus = async () => {
  const status = await Network.getStatus();
  console.log('Network status:', status);
};

モジュールをインポートします。App.vueモジュールをインポートします。 <div> アプリケーションテンプレート( offline-screen 要素を追加します。

<template>
  <div id="app">
    <div id="offline-screen">
      <h1>You are offline</h1>
      <p>Please check your internet connection and try again.</p>
    </div>
    <!-- Your application content -->
  </div>
</template>

<style>
#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}
</style>

要素を追加します。

Angular 14

Angular 14プロジェクトで、ファイルを開きます。 src/app/app.component.ts ファイルと Network モジュールをインポートします。 @capacitor/network:

import { Component } from '@angular/core';
import { Network } from '@capacitor/network';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    Network.addListener('networkStatusChange', status => {
      if (status.connected) {
        // User is back online
        // Hide the offline screen
        document.getElementById('offline-screen').style.display = 'none';
      } else {
        // User is offline
        // Display the offline screen
        document.getElementById('offline-screen').style.display = 'block';
      }
    });
  }

  logCurrentNetworkStatus = async () => {
    const status = await Network.getStatus();
    console.log('Network status:', status);
  };

}

アプリケーションテンプレート（）内でapp.component.html), <div> を追加します。 offline-screen を表示するオフライン画面メッセージのID

<div id="offline-screen">
  <h1>You are offline</h1>
  <p>Please check your internet connection and try again.</p>
</div>

<!-- Your application content -->

ファイルに以下のスタイルを追加します。 app.component.css ファイル:

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

ユーザーがオフラインになったときにオフライン画面が表示され、ユーザーがオンラインになったときにオフライン画面が非表示になります。

React

ファイルを開き、 src/App.js モジュールをインポートします。 Network ファイル @capacitor/network:

import React, { useEffect } from 'react'
import { Network } from '@capacitor/network'

function App() {

  useEffect(() => {
    Network.addListener('networkStatusChange', (status) => {
      if (status.connected) {
        // User is back online
        // Hide the offline screen
        document.getElementById('offline-screen').style.display = 'none'
      }
      else {
        // User is offline
        // Display the offline screen
        document.getElementById('offline-screen').style.display = 'block'
      }
    })
  }, [])

  const logCurrentNetworkStatus = async () => {
    const status = await Network.getStatus()
    console.log('Network status:', status)
  }

  return (
    <div id="app">
      <div id='offline-screen'>
        <h1>You are offline</h1>
        <p>Please check your internet connection and try again.</p>
      </div>
      {/* Your application content */}
    </div>
  )

}

export default App

ファイルに以下のスタイルを追加します。 App.css file:

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

利用者がオフラインになった場合、オフライン画面が表示されます。利用者がオンラインに戻った場合、オフライン画面は非表示になります。

サポートするメソッドとインターフェイス

Network APIは、ネットワーク接続を管理するためにいくつかのメソッドとインターフェイスを提供しています。ここでは、主なものを紹介します。

getStatus():ネットワーク接続の現在の状態を確認します。
addListener('networkStatusChange', ...):ネットワーク接続の変更を監視します。

Keep going from Offline Screen in Vue, Angular, React with Capacitor

あなたが使用している Offline Screen in Vue, Angular, React with Capacitor nativeメディアとインターフェイスの動作を計画する場合、native capabilityを使用して Using @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities @capgo/capacitor-ライブアクティビティ @capgo/capacitor-ライブアクティビティの実装詳細について Using @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-ビデオプレーヤーのネイティブ機能 @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-ビデオプレーヤーの実装詳細について、そして Using @capgo/capacitor-ネイティブナビゲーション @capgo/capacitor-ネイティブナビゲーションのネイティブ機能