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 des 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é, 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é ce qui suit :

• Node.js (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 respectif 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 preset 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 paquet @capacitor/network, qui fournit l’API Network.

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 du projet natif :

npx cap sync

Assurez-vous d’avoir installé le CLI Capacitor 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 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 votre modèle d’application (App.vue), ajoutez un élément <div> avec un id de offline-screen pour afficher le message de l’é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 sera affiché. Lorsque l’utilisateur revient en ligne, l’écran hors ligne sera caché.

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 votre modèle d’application (app.component.html), ajoutez un élément <template> avec un id de offline-screen pour afficher le message de l’é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 sera affiché. Lorsque l’utilisateur revient en ligne, l’écran hors ligne sera caché.

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 sera affiché. Lorsque l’utilisateur revient en ligne, l’écran hors ligne sera caché.

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 quelques-unes des principales :

• getStatus() : Interroger le statut actuel de la connexion réseau.
• addListener('networkStatusChange', ...) : Écouter les changements de connexion réseau.