Wie man eine Offline-Anzeige in Vue 3, Angular 14 oder React erstellt

In dieser Anleitung lernen wir, wie man eine Offline-Anzeige in Vue 3, Angular 14 und React-Anwendungen mit dem Netzwerk API erstellt. Das Netzwerk API liefert Informationen über das Netzwerk und die Verbindung, sodass wir offline-Szenarien handhaben und eine bessere Benutzererfahrung bieten können. Für tiefergehende Erreichbarkeitsprüfungen über eine einfache Online/Offline-Flag hinaus @capgo/capacitor-Netzwerkdiagnostik kann die Erreichbarkeit einer URL, TCP-Ports und WebSocket-Handshakes von native code getestet werden

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass folgendes installiert ist:

Node.js (Version 14 oder höher)
Vue CLI
Angular CLI
Create React App

Projekt einrichten

Erstens erstellen wir ein neues Projekt mithilfe der jeweiligen Scaffold-Tool für jede Framework.

Vue 3

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues Vue 3-Projekt zu erstellen:

vue create offline-screen-vue3

Wählen Sie die Standardvorlage und warten Sie, bis das Projekt erstellt ist.

Angular 14

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues Angular 14-Projekt zu erstellen:

ng new offline-screen-angular14

Folgen Sie den Anweisungen und wählen Sie bei der Frage nach zusätzlichen Funktionen „Routing“ aus, indem Sie die Leertaste drücken. Warten Sie, bis das Projekt erstellt ist.

React

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues React-Projekt zu erstellen:

npx create-react-app offline-screen-react

Warten Sie, bis das Projekt erstellt ist.

Die Netzwerk API installieren

Installieren Sie nun das @capacitor/network Paket, das die Netzwerk API bereitstellt.

Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis. Dann führen Sie den folgenden Befehl aus, um das Paket zu installieren:

npm install @capacitor/network

Führen Sie für Capacitor-Projekte auch den folgenden Befehl aus, um die native Projektdateien zu synchronisieren:

npx cap sync

Stellen Sie sicher, dass Sie die Capacitor CLI global installiert haben, indem Sie den folgenden Befehl ausführen:

npm install -g @capacitor/cli

Die Offline-Schaltfläche implementieren

Als Nächstes werden wir die Offline-Schaltflächenfunktion in jedem Framework implementieren. Wir werden eine einfache Nachricht anzeigen, wenn der Benutzer offline geht.

Vue 3

Öffnen Sie in Ihrem Vue 3-Projekt das src/main.js Datei und importieren Sie das Network Modul von @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 Ihrer Anwendungs-Vorlage (App.vue), fügen Sie ein <div> -Element mit der ID offline-screen ein, um die Offline-Bildschirmmeldung anzuzeigen:

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

Jetzt, wenn der Benutzer offline geht, wird der Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird der Offline-Bildschirm ausgeblendet.

Angular 14

In Ihrem Angular 14-Projekt öffnen Sie das src/app/app.component.ts -File und importieren Sie das Network -Modul aus @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 Ihrer Anwendungs-Vorlage (app.component.html), fügen Sie ein <div> -Element mit der ID offline-screen um die Offline-Bildschirmmeldung anzuzeigen:

<div id="offline-screen">
  <h1>You are offline</h1>
  <p>Please check your internet connection and try again.</p>
</div>

<!-- Your application content -->

Fügen Sie die folgenden Styles zur app.component.css Datei hinzu:

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

Jetzt, wenn der Benutzer offline geht, wird der Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird der Offline-Bildschirm verborgen.

React

In Ihrem React-Projekt öffnen Sie die src/App.js Datei und importieren Sie das Network Modul aus @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

Fügen Sie die folgenden Styles zur App.css Datei hinzu:

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

Jetzt, wenn der Benutzer offline geht, wird der Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird der Offline-Bildschirm verborgen.

Unterstützende Methoden und Interfaces

Das Netzwerk API bietet mehrere Methoden und Schnittstellen, um Ihnen dabei zu helfen, die Netzwerkverbindung zu handhaben. Hier sind einige der wichtigsten:

getStatus(): Die aktuelle Status der Netzwerkverbindung abfragen.
addListener('networkStatusChange', ...): Änderungen in der Netzwerkverbindung abonnieren.

Mit Capacitor weitermachen von Offline-Bildschirm in Vue, Angular, React

Wenn Sie Offline-Bildschirm in Vue, Angular, React mit Capacitor zum Planen von nativen Medien und Schnittstellenverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten, Mit @capgo/capacitor-video-player für die native Fähigkeit in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player, und Using @capgo/capacitor-native-navigation für die native Fähigkeit in Using @capgo/capacitor-native-navigation.