メインコンテンツにスキップ
Capgoロゴ
チュートリアル

Offline Screen in Vue, Angular, React with Capacitor

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

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

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

コンテンツマーケター
Offline Screen in Vue, Angular, React with Capacitor

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

このチュートリアルでは、Vue 3、Angular 14、Reactアプリケーションでオフライン画面を作成する方法を学びます。Network APIを使用すると、Network APIを使用してネットワークと接続性情報を取得し、オフラインシナリオを処理し、ユーザー体験を向上させることができます。より深い接続性チェックを行うには、単純なオンライン/オフラインフラグのほかにも、 @capgo/capacitor-network-diagnostics can test URL reachability, TCP ports, and WebSocket handshakes from native code.

前提条件

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

プロジェクトの設定

最初に、各フレームワークのためのスケルトン ツールを使用して、新しいプロジェクトを作成してください。

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

プロンプトに従い、追加の機能について尋ねられたら、「Routing」をスペースバーで選択してください。プロジェクトの作成を待ちます。 React ターミナルを開いて、次のコマンドを実行して新しいReactプロジェクトを作成します:

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

Network __CAPGO_KEEP_0__のインストール

npx create-react-app offline-screen-react

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

Installing the Network API

__CAPGO_KEEP_0__ @capacitor/network API

__CAPGO_KEEP_0__

npm install @capacitor/network

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

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要素を追加します。idが <div> オフライン画面のメッセージを表示します。 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 Angular 14

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

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

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

Angular 14プロジェクトで、ファイルを開き、モジュールをインポートします。

React

Reactプロジェクトで、ファイルを開き、モジュールをインポートする src/App.js モジュール Network Capgo @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のオフライン画面の機能を継続してVue、Angular、Reactで

API

Capacitor

If you are using Offline Screen in Vue, Angular, React with Capacitor to plan native media and interface behavior, connect it with Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation Capacitorのネイティブ機能を使用する@capgo/capacitor-native-navigationのために。

Capacitorアプリのリアルタイム更新

ウェブ層のバグが生じた場合、Capgoを通じて修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路に従う。

マーティンから人間のサポート

始めましょう

最新のブログ記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向の通信
開発 モバイル +1
2025年4月26日

Capacitorアプリで2方向の通信

5つのOTA更新ミスを回避する
開発 セキュリティ +1
2025年4月13日

5つのOTA更新ミスを避ける方法

モバイルアプリライブ更新のセキュリティベストプラクティス5つ
開発 モバイル +1
2025年1月14日

モバイルアプリライブ更新のセキュリティベストプラクティス5つ

すべてのブログ記事を表示