Vue、Angular、ReactでCapacitorを使ったオフライン画面

Network API と Capacitor を使用して、Vue、Angular、または React アプリケーションにオフライン画面を実装する方法を学びましょう。オフライン時の挙動を適切にハンドリングすることで、ユーザーエクスペリエンスを向上させることができます。

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を作成

プロジェクトのセットアップ

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

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 API のインストール

次に、 @capacitor/network パッケージをインストールして、Network API を利用できるようにします。

ターミナルを開き、プロジェクトのディレクトリに移動します。その後、次のコマンドを実行してパッケージをインストールしてください：

npm install @capacitor/network

Capacitor プロジェクトの場合は、以下のコマンドも実行してネイティブプロジェクトのファイルを同期してください:

npx cap sync

まず、以下のコマンドを実行して Capacitor CLI がグローバルにインストールされていることを確認してください:

npm install -g @capacitor/cli

オフライン画面の実装

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

Vue 3

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> 要素を追加し、id に 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> の 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 ファイルを開き、 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 ファイル内で参照します：

#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', ...)：ネットワーク接続の変化を監視します。

Vue、Angular、React でオフライン画面の続きを Capacitor で進める

使用している場合 Vue、Angular、ReactでCapacitorを使ったオフライン画面 ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 @capgo/capacitor-video-player の使い方におけるネイティブ機能については、 @capgo/capacitor-video-player @capgo/capacitor-video-player の実装の詳細、および @capgo/capacitor-native-navigation の活用 @capgo/capacitor-native-navigation. の使い方におけるネイティブ機能については