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

CapacitorでVue、Angular、Reactのオフライン画面を作成する

APIとCapacitorを使用したVue、Angular、またはReactアプリケーションのオフライン画面の実装方法を学びましょう。ネットワークの不連続性を効果的に処理することで、ユーザー体験を向上させます。

記事のクレジット

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

執筆者

バレリア

レビュー

ジョーダン

編集者

CapacitorでVue、Angular、Reactのオフライン画面を作成する

How to Create an Offline Screen in Vue 3, Angular 14, or 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プロジェクトを作成してください。

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

spacebar

npx create-react-app offline-screen-react

Wait for the project to be created.

API

ネットワーク @capacitor/network package, which provides the 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 __CAPGO_KEEP_1__ @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);
};

In your application template (),App.vueを追加します。 <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> を指定します。 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

コンテキスト: Capgo マーケティング ウェブサイト。役割: 短い UI ラベルまたはナビゲーション アイテム。見つける場所: コンポーネント FrameworkSelector.astro。メッセージ キー `framework_react` (フレームワーク React)。 src/App.js React プロジェクトで、以下のファイルを開きます。 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;
}

ファイル:

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

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

Vue、Angular、Reactでオフライン画面を作成し続けるにはCapacitor

Vue、Angular、Reactでオフライン画面を作成し続けるには__CAPGO_KEEP_0__ ネイティブメディアとインターフェイスの動作を計画するにはCapacitorを使用します。 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用してネイティブ機能と接続します。 capgo/capacitor-live-activitiesを使用してネイティブ機能と接続します。 capgo/capacitor-live-activitiesを使用して実装の詳細を確認します。 capgo/capacitor-video-playerを使用してネイティブ機能と接続します。 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 for the native capability in Using @capgo/capacitor-native-navigation.

リアルタイム更新が可能なCapacitorアプリ

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

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

コンテキスト:Capgoのマーケティングサイト。役割:サポートする説明文またはメタ説明文。見つける場所:コンポーネントGetStarted.astro。Capgoの製品/ブランド名と開発者用語をそのまま保存。メッセージキー`instant_updates_for_capacitor_apps_description`。

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

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

2-Way Communication in Capacitor Apps
最新の記事 コンテキスト:Capgoのマーケティングサイト。役割:短いUIラベルまたはナビゲーションアイテム。見つける場所:ページblog/[slug].astro。メッセージキー`latest_from_news`。 +1
2025年4月26日

2方向の通信を備えたCapacitorアプリ

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

OTA更新の5つの一般的なミス

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

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

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