在Vue 3、Angular 14或React中创建离线屏幕

在本教程中，我们将学习如何使用网络API在Vue 3、Angular 14和React应用中创建离线屏幕。网络API提供网络和连接信息，使我们能够处理离线场景并提供更好的用户体验。为了更深入地检查可达性超出简单的在线/离线标志 @capgo/capacitor-network-diagnostics 可以从本机code测试URL可达性、TCP端口和WebSocket握手

先决条件

在开始之前，请确保您已安装以下内容：

Node.js (version 14 or higher)
Vue CLI
Angular CLI
Create React App

Setting Up the Project

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

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

按照提示操作，并在被要求添加额外功能时，选择“路由”并按空格键。等待项目创建完成。 Wait for the project to be created. Open your terminal and run the following command to create a new React project:

Wait for the project to be created.

正在安装网络__CAPGO_KEEP_0__

npx create-react-app offline-screen-react

现在，让我们安装提供网络__CAPGO_KEEP_0__的包。

Installing the Network API

对于__CAPGO_KEEP_0__项目，还需要运行以下命令来同步原生项目文件: @capacitor/network 确保你已经全局安装了API __CAPGO_KEEP_1__，通过运行以下命令来检查：

Open your terminal and run the following command to create a new React project:

npm install @capacitor/network

Make sure you have the Capacitor __CAPGO_KEEP_1__ installed globally by running:

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 文件并导入 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 __CAPGO_KEEP_1__ @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 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;
}

支持的方法和接口

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

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

getStatus(): 监听网络连接的变化。
addListener('networkStatusChange', ...)从 Vue、Angular、React 中继续 Offline Screen 的 __CAPGO_KEEP_0__

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

Offline Screen 在 Vue、Angular、React 中的 __CAPGO_KEEP_0__ Offline Screen in Vue, Angular, React with Capacitor 为native媒体和界面行为制定计划，连接它使用@capgo/capacitor-live-activities 使用@capgo/capacitor-live-activities的native能力使用@capgo/capacitor-live-activities 使用@capgo/capacitor-live-activities的实现细节使用@capgo/capacitor-video-player 使用@capgo/capacitor-video-player的native能力使用@capgo/capacitor-video-player 使用@capgo/capacitor-video-player的实现细节使用@capgo/capacitor-native-navigation 使用@capgo/capacitor-native-navigation的native能力