Come creare una schermata offline in Vue 3, Angular 14 o React

In questo tutorial vedremo come creare una schermata offline in applicazioni Vue 3, Angular 14 e React usando il Network API. Il Network API fornisce informazioni sulla rete e sulla connettività, permettendoci di gestire gli scenari offline e offrire una migliore esperienza utente. Per verifiche di raggiungibilità più approfondite rispetto a un semplice flag online/offline, @capgo/capacitor-network-diagnostics può testare la raggiungibilità degli URL, le porte TCP e gli handshake WebSocket da code nativo.

Prerequisiti

Prima di iniziare, assicurati di avere installato quanto segue:

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

Configurazione del progetto

Per prima cosa, creiamo un nuovo progetto utilizzando lo scaffolding tool specifico per ogni framework.

Vue 3

Apri il terminale ed esegui il seguente comando per creare un nuovo progetto Vue 3:

vue create offline-screen-vue3

Seleziona il preset predefinito e attendi la creazione del progetto.

Angular 14

Apri il terminale ed esegui il seguente comando per creare un nuovo progetto Angular 14:

ng new offline-screen-angular14

Segui i prompt e, quando ti vengono chieste funzionalità aggiuntive, seleziona “Routing” premendo il tasto spazio e attendi la creazione del progetto.

React

Apri il terminale ed esegui il seguente comando per creare un nuovo progetto React:

npx create-react-app offline-screen-react

Attendi la creazione del progetto.

Installazione del Network API

Ora, installiamo il @capacitor/network package, che fornisce il Network API.

Apri il terminale e vai nella directory del progetto. Poi, esegui questo comando per installare il package:

npm install @capacitor/network

Per i progetti Capacitor, esegui anche questo comando per sincronizzare i file nativi del progetto:

npx cap sync

Assicurati di avere Capacitor CLI installato globalmente eseguendo:

npm install -g @capacitor/cli

Implementazione della schermata offline

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

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 template della tua applicazione (App.vue), aggiungi un <div> elemento con id offline-screen per mostrare il messaggio di stato 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, verrà visualizzata la schermata offline. Quando l'utente torna online, la schermata verrà nascosta.

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);
  };

}

Nel template della tua applicazione (app.component.html), aggiungi un <div> elemento con id offline-screen per mostrare il messaggio 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 i seguenti stili al app.component.css dell'app:

#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, verrà visualizzata la schermata offline. Quando l'utente torna online, la schermata verrà nascosta.

React

Nel tuo progetto React, apri il src/App.js file e importa il Network modulo 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 i seguenti stili al App.css dell'app:

#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, verrà visualizzata la schermata offline. Quando l'utente torna online, la schermata verrà nascosta.

Metodi e interfacce di supporto

L'oggetto Network API offre diversi metodi e interfacce per aiutarti a gestire la connessione di rete. Ecco i principali:

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

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

Se stai usando Schermata offline in Vue, Angular, React con Capacitor per pianificare il comportamento dei media nativi e dell'interfaccia, collegalo a Uso di @capgo/capacitor-live-activities per la funzionalità nativa nella pagina Uso di @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per il dettaglio implementativo in @capgo/capacitor-live-activities, Uso di @capgo/capacitor-video-player per la funzionalità nativa in Utilizzo di @capgo/capacitor-video-player, @capgo/capacitor-video-player per i dettagli di implementazione in @capgo/capacitor-video-player, e Usando @capgo/capacitor-native-navigation per la funzionalità nativa in Usando @capgo/capacitor-native-navigation.