How to Create an Offline Screen in Vue 3, Angular 14, o React

In questo tutorial, impareremo a creare una schermata offline in applicazioni Vue 3, Angular 14 e React utilizzando la rete API. La rete API fornisce informazioni sulla rete e sulla connettività, consentendoci di gestire scenari offline e fornire un'esperienza utente migliore. Per controlli di raggiungibilità più approfonditi al di là di un semplice flag online/offline @ capgo/capacitor-diagnostiche-di-rete può testare la raggiungibilità di URL, i porti TCP e le mani di WebSocket da code nativo.

Prerequisiti

Prima di iniziare, assicurati di avere installati:

Node.js (versione 14 o superiore)
Vue CLI
Angular CLI
Create React App

Configurazione del progetto

Prima, creiamo un nuovo progetto utilizzando lo strumento di scaffolding rispettivo per ogni framework.

Vue 3

Apre la tua terminale e esegui il seguente comando per creare un nuovo progetto Vue 3:

vue create offline-screen-vue3

Scegli il preset di default e attendi che il progetto venga creato.

Angular 14

Apre la tua terminale e esegui il seguente comando per creare un nuovo progetto Angular 14:

ng new offline-screen-angular14

Segui le istruzioni, e quando ti viene chiesto di selezionare funzionalità aggiuntive, seleziona "Routing" premendo il tasto spazio barra

Attendere che il progetto venga creato.

React

npx create-react-app offline-screen-react

Apri la tua terminale e esegui il seguente comando per creare un nuovo progetto React: Attendere che il progetto venga creato.

Installazione della rete API

Ora, installiamo il @capacitor/network pacchetto, che fornisce la rete API.

Apri il terminale e naviga nel tuo progetto. Poi, esegui il seguente comando per installare il pacchetto:

npm install @capacitor/network

Per i progetti Capacitor, esegui anche il seguente comando per sincronizzare i file del progetto nativo:

npx cap sync

Assicurati di avere l'Capacitor CLI installato globalmente eseguendo:

npm install -g @capacitor/cli

Implementazione della schermata offline

Successivamente, implementeremo la funzionalità della schermata offline in ogni framework. Visualizzeremo un semplice messaggio quando l'utente va offline.

Vue 3

Nel tuo progetto Vue 3, apri il src/main.js file e importa il Network modulo da @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);
};

Inserisci un elemento con un id di __CAPGO_KEEP_0__ nel tuo template di applicazione (App.vueaggiungi un elemento <div> con un id di offline-screen per visualizzare il messaggio dello schermo offline:

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

Ora, quando l'utente va offline, lo schermo offline verrà visualizzato. Quando l'utente torna online, lo schermo offline verrà nascosto.

Angular 14

Nel tuo progetto Angular 14, apri il file src/app/app.component.ts e importa il modulo da Network Inserisci un elemento con un id di __CAPGO_KEEP_0__ nel tuo template di applicazione ( @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);
  };

}

aggiungi un elementoapp.component.htmlcon un id di <div> Angular 14 offline-screen per visualizzare il messaggio della schermata offline:

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

<!-- Your application content -->

Aggiungi le seguenti stili al file: app.component.css ora, quando l'utente va offline, verrà visualizzata la schermata offline. Quando l'utente torna online, la schermata offline verrà nascosta.

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

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

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

React

In progetto React, apri il file

e importa il modulo da src/App.js Aggiungi le seguenti stili al file: Network ora, quando l'utente va offline, verrà visualizzata la schermata offline. Quando l'utente torna online, la schermata offline verrà nascosta. @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

Metodi e Interfacce di Supporto App.css Add the following styles to the file:

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

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

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

Supporting Methods and Interfaces

Now, when the user goes offline, the offline screen will be displayed. When the user comes back online, the offline screen will be hidden.

La rete API fornisce diverse metodi e interfacce per aiutarti a gestire la connessione di rete. Ecco alcune delle principali funzionalità:

getStatus(): Verifica lo stato attuale della connessione di rete.
addListener('networkStatusChange', ...): Ascolta per eventuali cambiamenti nella connessione di rete.

Continua con la schermata Offline in Vue, Angular, React con Capacitor

Se stai utilizzando La schermata Offline in Vue, Angular, React con Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, connettila con Utilizza @capgo/capacitor-live-attività per la capacità nativa in Utilizza @capgo/capacitor-live-attività @capgo/capacitor-live-attività per la dettaglio di implementazione in @capgo/capacitor-live-attività Utilizza @capgo/capacitor-video-player For la capacità nativa in Utilizzare @capgo/capacitor-player-video, @capgo/capacitor-player-video Per il dettaglio di implementazione in @capgo/capacitor-player-video, e Utilizzare @capgo/capacitor-navigazione-nativa Per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa.