Offline-Screen in Vue, Angular, React mit Capacitor

So erstellst du einen Offline-Screen in Vue 3, Angular 14 oder React

In diesem Tutorial lernen wir, wie man einen Offline-Screen in Vue 3-, Angular 14- und React-Anwendungen mit dem Network API erstellt. Der Network API liefert Informationen zu Netzwerk und Konnektivität, sodass wir Offline-Szenarien handhaben und ein besseres Nutzererlebnis bieten können. Für tiefere Erreichbarkeitsprüfungen jenseits eines einfachen Online/Offline-Flags @capgo/capacitor-network-diagnostics können URL-Erreichbarkeit, TCP-Ports und WebSocket-Handshakes aus nativem code getestet werden.

Voraussetzungen

Bevor wir starten, stelle sicher, dass Folgendes installiert ist:

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

Projekt aufsetzen

Zuerst erstellen wir ein neues Projekt mit dem jeweiligen Scaffolding-Tool für jedes Framework.

Vue 3

Öffne dein Terminal und führe den folgenden Befehl aus, um ein neues Vue-3-Projekt zu erstellen:

vue create offline-screen-vue3

Wähle das Standard-Preset und warte, 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 Leertaste drücken. Warten Sie, bis das Projekt erstellt wurde.

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.

Network API installieren

Jetzt installieren wir das @capacitor/network Paket, das die Network-API bereitstellt.

Öffne dein Terminal und wechsle in dein Projektverzeichnis. Führe dann den folgenden Befehl aus, um das Paket zu installieren:

npm install @capacitor/network

Führen Sie für Capacitor-Projekte außerdem den folgenden Befehl aus, um die nativen Projektdateien zu synchronisieren:

npx cap sync

Stellen Sie sicher, dass die Capacitor CLI global installiert ist, indem Sie Folgendes ausführen:

npm install -g @capacitor/cli

Offline-Screen implementieren

Als Nächstes implementieren wir die Offline-Screen-Funktionalität in jedem Framework. Wir zeigen eine einfache Meldung an, wenn der Nutzer offline geht.

Vue 3

Öffnen Sie in Ihrem Vue 3-Projekt die src/main.js Datei und importiere 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 Ihrer Anwendungsvorlage (App.vue) fügen Sie ein <div> Element mit der ID offline-screen um die Offline-Bildschirm-Meldung 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>

Sobald der Nutzer offline geht, wird der Offline-Screen angezeigt. Sobald der Nutzer wieder online ist, wird er ausgeblendet.

Angular 14

Öffnen Sie in Ihrem Angular 14-Projekt die src/app/app.component.ts Datei und importiere 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 Anwendungsvorlage (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 -->

Füge 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;
}

Sobald der Nutzer offline geht, wird der Offline-Screen angezeigt. Sobald der Nutzer wieder online ist, wird er ausgeblendet.

React

Öffne in deinem React-Projekt die src/App.js Datei und importiere 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üge die folgenden Styles zur App.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;
}

Sobald der Nutzer offline geht, wird der Offline-Screen angezeigt. Sobald der Nutzer wieder online ist, wird er ausgeblendet.

Unterstützende Methoden und Interfaces

Das Network API bietet verschiedene Methoden und Interfaces, um die Netzwerkverbindung zu verwalten. Hier sind die wichtigsten:

• getStatus(): Fragt den aktuellen Status der Netzwerkverbindung ab.
• addListener('networkStatusChange', ...): Lauscht auf Änderungen der Netzwerkverbindung.

Weiter geht's mit dem Offline-Screen in Vue, Angular, React mit Capacitor

Wenn du es nutzt Offline-Screen in Vue, Angular, React mit Capacitor , um natives Media- und Interface-Verhalten zu planen, verbinde es mit @capgo/capacitor-live-activities verwenden für die native Funktion in „@capgo/capacitor-live-activities verwenden“, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Verwendung von @capgo/capacitor-video-player für die native Funktion bei Verwendung von @capgo/capacitor-video-player, @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player und Verwendung von @capgo/capacitor-native-navigation für die native Funktion bei Verwendung von @capgo/capacitor-native-navigation.