离线屏幕在 Vue、Angular、React 中的使用（__CAPGO_KEEP_0__）

In this tutorial, we will learn how to create an offline screen in Vue 3, Angular 14, and React applications using the Network API. The Network API provides network and connectivity information, allowing us to handle offline scenarios and provide a better user experience. For deeper reachability checks beyond a simple online/offline flag, 本教程将学习如何在 Vue 3、Angular 14 和 React 应用程序中创建离线屏幕，使用网络（capgo）。网络（capacitor）提供网络和连接信息，使我们能够处理离线场景并提供更好的用户体验。为了更深入地检查超出简单的在线/离线标志的可达性， @code/__CAPGO_KEEP_1__-network-diagnostics","可以测试 URL 可达性、TCP 端口和 WebSocket 握手的原生 code。

前提条件

开始之前，请确保你已经安装了以下内容：

Node.js (版本 14 或更高)
Vue CLI
Angular CLI
Create React App

设置项目

首先，让我们使用各个框架的构建工具创建一个新的项目。

Vue 3

打开你的终端并运行以下命令来创建一个新的 Vue 3 项目：

vue create offline-screen-vue3

选择默认预设并等待项目创建完成。

Angular 14

打开你的终端并运行以下命令来创建一个新的 Angular 14 项目：

ng new offline-screen-angular14

遵循提示，当被问及额外功能时，选择“路由”并按空格键。 等待项目创建完成。 React

打开你的终端并运行以下命令来创建一个新的 React 项目：

等待项目创建完成。

npx create-react-app offline-screen-react

安装网络 __CAPGO_KEEP_0__

Installing the Network API

包，它提供了网络 __CAPGO_KEEP_0__ @capacitor/network package, which provides the Network API.

Installing the Network __CAPGO_KEEP_0__

npm install @capacitor/network

For Capacitor 项目，另外运行以下命令来同步原生项目文件：

npx cap sync

确保您已在全局安装 Capacitor 和 CLI，方法是运行：

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

在您的应用程序模板（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 __CAPGO_KEEP_0__ 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> ）中，添加一个 offline-screen 元素，id为

<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 项目中，打开 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;
}

现在，当用户脱机时，脱机屏幕会显示。当用户重新上线时，脱机屏幕会隐藏。

支持的方法和接口

网络API提供了几个方法和接口来帮助您处理网络连接。以下是其中一些关键的：

getStatus(): 查询网络连接当前状态。
addListener('networkStatusChange', ...): 监听网络连接的变化。

从 Vue、Angular、React 中的脱机屏幕继续使用Capacitor

如果您正在使用 Offline Screen in Vue, Angular, React with Capacitor 来规划原生媒体和界面行为，连接它使用@capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, 使用@capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, 使用@capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-video-player, 使用@capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and 使用@capgo/capacitor-video-player 为使用 @capgo/capacitor-native-navigation 的原生能力。