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 dem Netzwerk API erstellt. 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 ü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

Zuerst 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 Standard-Voreinstellung und warten Sie, bis das Projekt erstellt wurde.

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 "Space" die Option "Routing". 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:

Warten Sie, bis das Projekt erstellt ist.

npx create-react-app offline-screen-react

Installation des Netzwerks __CAPGO_KEEP_0__

Installieren Sie nun das Paket, das das Netzwerk API bereitstellt.

Öffnen Sie Ihr Terminal und navigieren Sie in Ihr Projektverzeichnis. Dann führen Sie den folgenden Befehl aus, um das Paket zu installieren: @capacitor/network package, which provides the Network API.

Führen Sie den folgenden Befehl aus, um das Paket zu installieren:

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 den folgenden Befehl ausführen:

npm install -g @capacitor/cli

Implementierung der Offline-Anzeige

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

Now, wenn der Benutzer offline geht, wird das Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird das Offline-Bildschirm versteckt.

Angular 14

In Ihrem Angular 14-Projekt öffnen Sie 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);
  };

}

In Ihrem Anwendungs-Template (app.component.html) fügen Sie ein <div> Element mit der ID offline-screen 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 -->

Hinzufügen Sie die folgenden Styles zum 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;
}

Now, wenn der Benutzer offline geht, wird das Offline-Bildschirm angezeigt. Wenn der Benutzer wieder online ist, wird das Offline-Bildschirm versteckt.

React

Deine React-Projekt öffnen und das src/App.js Modul aus importieren Network 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

Die folgenden Styles zur App.css Datei hinzufügen:

#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 wird, wenn der Benutzer offline ist, das Offline-Screen angezeigt. Wenn der Benutzer wieder online ist, wird das Offline-Screen verborgen.

Unterstützte Methoden und Interfaces

The Network API provides several methods and interfaces to help you handle the network connection. Here are some of the key ones:

• getStatus()fragt nach dem aktuellen Status der Netzwerkverbindung ab.
• addListener('networkStatusChange', ...)Der Netzwerk-

Keep going from Offline Screen in Vue, Angular, React with Capacitor

Wenn Sie Offline Screen in Vue, Angular, React mit Capacitor zum Planen von nativen Medien und Schnittstellenverhalten verwenden Using @capgo/capacitor-live-activities Verwenden Sie @capgo/capacitor-live-activities für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetail in @capgo/capacitor-live-activities, Verwenden Sie @capgo/capacitor-video-player für die native Fähigkeit in Verwenden Sie @capgo/capacitor-video-player, @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player, und für die native Fähigkeit in @capgo/capacitor-native-Navigation.