Comment créer un écran hors ligne dans 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 l’API Network. L’API Network 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 installé les éléments suivants :

Nodejs (version 14 ou supérieure)
Vue CLI
Angular CLI
Create React App

Configuration du projet

Tout d’abord, créons un nouveau projet en utilisant l’outil de scaffolding 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éréglage 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 lorsqu’on vous demande des fonctionnalités supplémentaires, sélectionnez “Routing” en appuyant sur la touche espace. 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 de l’API Network

Maintenant, installons le package @capacitor/network, qui fournit l’API Network.

Ouvrez votre terminal et accédez au répertoire de votre projet. Ensuite, exécutez la commande suivante pour installer le package :

npm install @capacitor/network

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

npx cap sync

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

npm install -g @capacitor/cli

Implémentation de l’écran hors ligne

Ensuite, nous allons implémenter la fonctionnalité d’écran hors ligne dans chaque framework. Nous afficherons un message simple lorsque l’utilisateur passe hors ligne.

Vue 3

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

Dans le template de votre application (App.vue), ajoutez un élément <div> avec un id de offline-screen pour afficher le message d’écran hors ligne :

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

Maintenant, lorsque l’utilisateur passe hors ligne, l’écran hors ligne s’affichera. Lorsque l’utilisateur revient en ligne, l’écran hors ligne sera masqué.

Angular 14

Dans votre projet Angular 14, ouvrez le fichier src/app/app.component.ts et importez le module Network depuis @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 le template de votre application (app.component.html), ajoutez un élément <template> avec un id de offline-screen pour 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 :

#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 passe hors ligne, l’écran hors ligne s’affichera. Lorsque l’utilisateur revient en ligne, l’écran hors ligne sera masqué.

React

Dans votre projet React, ouvrez le fichier src/App.js et importez le module Network 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 fichier App.css :

#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 passe hors ligne, l’écran hors ligne s’affichera. Lorsque l’utilisateur revient en ligne, l’écran hors ligne sera masqué.

Méthodes et interfaces de support

L’API Network fournit plusieurs méthodes et interfaces pour vous aider à gérer la connexion réseau. Voici les principales :

getStatus() : Interroge l’état actuel de la connexion réseau
addListener('networkStatusChange', ) : Écoute les changements dans la connexion réseau