메인 콘텐츠로 건너뛰기
Capgo 로고
튜토리얼

Offline Screen in Vue, Angular, React with Capacitor

API 네트워크 및 Capacitor를 사용하여 Vue, Angular, React 애플리케이션에서 오프라인 화면을 구현하는 방법을 배워보세요. 사용자 경험을 향상시키기 위해 오프라인 시나리오를 효과적으로 처리하세요.

기사 기여자

마틴 도나디우

작가

발레리아

리뷰어

조던

편집기

Offline Screen in Vue, Angular, React with Capacitor

Vue 3, Angular 14, React에서 오프라인 화면 만들기

이 튜토리얼에서는 Vue 3, Angular 14, React 애플리케이션에서 오프라인 화면을 만들기 위해 네트워크 API를 사용하는 방법을 배웁니다. 네트워크 API는 네트워크 및 연결 정보를 제공하여 오프라인 시나리오를 처리하고 사용자 경험을 향상시킵니다. 더 깊은 연결 가능성 확인을 위해 온라인/오프라인 플래그 외에 더 깊은 연결 가능성 확인을 위해 @API/API-network-diagnostics를 사용할 수 있습니다. @capgo/capacitor-network-diagnostics can test URL reachability, TCP ports, and WebSocket handshakes from native code.

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

Node.js

프로젝트 설정

첫 번째로 각 프레임워크의 scaffold 도구를 사용하여 새로운 프로젝트를 생성해 보겠습니다.

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

안내를 따라 진행하고 추가 기능에 대한 질문이 나면 "Routing"을 선택하세요. 스페이스바 키를 눌러 선택하세요. 프로젝트가 생성될 때까지 기다리세요.

React

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

npx create-react-app offline-screen-react

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

네트워크 API를 설치합니다.

이제 네트워크 __CAPGO_KEEP_0__를 제공하는 패키지를 설치하겠습니다. @capacitor/network package, which provides the Network API.

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

npm install @capacitor/network

Capacitor __CAPGO_KEEP_1__이 전역으로 설치되어 있는지 확인하려면 다음 명령어를 실행하세요:

npx cap sync

Make sure you have the Capacitor CLI installed globally by running:

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

In your application template (App.vue),에 <div> 요소에 id가 offline-screen 으로 추가하여 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>

Now, 사용자가 오프라인이 될 때, 오프라인 화면이 표시되며 사용자가 다시 온라인이 될 때 오프라인 화면이 숨겨집니다.

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

}

In your application template (app.component.htmloffline 화면을 Vue, Angular, React에서 구현하는 방법에 대해 알아보겠습니다. <div> offline 화면을 표시하기 위해 id가 있는 요소를 추가하세요. offline-screen offline 화면 메시지를 표시할 요소 id를 입력하세요.

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

<!-- Your application content -->

offline 화면 메시지를 표시할 요소 id를 입력하세요. app.component.css offline 화면 메시지를 표시할 요소 id를 입력하세요.

#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 화면 메시지를 표시할 요소 id를 입력하세요.

offline 화면 메시지를 표시할 요소 id를 입력하세요.

offline 화면 메시지를 표시할 요소 id를 입력하세요. src/App.js offline 화면 메시지를 표시할 요소 id를 입력하세요. Network offline 화면 메시지를 표시할 요소 id를 입력하세요. @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

offline 화면 메시지를 표시할 요소 id를 입력하세요. App.css offline 화면 메시지를 표시할 요소 id를 입력하세요.

#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을 사용하여 Capacitor과 연결하세요. 사용 중인 경우 __CAPGO_KEEP_0__을 사용하세요. 네이티브 기능을 사용하는 경우 @capgo/capacitor-live-activities를 사용하세요. 네이티브 기능을 사용하는 경우 @capgo/capacitor-live-activities를 사용하세요. @capgo/capacitor-live-activities @capgo/capacitor-live-활동에 대한 구현 세부 사항을 위해 @capgo/capacitor-비디오 플레이어를 사용하여 @capgo/capacitor-비디오 플레이어를 사용하여 native 기능을 위해 @capgo/capacitor-비디오 플레이어 @capgo/capacitor-비디오 플레이어를 사용하여 구현 세부 사항을 위해, 그리고 @capgo/capacitor-네이티브 네비게이션을 사용하여 @capgo/capacitor-네이티브 네비게이션을 사용하여 native 기능을 위해.

Capacitor 앱에 대한 실시간 업데이트

웹-layer 버그가 활성화된 경우 앱 스토어 승인 대기 없이 Capgo를 통해 수정을 배포하세요. 사용자는 배경에서 업데이트 받으면서 네이티브 변경 사항은 일반적인 검토 경로에 남아 있습니다.

인간 지원을 위한 전문적인 서비스

시작하기

최신 블로그 소식

Capgo은 최고의 통찰력을 제공하여 전문적인 모바일 앱을 만들 수 있도록 도와줍니다.

Capacitor 앱에서 2-Way 통신
개발 모바일 +1
2025년 4월 26일

Capacitor 앱에서 오프라인 화면 만들기

OTA 업데이트 실수를 피하는 5가지 일반적인 방법
개발 보안 +1
2025년 4월 13일

OTA 업데이트 실수를 피하는 5가지 일반적인 방법

5 Security Best Practices for Mobile App Live Updates
개발 모바일 +1
2025년 1월 14일

모바일 앱 실시간 업데이트에 대한 5가지 보안 권장 사항

모든 블로그 글 보기