Vue 3, Angular 14, React에서 오프라인 화면을 만드는 방법

이번 튜토리얼에서는 Network API를 사용하여 Vue 3, Angular 14, React 앱에서 오프라인 화면을 만드는 방법을 알아봅니다. Network API는 네트워크 및 연결 정보를 제공하여 오프라인 상황을 처리하고 더 나은 사용자 경험을 제공할 수 있게 해줍니다. 단순한 온라인/오프라인 상태 확인을 넘어 더 정밀한 연결성 체크가 필요하다면, @capgo/capacitor-network-diagnostics는 native code를 통해 URL 도달 가능성, TCP 포트, WebSocket 핸드셰이크를 테스트할 수 있습니다.

사전 요구사항

시작하기 전에 다음 항목이 설치되어 있는지 확인하세요:

프로젝트 설정하기

먼저 각 프레임워크에 맞는 scaffolding 도구로 새 프로젝트를 만들어 보겠습니다.

Vue 3

터미널을 열고 다음 명령어를 실행해 새 Vue 3 프로젝트를 만드세요:

vue create offline-screen-vue3

기본 preset을 선택하고 프로젝트가 생성될 때까지 기다리세요.

Angular 14

터미널을 열고 다음 명령어를 실행하여 새로운 Angular 14 프로젝트를 생성하세요:

ng new offline-screen-angular14

프롬프트 안내에 따라 진행하며, 추가 기능(additional features) 선택 시 “Routing” 항목에서 스페이스바를 눌러 선택하세요. 프로젝트 생성이 완료될 때까지 기다려 주세요.

React

터미널을 열고 다음 명령어를 실행하여 새로운 React 프로젝트를 생성하세요:

npx create-react-app offline-screen-react

프로젝트 생성이 완료될 때까지 기다려 주세요.

Network API 설치 중

이제 다음 @capacitor/network 패키지를 설치하여 Network API 기능을 사용해 보겠습니다.

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

npm install @capacitor/network

Capacitor 프로젝트의 경우, 다음 명령어를 실행하여 native 프로젝트 파일을 동기화하세요:

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);
  };

}

에서 import 하세요. 애플리케이션 템플릿(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 모듈을 다음에서 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

다음 스타일을 다음 파일에 추가하세요: 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;
}

이제 사용자가 오프라인 상태가 되면 오프라인 화면이 표시됩니다. 다시 온라인 상태가 되면 오프라인 화면은 자동으로 숨겨집니다.

지원되는 메서드와 인터페이스

Network API는 네트워크 연결 관리를 돕는 다양한 메서드와 인터페이스를 제공합니다. 주요 항목은 다음과 같습니다:

getStatus(): 현재 네트워크 연결 상태를 조회합니다.
addListener('networkStatusChange', ...): 네트워크 연결 상태 변화를 감지합니다.

Vue, Angular, React에서 Capacitor와 함께 오프라인 화면 이어가기

사용 중이라면 Capacitor를 이용한 Vue, Angular, React 오프라인 화면 구현 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @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에서 확인하고, @capgo/capacitor-native-navigation 사용하기 @capgo/capacitor-native-navigation. 사용 시의 Native 기능