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

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

前提条件

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

Node.js (バージョン 14 以上)
Vue CLI
Angular CLI
Create React App

プロジェクトの設定

まず、各フレームワークのためのスケルトンツールを使用して、新しいプロジェクトを作成しましょう。

Vue 3

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

vue create offline-screen-vue3

デフォルトのプレセットを選択し、プロジェクトの作成を待ちます。

Angular 14

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

ng new offline-screen-angular14

指示に従い、追加の機能について質問されたら、スペースバーを押して「Routing」を選択してください。 プロジェクトが作成されるのを待ってください。 React

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

プロジェクトが作成されるのを待ってください。

npx create-react-app offline-screen-react

Network __CAPGO_KEEP_0__のインストール

Network APIを提供するパッケージをインストールしましょう。

ターミナルを開いてプロジェクトディレクトリに移動してください。次に、次のコマンドを実行してパッケージをインストールしてください: @capacitor/network Installing the Network API

Now, let’s install the package, which provides the Network __CAPGO_KEEP_0__.

npm install @capacitor/network

For Capacitor projects, also run the following command to sync the native project files:

npx cap sync

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

npm install -g @capacitor/cli

オフライン画面の実装

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

Vue 3

Vue 3のプロジェクトで、以下のファイルを開きます。 src/main.js モジュールをインポートするには、以下のモジュールをインポートします。 Network アプリケーションテンプレート（<template>）に、以下の要素を追加します。 @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);
};

オフライン画面のメッセージを表示するために、idが"__CAPGO_KEEP_2__"の要素を追加します。App.vue__CAPGO_KEEP_2__ <div> __CAPGO_KEEP_1__ offline-screen __CAPGO_KEEP_0__

<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 __CAPGO_KEEP_0__ 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> 要素を追加して、id を offline-screen に設定して、オフライン画面のメッセージを表示します:

<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

Reactプロジェクト内で、以下のファイルを開き、以下のモジュールをインポートしてください。 src/App.js __CAPGO_KEEP_0__ Network Capacitor @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 ネットワークが切断されたときはオフライン画面が表示され、ネットワークが復元されたときはオフライン画面が非表示になります。

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

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

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

メソッドとインターフェイス

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

The Network API provides several methods and interfaces to help you handle the network connection. Here are some of the key ones:

getStatus(): ネットワーク接続の変更を監視します。
addListener('networkStatusChange', ...)Vue、Angular、Reactのオフライン画面から続きます。__CAPGO_KEEP_0__

Network Capacitor

If you are using オフライン画面をVue、Angular、Reactで使用し、Capacitorでネイティブメディアとインターフェイスの動作を計画する場合、Capacitorに接続します。 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities ネイティブ機能を使用するには@capgo/capacitor-live-activitiesを使用します。 @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 Using @capgo/capacitor-video-player ネイティブ機能を使用するには@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細 Using @capgo/capacitor-native-navigation @capgo/capacitor-native-navigationを使用することでネイティブ機能を実現します。 native capability in Using @capgo/capacitor-native-navigation.

CapacitorでVue、Angular、Reactのオフライン画面

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

前提条件

プロジェクトの設定

Vue 3

Angular 14

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

Network APIを提供するパッケージをインストールしましょう。

オフライン画面の実装

Vue 3

Angular 14

React

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

Network Capacitor