Offline Screen in Vue, Angular, React with Capacitor

学习如何在Vue、Angular或React应用程序中使用网络API和Capacitor实现离线屏幕。通过有效地处理离线场景来改善用户体验。

文章来源

马丁·多纳迪

作者

瓦莱里亚

审阅者

乔丹

编辑

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

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, @capgo/capacitor-网络诊断可以从原生code测试 URL 可达性、TCP 端口和 WebSocket 握手。

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

Node.js

设置项目

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

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

遵循提示，到项目创建完成时按空格键选择 "Routing"。 按空格键 key

React

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

npx create-react-app offline-screen-react

等待项目创建完成。

安装网络 API

现在，让我们安装 @capacitor/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);
  };

}

In您的应用程序模板（），添加一个app.component.html元素，id为 <div> ，以显示离线屏幕消息： 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 file:

#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 module @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 file:

#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创建离线屏幕

如果您正在使用 使用Capacitor在Vue、Angular、React中创建离线屏幕 规划原生媒体和界面行为，连接它到使用@capgo/capacitor-live-activities 为使用@capgo/capacitor-live-activities中的原生能力 @capgo/capacitor实时活动了解 @capgo/capacitor实时活动的实现细节使用 @capgo/capacitor视频播放器了解使用 @capgo/capacitor视频播放器的原生能力 @capgo/capacitor视频播放器了解 @capgo/capacitor视频播放器的实现细节，以及使用 @capgo/capacitor原生导航了解使用 @capgo/capacitor原生导航的原生能力。