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

이 튜토리얼에서는 Vue 3, Angular 14, 및 React 애플리케이션에서 오프라인 화면을 만들기 위해 Network API를 사용합니다. Network API는 네트워크 및 연결 정보를 제공하여 오프라인 시나리오를 처리하고 사용자 경험을 향상시킵니다. 더 깊은 접근 가능성 확인을 위해 단순한 온라인/오프라인 플래그 이외의 경우 @capgo/capacitor-network-diagnostics native code에서 URL 접근 가능성, TCP 포트, 및 WebSocket handshake를 테스트할 수 있습니다.

기본 요구 사항

먼저 다음을 설치하십시오.

프로젝트 설정

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

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

네트워크 __CAPGO_KEEP_0__를 설치하기 위해

네트워크 API를 제공하는 패키지를 설치해 보겠습니다.

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

Now, let’s install the package, which provides the Network __CAPGO_KEEP_0__.

npm install @capacitor/network

Capacitor 프로젝트에 대해, 다음 명령어도 실행하여 네이티브 프로젝트 파일을 동기화하세요:

npx cap sync

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

npm install -g @capacitor/cli

오프라인 화면 구현

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

Vue 3

Vue 3 프로젝트에서 src/main.js 파일을 열고 Network 모듈을 import하세요. import를 하실 때는 @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를 하세요. import를 하실 때는App.vue에서 import를 하세요. import를 하실 때는 <div> 에 있는 offline-screen 태그를 추가하세요. id를 __CAPGO_KEEP_2__로 지정하세요. 오프라인 화면 메시지를 표시하세요:

<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 )에 <div> id가 ""인 요소를 추가하여 오프라인 화면 메시지를 표시하세요. offline-screen styles.css 파일에 다음 스타일을 추가하세요.

<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 Angular 14

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

Angular 14 프로젝트에서 파일을 열고 모듈을 import하세요.

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

모듈을 import하세요. 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는 네트워크 연결을 처리하는 데 도움이 되는 여러 메서드 및 인터페이스를 제공합니다. 여기에는 몇 가지 주요 메서드 및 인터페이스가 있습니다:

getStatus(): 현재 네트워크 연결 상태를 조회합니다.
addListener('networkStatusChange', ...): 네트워크 연결 상태가 변경될 때 알림을 받습니다.

Vue, Angular, React와 같은 오프라인 화면에서 Capacitor로 계속 진행하세요.

Vue, Angular, React에서 사용하는 오프라인 화면을 사용하시나요? Offline Screen in Vue, Angular, React with Capacitor __CAPGO_KEEP_0__와 연결하세요. capgo와 capacitor을 사용하여 capgo와 capacitor의 네이티브 기능을 사용합니다. capgo와 capacitor capgo와 capacitor의 구현 세부 사항을 참조하세요. capgo와 capacitor을 사용하여 capgo와 capacitor의 네이티브 기능을 사용합니다. capgo와 capacitor capgo와 capacitor의 구현 세부 사항을 참조하세요. capgo와 capacitor을 사용하여 for the native capability in Using @capgo/capacitor-native-navigation.