Comment créer un écran hors ligne en Vue 3, Angular 14 ou React

Dans ce tutoriel, nous allons apprendre à créer un écran 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.

Prérequis

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

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

Configuration du projet

Tout d’abord, créons 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

Choisissez 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 invitations, et lorsque vous êtes invité à ajouter des fonctionnalités supplémentaires, sélectionnez « Routing » en appuyant sur la touche « espace ». Attendez que le projet soit créé. Attendez que le projet soit créé. React

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

Attendez que le projet soit créé.

npx create-react-app offline-screen-react

L'installation du réseau __CAPGO_KEEP_0__

Installing the Network API

package, qui fournit le réseau __CAPGO_KEEP_0__. @capacitor/network package, which provides the Network API.

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

npm install @capacitor/network

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

npx cap sync

Make sure you have the Capacitor CLI installed globally by running:

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 __CAPGO_KEEP_0__ Network et importez le @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);
};

__CAPGO_KEEP_1__App.vueDans votre modèle d'application ( <div> ), ajoutez un offline-screen élément avec un id de

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

pour afficher le message de l'écran hors ligne :

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

Dans votre projet Angular 14, ouvrez le fichier et importez le module de src/app/app.component.ts __CAPGO_KEEP_0__ Network de @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);
  };

}

Dans votre modèle d'application (app.component.html), ajoutez un élément avec un id de <div> pour afficher le message d'écran hors ligne : offline-screen Ajoutez les styles suivants au fichier :

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

<!-- Your application content -->

Maintenant, lorsque l'utilisateur se trouve hors ligne, l'écran hors ligne sera affiché. Lorsque l'utilisateur revient en ligne, l'écran hors ligne sera caché. 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;
}

Dans votre projet React, ouvrez le fichier

module de

élément avec un id de src/App.js file et importer le Network module depuis @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

Ajoutez les styles suivants au App.css fichier :

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

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

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

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

Méthodes et interfaces de support

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

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