How to Create an Offline Screen in Vue 3, Angular 14, or 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.

기초 조건

이 튜토리얼을 시작하기 전에 다음을 설치하십시오:

• Node.js (version 14 or higher)
• Vue CLI
• Angular CLI
• Create React App

프로젝트 설정

첫 번째로, 각 프레임워크의 respective scaffolding tool을 사용하여 새로운 프로젝트를 생성하십시오.

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

네트워크 __CAPGO_KEEP_0__를 설치중입니다.

이제, 네트워크 API를 설치해 보겠습니다.

__CAPGO_KEEP_0__는 __CAPGO_KEEP_0__를 설치합니다. @capacitor/network 패키지, API 네트워크를 제공합니다.

터미널을 열고 프로젝트 디렉토리로 이동한 후, 다음 명령어를 실행하여 패키지를 설치하세요.

npm install @capacitor/network

Capacitor 프로젝트의 경우, 다음 명령어를 실행하여 네이티브 프로젝트 파일을 동기화하세요.

npx cap sync

Capacitor CLI이 전역으로 설치되어 있는지 확인하세요. 다음 명령어를 실행하여 확인하세요.

npm install -g @capacitor/cli

오프라인 화면 구현

다음으로, 각 프레임워크에서 오프라인 화면 기능을 구현할 것입니다. 사용자가 오프라인 상태가 되었을 때 단순한 메시지를 표시할 것입니다.

Vue 3

Vue 3 프로젝트에서, 다음 파일을 열고 __CAPGO_KEEP_0__ 모듈을 __CAPGO_KEEP_1__에서 import하세요. src/main.js 애플리케이션 템플릿 ( __CAPGO_KEEP_2__ )에 다음 코드를 추가하세요. Network __CAPGO_KEEP_3__ @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_4__App.vue__CAPGO_KEEP_5__ <div> __CAPGO_KEEP_0__ ID를 가진 요소 offline-screen __CAPGO_KEEP_1__ 오프라인 화면 메시지를 표시하기 위해:

<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 모듈을 import하세요. @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__CAPGO_KEEP_2__ )에 <div> __CAPGO_KEEP_0__ ID를 가진 요소 offline-screen __CAPGO_KEEP_1__ 오프라인 화면 메시지를 표시하기 위해:

<div id="offline-screen">
  <h1>You are offline</h1>
  <p>Please check your internet connection and try again.</p>
</div>

<!-- Your application content -->

__CAPGO_KEEP_3__ 오프라인 화면 스타일을 추가하세요. 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;
}

인터넷 연결이 끊겼을 때 offline 화면이 표시됩니다. 인터넷 연결이 다시 되면 offline 화면이 사라집니다.

React

Capgo CLI를 사용하여 React 프로젝트에서 Capgo를 사용하기 위해 다음 단계를 따르세요. src/App.js file Network Capgo를 사용하기 위해 Capgo 모듈을 import하세요. Capgo 모듈은 Capgo CLI에서 생성한 Capgo 모듈을 import합니다. @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

file: App.css 인터넷 연결이 끊겼을 때 offline 화면이 표시됩니다. 인터넷 연결이 다시 되면 offline 화면이 사라집니다.

#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_KEEP_0__는 네트워크 연결을 관리하는 데 도움이 되는 여러 메서드와 인터페이스를 제공합니다. 주요 메서드와 인터페이스는 다음과 같습니다:

The Network API provides several methods and interfaces to help you handle the network connection. Here are some of the key ones:

• getStatus(): Query the current status of the network connection.
• addListener('networkStatusChange', ...): 네트워크 연결 상태의 변경을 감지하세요.

Vue, Angular, React에서 Offline Screen에서 Capacitor으로 계속 진행하세요.

__CAPGO_KEEP_0__을 사용하는 경우 Vue, Angular, React에서 Offline Screen에서 Capacitor으로 계속 진행하세요. 자연스러운 미디어 및 인터페이스 동작을 계획하려면 __CAPGO_KEEP_0__을 __CAPGO_KEEP_1__-live-activities와 연결하세요. 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의 구현 세부 사항을 연결하세요. 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.