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

이 튜토리얼에서는 Vue 3, Angular 14, 및 React 애플리케이션에서 오프라인 화면을 만들기 위해 네트워크 API를 사용하는 방법을 배웁니다. 네트워크 API는 네트워크 및 연결 정보를 제공하여 오프라인 시나리오를 처리하고 사용자 경험을 향상시키는 데 도움이 됩니다.

기본 조건

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

• Node.js (version 14 이상)
• Vue CLI
• Angular CLI
• Create React App

프로젝트 설정

첫 번째로, 각 프레임워크의 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 API 프로젝트의 경우, 다음 명령어를 실행하여 네이티브 프로젝트 파일을 동기화하세요:

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

npm install @capacitor/network

For Capacitor projects, also run the following command to sync the native project files:

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 __CAPGO_KEEP_0__ Network __CAPGO_KEEP_1__ @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__CAPGO_KEEP_2__ <div> to display the offline screen message: 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

Angular 14 프로젝트에서 열어보세요. src/app/app.component.ts __CAPGO_KEEP_0__ 파일을 열어 __CAPGO_KEEP_1__ 모듈을 import하세요. Network __CAPGO_KEEP_2__에서 __CAPGO_KEEP_3__ 모듈을 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)에 id가 <div> 인 offline-screen 요소를 추가하세요. offline 화면 메시지를 표시하세요:

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

React

React 프로젝트에서 열어보세요.

사용자가 오프라인이 되면 offline 화면이 표시되고, 사용자가 온라인이 되면 offline 화면이 숨겨집니다. src/App.js 파일과 import하는 Network __CAPGO_KEEP_0__ 모듈 @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;
}

사용자가 오프라인 상태가 되면 오프라인 화면이 표시되고, 사용자가 다시 온라인 상태가 되면 오프라인 화면이 숨겨집니다.

네트워크 지원 메서드 및 인터페이스

네트워크 API는 네트워크 연결을 처리하는 데 도움이 되는 여러 메서드와 인터페이스를 제공합니다. 여기에는 몇 가지 주요 항목이 있습니다:

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