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

In this tutorial, nous allons apprendre à créer une page hors ligne dans les applications Vue 3, Angular 14 et React en utilisant le réseau API. Le réseau API fournit des informations sur le réseau et la connectivité, nous permettant de gérer les scénarios hors ligne et d'offrir une meilleure expérience utilisateur. Pour des vérifications de disponibilité plus approfondies au-delà d'un simple drapeau en ligne/hors ligne, @capgo/capacitor-network-diagnostics peut tester la disponibilité d'une URL, les ports TCP et les échanges de WebSocket à partir du code natif.

Prérequis

Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

Node.js (version 14 ou supérieure)
Vue CLI
Angular CLI
Create React App

Configuration du projet

Créez d’abord un nouveau projet en utilisant l’outil de mise en forme approprié pour chaque framework.

Vue 3

Ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet Vue 3 :

vue create offline-screen-vue3

Sélectionnez le préfixe par défaut et attendez que le projet soit créé.

Angular 14

Ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet Angular 14 :

ng new offline-screen-angular14

Suivez les invites, et lorsque vous êtes interrogé sur des fonctionnalités supplémentaires, sélectionnez « Routing » en appuyant sur la touche d’espace clé. Attendez que le projet soit créé.

React

Ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet React :

npx create-react-app offline-screen-react

Attendez que le projet soit créé.

Installation du réseau API

Maintenant, installons le @capacitor/network le paquet qui fournit le réseau API.

Ouvrez votre terminal et naviguez jusqu'à votre répertoire de projet. Ensuite, exécutez la commande suivante pour installer le paquet :

npm install @capacitor/network

Pour les projets Capacitor , exécutez également la commande suivante pour synchroniser les fichiers de projet natifs :

npx cap sync

Assurez-vous d'avoir le Capacitor CLI installé globalement en exécutant :

npm install -g @capacitor/cli

Mise en œuvre de l'écran hors ligne

Ensuite, nous allons mettre en œuvre la fonctionnalité de l'écran hors ligne dans chaque framework. Nous afficherons un message simple lorsque l'utilisateur se déconnecte.

Vue 3

Dans votre projet Vue 3, ouvrez le src/main.js fichier et importez le Network module depuis @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);
};

In votre modèle d'application (App.vue), ajoutez un élément avec un id de <div> pour afficher le message d'écran hors ligne : offline-screen Maintenant, lorsque l'utilisateur se déconnecte, l'écran hors ligne sera affiché. Lorsque l'utilisateur revient en ligne, l'écran hors ligne sera caché.

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

Angular 14

Dans votre projet Angular 14, ouvrez le

fichier et importez le src/app/app.component.ts module depuis Network Dans votre modèle d'application ( @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);
  };

}

), ajoutez un élément avec un id de app.component.html), add a <div> element with an id of offline-screen afficher le message d'écran hors ligne :

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

<!-- Your application content -->

Ajoutez les styles suivants au fichier : app.component.css Maintenant, lorsque l'utilisateur est hors ligne, l'écran hors ligne sera affiché. Lorsque l'utilisateur revient en ligne, l'écran hors ligne sera masqué.

#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

Dans votre projet React, ouvrez le fichier

et importez le module depuis src/App.js Ajoutez les styles suivants au fichier : Network Maintenant, lorsque l'utilisateur est hors ligne, l'écran hors ligne sera affiché. Lorsque l'utilisateur revient en ligne, l'écran hors ligne sera masqué. @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

Méthodes et interfaces de support App.css framework_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;
}

framework_react

Le réseau API fournit plusieurs méthodes et interfaces pour vous aider à gérer la connexion réseau. Voici quelques-unes des clés :

getStatus(): Demandez l'état actuel de la connexion réseau.
addListener('networkStatusChange', ...): Écoutez les changements dans la connexion réseau.

Continuez à partir de l'écran hors ligne dans Vue, Angular, React avec Capacitor

Si vous utilisez Écran hors ligne dans Vue, Angular, React avec Capacitor pour planifier le comportement des médias et de l'interface natifs, connectez-l’avec En utilisant @capgo/capacitor-activités-en-ligne pour la capacité native dans En utilisant @capgo/capacitor-activités-en-ligne, @capgo/capacitor-activités-en-ligne pour le détail d'implémentation dans @capgo/capacitor-activités-en-ligne, En utilisant @capgo/capacitor-lecteur-de-videos pour la capacité native dans l'utilisation de @capgo/capacitor-player vidéo @capgo/capacitor-player vidéo pour le détail d'implémentation dans @capgo/capacitor-player vidéo, et En utilisant @capgo/capacitor-navigation native pour la capacité native dans l'utilisation de @capgo/capacitor-navigation native