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

In dieser Anleitung 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.

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 mit der Taste "Spacebar" die Option "Routing". 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:

Warten Sie, bis das Projekt erstellt wurde.

npx create-react-app offline-screen-react

Installation des Netzwerks __CAPGO_KEEP_0__

Installing the Network API

Paket, das das Netzwerk __CAPGO_KEEP_0__ bereitstellt. @capacitor/network package, which provides the Network API.

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

npm install @capacitor/network

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

npx cap sync

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

npm install -g @capacitor/cli

Die Offline-Anzeige implementieren

Als Nächstes werden wir die Offline-Anzeige-Funktion 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 __CAPGO_KEEP_0__ und importieren Sie das Network __CAPGO_KEEP_1__ 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 Ihrem Anwendungs-Template (App.vue) fügen Sie ein <div> Element mit der ID offline-screen ein, um die Offline-Anzeige-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>

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

Angular 14

In Ihrem Angular 14-Projekt öffnen Sie das src/app/app.component.ts __CAPGO_KEEP_0__ und importieren Sie das Network __CAPGO_KEEP_1__-Modul von @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 ein, um die Offline-Schaltfläche 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 den 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 die Offline-Schaltfläche angezeigt. Wenn der Benutzer wieder online ist, wird die Offline-Schaltfläche verborgen.

__CAPGO_KEEP_2__

In Ihrem React-Projekt öffnen Sie das src/App.js Datei und importieren Sie das Network Modul von @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 nun offline befindet, wird das Offline-Bildschirm angezeigt. Wenn sich der Benutzer wieder online befindet, wird das Offline-Bildschirm verborgen.

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 Sie den aktuellen Status der Netzwerkverbindung.
• addListener('networkStatusChange', ...): Hören Sie auf Änderungen in der Netzwerkverbindung.