메인 콘텐츠로 건너뛰기
Capgo 로고
강좌

Capacitor와 __CAPGO_KEEP_1__를 사용하여 Vue, Angular, React 애플리케이션에서 오프라인 화면을 구현하는 방법

API와 Capacitor를 사용하여 Vue, Angular, React 애플리케이션에서 오프라인 화면을 구현하는 방법

마틴 도나디우

마틴 도나디우

콘텐츠 마케터
Capacitor와 __CAPGO_KEEP_1__를 사용하여 Vue, Angular, React 애플리케이션에서 오프라인 화면을 구현하는 방법

Vue 3, Angular 14, React 애플리케이션에서 오프라인 화면을 생성하는 방법

이 강좌에서는 Vue 3, Angular 14, React 애플리케이션에서 오프라인 화면을 구현하는 방법을 배웁니다. API와 API를 사용하여 네트워크 API를 사용하여 네트워크 연결 및 연결 정보를 제공하여 오프라인 시나리오를 처리하고 사용자 경험을 향상합니다. 더 깊은 연결 가능성 확인을 위해 단순 온라인/오프라인 플래그 이외의 경우 @capgo/capacitor-network-diagnostics code에서 네트워크 __CAPGO_KEEP_1__를 사용하여 URL 연결 가능성, TCP 포트, WebSocket 핸드셰이크를 테스트할 수 있습니다.

필수 조건

시작하기 전에 다음을 설치하십시오.

프로젝트 설정

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

Vue 3

터미널을 열고 Vue 3 프로젝트를 생성하기 위해 다음 명령어를 실행하십시오:

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

안내를 따라 진행하고 추가 기능에 대한 질문이 나올 때, "Routing"을 선택하려면 스페이스바를 눌러주세요. 스페이스바 키를 눌러주세요.

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

React

npx create-react-app offline-screen-react

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

Installing the Network API

네트워크 __CAPGO_KEEP_0__ 설치 @capacitor/network 이제 네트워크 API를 제공하는 패키지를 설치해 보겠습니다.

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

npm install @capacitor/network

Capgo 프로젝트에서 Capacitor 명령어를 실행하여 네이티브 프로젝트 파일을 동기화하세요.

npx cap sync

Capacitor CLI이 글로벌로 설치되어 있는지 확인하세요.

npm install -g @capacitor/cli

오프라인 화면 구현

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

Vue 3

Vue 3 프로젝트에서 파일을 열고 src/main.js 모듈을 import하세요. 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);
};

모듈을 import하세요.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 모듈을 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모듈을 import하세요. <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 -->

id가 있는 요소를 추가하세요. 오프라인 화면 메시지를 표시하세요: 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

다음 스타일을 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;
}

인터넷 연결이 끊겼을 때

스크린이 표시되고, 다시 온라인이 될 때

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

Keep going from Offline Screen in Vue, Angular, React with Capacitor

만약 Vue, Angular, React를 사용 중이라면 Capacitor을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, Capacitor/__CAPGO_KEEP_1__-live-activities와 연결합니다. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities를 사용하여 네이티브 기능을 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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-video-player를 사용하여 구현 세부 사항을 capgo/capacitor-video-player에 대해 설명합니다. capgo/capacitor-native-navigation을 사용하여 네이티브 기능을 구현합니다. capgo/capacitor-native-navigation을 사용하여 구현 세부 사항을 설명합니다. capgo/capacitor-native-navigation을 사용하여 네이티브 기능을 구현합니다. capgo/capacitor-native-navigation을 사용하여 네이티브 기능을 구현합니다. capgo/capacitor-native-navigation을 사용하여 네이티브 기능을 구현합니다. Capgo의 네이티브 기능을 사용하는 @capgo/capacitor-native-navigation을 위해.

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

웹-layer 버그가 생긴 경우, 앱 스토어 승인 대기 없이 Capgo를 통해 패치를 배포하세요. 사용자는 배경에서 업데이트를 받으며 네이티브 변경 사항은 일반적인 검토 경로를 따릅니다.

__CAPGO_KEEP_0__ 앱에 대한 지원

시작하기

최신 뉴스

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

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

Capacitor 앱에서 2중 통신

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

5가지 OTA 업데이트 실수는 피해야 합니다.

모바일 앱 실시간 업데이트에 대한 5가지 보안最佳 관행
개발 모바일 +1
2025년 1월 14일

모바일 앱 실시간 업데이트에 대한 5가지 보안最佳 관행

Capgo 블로그에서 더 많은 글을 보세요.