Come creare 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à, consentendo 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 nativo.

Requisiti preliminari

Prima di iniziare, assicurati di avere installato quanto segue:

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

Configurazione del progetto

Prima di tutto, 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

Apre 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 selezionare le funzionalità aggiuntive, seleziona "Routing" premendo lo spaziobar. Premi lo spaziobar. Attendi che il progetto venga creato.

React

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

npx create-react-app offline-screen-react

Attendi che il progetto venga creato.

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

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

npx cap sync

Assicurati di avere Capacitor CLI installato globalmente eseguendo:

npm install -g @capacitor/cli

Implementazione dello Schermo Offline

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

Vue 3

Nel tuo progetto Vue 3, apri il file e importa il modulo da src/main.js In il tuo template di applicazione ( Network ), aggiungi un elemento con un id di @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);
};

per visualizzare il messaggio dello schermo offline:App.vueMake sure you have the __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ installed globally by running: <div> Implementing the Offline Screen offline-screen Next, we will implement the offline screen functionality in each framework. We will display a simple message when the user goes 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>

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

Angular 14

In your Angular 14 project, apri il file e importa il modulo da src/app/app.component.ts module from Network In your application template ( @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.htmlto display the offline screen message: <div> Aggiungi le seguenti regole di stile al file: offline-screen Now, when the user goes offline, the offline screen will be displayed. When the user comes back online, the offline screen will be hidden.

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

<!-- Your application content -->

Angular 14 app.component.css In your Angular 14 project, open the

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

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

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

file and import the

Reattivo

In tuo progetto Reattivo, 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 le 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 in modalità offline, verrà visualizzato lo schermo offline. Quando l'utente torna online, lo schermo offline verrà nascosto.

Sostegno Metodi e Interfacce

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

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

Continua da Schermo Offline in Vue, Angular, Reattivo con Capacitor

If sei stai utilizzando Offline Screen in Vue, Angular, React con Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Utilizzando @capgo/capacitor-live-attività per la capacità nativa in Utilizzando @capgo/capacitor-live-attività @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività Utilizzando @capgo/capacitor-player-video per la capacità nativa in Utilizzando @capgo/capacitor-player-video @capgo/capacitor-player-video per il dettaglio di implementazione in @capgo/capacitor-player-video, e Utilizzando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzo di @capgo/capacitor-navigazione nativa.