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

Offline Screen in Vue, Angular, React with Capacitor

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

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

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

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

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

In this tutorial, we will learn how to create an offline screen in Vue 3, Angular 14, and React applications using the Network API. The Network API provides network and connectivity information, allowing us to handle offline scenarios and provide a better user experience.

前提条件

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

プロジェクトの設定

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

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

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

React

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

npx create-react-app offline-screen-react

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

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

オフライン画面の実装

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

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) 内に、id="offline-screen" の <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> 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

Add the following styles to the 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;
}

オフラインになったときはオフライン画面が表示され、インターネットに接続されたときはオフライン画面が非表示になります。

Supporting Methods and Interfaces

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

Capgoのオフライン画面をVue、Angular、Reactから継続して使用するにはCapacitorを使用します。

Capgoのオフライン画面をVue、Angular、Reactから継続して使用するには__CAPGO_KEEP_0__を使用します。 Capgoのオフライン画面をVue、Angular、Reactから継続して使用するにはCapacitorを使用します。 Capgoの__CAPGO_KEEP_0__を使用して、@__CAPGO_KEEP_1__-live-activitiesを接続します。 Capgoのcapgoを使用して、@capacitor-live-activitiesを接続します。 native capabilityの使用に@capgo/capacitor-live-activitiesを使用します。 @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 @capgo/capacitor-live-activitiesを使用すること native capabilityの使用に@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細 native capabilityの使用に@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-video-player

オフライン画面からVue、Angular、ReactでCapacitorを継続して

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

__CAPGO_KEEP_0__を使用して、ウェブ層のバグが生じた場合、数日間待つ必要のないアプリストアの承認の代わりに修正を配信します。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビューのパスを維持します。

今すぐ始めましょう

Capgo gives you the best insights you need to create a truly professional mobile app.

Capacitorアプリで2方向の通信
__CAPGO_KEEP_0__アプリで2方向の通信
開発、モバイル、更新情報

2-Way Communication in Capacitor Apps

5つのOTA更新のよくある間違いを避ける
開発、セキュリティ、更新
2025年4月13日

5つのOTA更新のよくある間違いを避ける

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

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

ブログからすべてを参照