Vue 3, Angular 14, 또는 React에서 오프라인 화면을 만들기
이 튜토리얼에서 Vue 3, Angular 14, React 애플리케이션에서 오프라인 화면을 만들기 위해 네트워크 API를 사용하는 방법을 배웁니다. 네트워크 API는 네트워크 및 연결 정보를 제공하여 오프라인 시나리오를 처리하고 사용자 경험을 향상시킵니다. 더 깊은 연결 가능성 확인을 위해 단순한 온라인/오프라인 플래그 이외의 경우, @capgo/capacitor-network-diagnostics can test URL reachability, TCP ports, and WebSocket handshakes from native code.
이 튜토리얼을 시작하기 전에 다음을 설치하십시오:
Node.js
- (버전 14 이상) Vue __CAPGO_KEEP_0__
- Angular CLI
- Angular CLI
- 프로젝트 설정
__CAPGO_KEEP_0__
첫 번째로, 각 프레임워크에 해당하는 scaffold 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__
Installing the Network API
이제 네트워크 @capacitor/network package, which provides the Network API.
터미널을 열고 프로젝트 폴더로 이동한 후 다음 명령어를 실행하여 패키지를 설치하세요:
npm install @capacitor/networkCapacitor 프로젝트의 경우, 다음 명령어를 실행하여 네이티브 프로젝트 파일을 동기화하세요:
npx cap syncCapacitor CLI이 전역으로 설치되어 있는지 확인하세요.
npm install -g @capacitor/cli오프라인 화면 구현
다음으로 각 프레임워크에서 오프라인 화면 기능을 구현할 것입니다. 사용자가 오프라인 상태가 되었을 때 단순한 메시지를 표시할 것입니다.
Vue 3
Vue 3 프로젝트에서 src/main.js 파일을 열고 Network 모듈을 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);
};In 애플리케이션 템플릿 (App.vue)에 다음을 추가하세요: <div> <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);
};
}애플리케이션 템플릿 (app.component.html)에 다음을 추가하세요: <div> <div id=" 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 -->다음 스타일을 추가하세요: 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 프로젝트에서 파일을 열고 모듈을 import하세요. src/App.js 모듈을 import하세요. 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;
}context
context
네트워크 API은 네트워크 연결을 처리하는 데 도움이 되는 여러 메소드와 인터페이스를 제공합니다. 주요 기능은 다음과 같습니다:
getStatus(): 네트워크 연결의 현재 상태를 조회합니다.addListener('networkStatusChange', ...): 네트워크 연결의 변경을 감지합니다.
Capacitor을 사용하여 Vue, Angular, React에서 오프라인 화면을 계속 진행하세요.
__CAPGO_KEEP_0__을 사용하여 Vue, Angular, React에서 오프라인 화면을 계속 진행하세요. Capacitor을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, Capacitor을 네이티브 기능과 연결하세요. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities를 사용하여 네이티브 기능을 연결합니다. capgo/capacitor-live-activities를 사용하여 네이티브 기능을 연결합니다. capgo/capacitor-live-activities를 사용하여 구현 세부 사항을 연결합니다. capgo/capacitor-live-activities를 사용하여 구현 세부 사항을 연결합니다. capgo/capacitor-video-player를 사용하여 비디오 플레이어를 연결합니다. capgo은 capacitor-live-activities를 사용하여 네이티브 기능을 연결합니다. Capgo의 @capgo/capacitor-video-player를 사용하여 네이티브 기능을 사용합니다. @capgo/capacitor-video-player Capgo의 @capgo/capacitor-video-player를 사용하여 구현 세부 정보를 사용합니다. Capgo의 @capgo/capacitor-native-navigation을 사용하여 네이티브 기능을 사용합니다. Capgo의 @capgo/capacitor-native-navigation을 사용하여 네이티브 기능을 사용합니다.
