メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

Vue、Angular、Reactでオフライン画面を実装する方法を学びましょう。Capacitorと__CAPGO_KEEP_1__を使用して、ネットワークの不具合を効果的に処理し、ユーザー体験を向上させます。

Vue、Angular、またはReactアプリケーションでオフライン画面を実装する方法を学びましょう。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 URLの到達可能性、TCPポート、WebSocketハンドシェイクをテストできます。ネイティブcodeから

前提条件

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

プロジェクトの設定

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

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

プロンプトに従い、追加の機能について尋ねられたら、スペースバーを押して「Routing」を選択します。 スペースバーを押して "Routing" を選択してください。 key. を待ってください。プロジェクトが作成されるのを待ってください。

React

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

npx create-react-app offline-screen-react

Wait for the project to be created.

Network API をインストールしています。

Network __CAPGO_KEEP_0__ をインストールするには、まず @capacitor/network Network API というパッケージをインストールする必要があります。

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

npm install @capacitor/network

Capacitor プロジェクトの場合、次のコマンドも実行してください:

npx cap sync

Capacitor と CLI をグローバルにインストールしていることを確認してください:

npm install -g @capacitor/cli

オフライン画面の実装

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

__CAPGO_KEEP_0__ 3

__CAPGO_KEEP_1__で、__CAPGO_KEEP_0__ 3プロジェクトを開きます。__CAPGO_KEEP_2__を開き、__CAPGO_KEEP_3__から__CAPGO_KEEP_4__をインポートします。 src/main.js __CAPGO_KEEP_5__から__CAPGO_KEEP_4__をインポートします。 Network __CAPGO_KEEP_6__で、__CAPGO_KEEP_7__に__CAPGO_KEEP_8__を追加します。 @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);
};

__CAPGO_KEEP_9__にid="__CAPGO_KEEP_10__"の__CAPGO_KEEP_8__を追加します。App.vue__CAPGO_KEEP_11__が表示されます。 <div> __CAPGO_KEEP_12__がオンラインになります。 offline-screen 14

<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>

__CAPGO_KEEP_1__で、__CAPGO_KEEP_0__ 14プロジェクトを開きます。__CAPGO_KEEP_2__を開き、__CAPGO_KEEP_3__から__CAPGO_KEEP_4__をインポートします。

__CAPGO_KEEP_5__から__CAPGO_KEEP_4__をインポートします。

__CAPGO_KEEP_6__で、__CAPGO_KEEP_7__に__CAPGO_KEEP_8__を追加します。 src/app/app.component.ts __CAPGO_KEEP_9__にid="__CAPGO_KEEP_10__"の__CAPGO_KEEP_8__を追加します。 Network module from @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 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;
}

Now, when the user goes offline, the offline screen will be displayed. When the user comes back online, the offline screen will be hidden.

プロジェクト内にファイルを開き、

モジュールをインポートしてください。 src/App.js file and import the Network module from @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;
}

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

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

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

Vue、Angular、Reactのオフライン画面からCapacitorで続きます。

Vue、Angular、Reactのオフライン画面から__CAPGO_KEEP_0__を使用している場合 オフライン画面のネイティブメディアとインターフェイスの動作を計画する場合、Capacitorを接続します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用します。 Using @capgo/capacitor-live-activities native capabilityの使用に使用される@capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 @capgo/capacitor-video-playerを使用する native capabilityの使用に使用される@capgo/capacitor-video-player @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細、 @capgo/capacitor-native-navigationを使用する native capabilityの使用に使用される@capgo/capacitor-native-navigation

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

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

今すぐ始めましょう

ブログの最新記事

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

Capacitorアプリの2方向コミュニケーション
開発 モバイル +1
2025年4月26日

Capacitorアプリの2方向通信

OTA更新の5つの一般的なミスを避ける
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミスを避ける

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

モバイルアプリライブアップデートのための5つのセキュリティベストプラクティス

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