使用 Capacitor 在 Vue、Angular 和 React 中实现离线页面

如何在 Vue 3、Angular 14 或 React 中实现离线屏幕

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

前提条件

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

Node.js （14 或更高版本）
Vue CLI
Angular CLI
创建 React App

项目搭建

首先，用各框架对应的脚手架工具创建一个新项目。

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

按提示操作，当询问要添加哪些额外功能时，按下 空格键 选择“Routing”。等待项目创建完成。

React

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

npx create-react-app offline-screen-react

等待项目创建完成。

正在安装 Network API

现在，让我们安装 @capacitor/network 这个包，它提供 Network API。

打开终端并进入项目目录，然后运行以下命令安装这个包：

npm install @capacitor/network

对于 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 文件并导入 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> 元素，其 id 为 offline-screen 以显示离线提示信息：

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

现在，当用户离线时会显示离线界面；当用户重新上线时，离线界面会隐藏。

支持的方法与接口

Network API 提供了多种方法和接口，帮助你处理网络连接。以下是其中一些关键项：

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

使用 Capacitor 在 Vue、Angular、React 中继续实现离线界面

如果你正在使用 使用 Capacitor 在 Vue、Angular 和 React 中实现离线页面 来规划原生媒体和界面行为，并将其与使用 @capgo/capacitor-live-activities 用于使用 @capgo/capacitor-live-activities 时的原生能力， @capgo/capacitor-live-activities 在 @capgo/capacitor-live-activities 中的实现细节，使用 @capgo/capacitor-video-player 用于使用 @capgo/capacitor-video-player 时的原生能力， @capgo/capacitor-video-player 在 @capgo/capacitor-video-player 中的实现细节，以及使用 @capgo/capacitor-native-navigation 用于使用 @capgo/capacitor-native-navigation. 时的原生能力