Wie man einen Offline-Bildschirm in Vue 3, Angular 14 oder React erstellt

In diesem Tutorial lernen wir, wie man einen Offline-Bildschirm in Vue 3, Angular 14 und React-Anwendungen mit der Netzwerk API erstellt. Die Netzwerk API liefert Netzwerk- und Verbindungsinformationen, sodass wir Offline-Szenarien handhaben und einen besseren Benutzererlebnis bieten können. Für tiefergehende Erreichbarkeitsprüfungen über einen einfachen Online/Offline-Flag hinaus @capgo/capacitor-Netzwerkdiagnostik Kann die Erreichbarkeit einer URL, TCP-Ports und WebSocket-Handshakes von native code testen.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie die folgenden installiert haben:

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

Projekt einrichten

Erstens erstellen wir ein neues Projekt mit 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 wird.

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 Taste drücken. spacebar Warten Sie, bis das Projekt erstellt ist.

Reakt

Ö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 auf die Projektierung.

Installation des Netzwerks API

Installation des Netzwerks __CAPGO_KEEP_0__ @capacitor/network Paket, das das 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ür Capacitor-Projekte führen Sie außerdem den folgenden Befehl aus, um die native Projektdateien zu synchronisieren:

npx cap sync

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

npm install -g @capacitor/cli

Implementierung der Offline-Schaltfläche

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

Vue 3

In Ihrem Vue 3-Projekt öffnen Sie das src/main.js Datei und importieren Sie das Network Modul aus @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 Ihrem Anwendungs-Template (App.vue) fügen Sie ein <div> Element mit der ID offline-screen um die Offline-Schaltflächen-Nachricht 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>

Wenn der Benutzer offline ist, wird die Offline-Ansicht angezeigt. Wenn der Benutzer wieder online ist, wird die Offline-Ansicht ausgeblendet.

Angular 14

Öffnen Sie im Projekt Angular 14 das src/app/app.component.ts 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 Ihrem Anwendungs-Template (app.component.html), fügen Sie ein <div> Element mit der ID offline-screen , um die Offline-Bildschirm-Meldung anzuzeigen:

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

<!-- Your application content -->

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

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

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

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

Wenn der Benutzer offline ist, wird das Offlinebildschirm angezeigt. Wenn der Benutzer wieder online ist, wird das Offlinebildschirm versteckt.

React

In Ihrem React-Projekt öffnen Sie das 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;
}

Wenn der Benutzer offline ist, wird die Offline-Ansicht angezeigt. Wenn der Benutzer wieder online ist, wird die Offline-Ansicht ausgeblendet.

Unterstützte Methoden und Interfaces

Das Netzwerk-API bietet mehrere Methoden und Interfaces, um Ihnen bei der Netzwerkverbindung zu helfen. Hier sind einige der wichtigsten:

• getStatus(): Abfragen des aktuellen Status der Netzwerkverbindung.
• addListener('networkStatusChange', ...): Hört auf Veränderungen in der Netzwerkverbindung.

Fortsetzen Sie mit Offline-Screen in Vue, Angular, React mit Capacitor

Wenn Sie Capgo verwenden Eine Offline-Anzeige in Vue, Angular, React mit Capacitor um native Medien und Schnittstellenverhalten zu planen, mit ihm zu verbinden 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 Mit @capgo/capacitor-Video-Player, @capgo/capacitor-Video-Player Für die Implementierungsdetails in @capgo/capacitor-Video-Player und Mit @capgo/capacitor-native-Navigation Für die native Fähigkeit in Mit @capgo/capacitor-native-Navigation.