Wie erstellen Sie einen Offline-Bildschirm in Vue 3, Angular 14 oder React

In diesem Tutorial erfahren Sie, wie Sie einen Offline-Bildschirm in Vue 3, Angular 14 und React-Anwendungen mit dem Netzwerk API erstellen können. Das Netzwerk API bietet Informationen über das Netzwerk und die Verbindung, sodass wir Offline-Szenarien handhaben und eine bessere Benutzererfahrung bieten können. Für tiefergehende Erreichbarkeitsprüfungen jenseits eines einfachen Online/Offline-Flags können @capgo/capacitor-Netzwerkdiagnostik die URL-Erreichbarkeit, 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

Zuerst erstellen wir ein neues Projekt mit dem 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 in Ihrem Terminal ein Fenster 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 wenn Sie nach zusätzlichen Funktionen gefragt werden, wählen Sie "Routing" aus, indem Sie die Leertaste drücken.

Warten Sie, bis das Projekt erstellt ist.

React

npx create-react-app offline-screen-react

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

Installing the Network API

Installation des Netzwerks __CAPGO_KEEP_0__ @capacitor/network package, which provides the Network API.

Paket, das das Netzwerk __CAPGO_KEEP_0__ bereitstellt.

npm install @capacitor/network

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

npx cap sync

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

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

Öffnen Sie in Ihrem Vue 3-Projekt 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.vueFügen Sie ein <div> Element mit der ID offline-screen hinzufügen, um die Offline-Schaltflächennachricht 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 geht, wird das Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird das Offline-Bildschirm versteckt.

Angular 14

Öffnen Sie im Projekt Angular 14 das src/app/app.component.ts 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);
  };

}

Fügen Sie in Ihrem Anwendungs-Template (app.component.html) ein <div> Element mit der ID offline-screen ein, um das Offline-Bildschirm-Nachricht 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;
}

Wenn der Benutzer offline geht, wird das Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird das Offline-Bildschirm 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 den 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 sich der Benutzer jetzt offline befindet, wird das Offline-Bildschirm angezeigt. Wenn sich der Benutzer wieder online befindet, wird das Offline-Bildschirm verborgen.

Unterstützte Methoden und Interfaces

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

getStatus(): Abfragen Sie den aktuellen Status der Netzwerkverbindung.
addListener('networkStatusChange', ...): Hören Sie auf Änderungen in der Netzwerkverbindung.

Fortsetzen Sie von Offline-Bildschirm in Vue, Angular, React mit Capacitor

Wenn Sie Offline-Bildschirm in Vue, Angular, React mit Capacitor um native Medien und Schnittstellenverhalten zu planen, 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 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 Using @capgo/capacitor-native-navigation.