Come creare uno schermo offline in Vue 3, Angular 14 o React

In questo tutorial, impareremo a creare uno schermo offline nelle applicazioni Vue 3, Angular 14 e React utilizzando la rete API. La rete API fornisce informazioni sulla rete e sulla connettività, consentendoci di gestire gli scenari offline e fornire un'esperienza utente migliore.

Requisiti preliminari

Prima di iniziare, assicurati di avere installati i seguenti:

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

Configurazione del Progetto

In primo luogo, creiamo un nuovo progetto utilizzando lo strumento di scaffolding rispettivo per ogni framework.

Vue 3

Apri il tuo 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 tuo 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 aggiungere funzionalità aggiuntive, seleziona "Routing" premendo la tastiera di spazio. Wait for the project to be created.

React

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

npx create-react-app offline-screen-react

Wait for the project to be created.

L'installazione della rete API

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

Apri 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

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 __CAPGO_KEEP_0__ Network e importa il @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);
};

modulo daApp.vueNel tuo template di applicazione ( <div> ), aggiungi un offline-screen elemento con un id di

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

per visualizzare il messaggio della schermata offline:

Ora, quando l'utente va offline, verrà visualizzata la schermata offline. Quando l'utente torna online, la schermata offline verrà nascosta.

Nel tuo progetto Angular 14, apri il src/app/app.component.ts e importa il modulo da Network In 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 elemento con un id diapp.component.htmlper visualizzare il messaggio di schermo offline: <div> Aggiungi le seguenti stili al offline-screen file:

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

<!-- Your application content -->

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

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

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

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

Nel tuo progetto React, apri il

__CAPGO_KEEP_0__

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

Metodi e Interfacce di Supporto

La rete API fornisce diversi metodi e interfacce per aiutarti a gestire la connessione di rete. Ecco alcuni dei principali:

• getStatus(): Esegui una query per il stato attuale della connessione di rete.
• addListener('networkStatusChange', ...).: Ascolta per eventuali cambiamenti nella connessione di rete.