Pantalla offline in Vue, Angular, React con Capacitor

Impara a implementare una schermata offline in applicazioni Vue, Angular o React utilizzando la rete API e Capacitor. Migliora l'esperienza utente gestendo scenari offline in modo efficace.

Crediti dell'articolo

Martin Donadieu

Autore

Valeria

Recensore

Jordan

Editor

Crea uno schermo offline in Vue 3, Angular 14 o React

In questo tutorial, impareremo a creare uno schermo 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ù profondi oltre a un semplice flag online/offline @capgo/capacitor-diagnostiche-di-rete puoi testare la raggiungibilità dell'URL, i porti TCP e le mani di WebSocket da code.

Prerequisites

Prima di iniziare, assicurati di avere installato quanto segue:

Configurazione del Progetto

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

Vue 3

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

Apri il 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 tasto spaziatore key. Attendere che il progetto venga creato.

React

Apre il tuo terminale e esegui il seguente comando per creare un nuovo progetto React:

npx create-react-app offline-screen-react

Aspetta che il progetto venga creato.

Installa la rete API

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

Apre il tuo terminale e naviga nella directory del 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

Prossimamente, implementeremo la funzionalità della schermata offline in ogni framework. Mostreremo 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);
};

Nel tuo template di applicazione (App.vue), aggiungi un <div> elemento 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 si disconnette, verrà visualizzato lo schermo offline. Quando l'utente si riattiva la connessione, lo schermo offline verrà nascosto.

Angular 14

Nel tuo progetto Angular 14, apri il src/app/app.component.ts file e importa il Network modulo da @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);
  };

}

Inserisci un elemento con l'id di app.component.htmlaggiungi un} <div> aggiungi un elemento con l'id di offline-screen aggiungi lo stile seguente al file

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

<!-- Your application content -->

aggiungi lo stile seguente al file app.component.css 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;
}

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

React

e importa il modulo da src/App.js importa il file e Network module da @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

aggiungi lo stile seguente al file App.css 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;
}

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

Sostegno per Metodi e Interfacce

Il Network API fornisce diversi metodi e interfacce per aiutarti a gestire la connessione di rete. Ecco alcune delle principali:

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

Continua da Offline Screen in Vue, Angular, React con Capacitor

Se stai utilizzando Offline Screen in Vue, Angular, React con Capacitor per pianificare il comportamento di media e interfaccia nativa, connettilo con Utilizzando @capgo/capacitor-live-attività per la capacità nativa in Utilizzando @capgo/capacitor-live-attività, @capgo/capacitor-attività-in-vivo per i dettagli di implementazione in @capgo/capacitor-attività-in-vivo Utilizzo di @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzo di @capgo/capacitor-lettore-di-video @capgo/capacitor-lettore-di-video per i dettagli di implementazione in @capgo/capacitor-lettore-di-video, e Utilizzo di @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzo di @capgo/capacitor-navigazione-nativa.