Comment créer un écran hors ligne avec 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 le Network API. Le Network API fournit des informations sur le réseau et la connectivité, ce qui nous permet de gérer les scénarios hors ligne et d'offrir une meilleure expérience utilisateur. Pour des vérifications de connectivité plus poussées au-delà d'un simple indicateur en ligne/hors ligne, @capgo/capacitor-network-diagnostics peut tester la joignabilité des URL, les ports TCP et les handshakes WebSocket depuis le code natif.

Prerequisites

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

Configuration du projet

Tout d'abord, créons un nouveau projet en utilisant l'outil de scaffolding correspondant à chaque framework.

Vue 3

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

vue create offline-screen-vue3

Choisissez le preset par défaut et attendez la création du projet.

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 prompts, et lorsqu'on vous demande des fonctionnalités supplémentaires, sélectionnez « Routing » en appuyant sur la touche espace Attendez la création du projet.

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 la création du projet.

Installation du plugin Network API

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

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é Capacitor CLI globalement en exécutant :

npm install -g @capacitor/cli

Implémenter 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 <div> élément avec l'id 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>

Désormais, lorsque l'utilisateur passe hors ligne, l'écran hors ligne s'affiche. Dès qu'il se reconnecte, l'écran hors ligne est masqué.

Angular 14

Dans votre projet Angular 14, ouvrez le 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 <div> élément avec l'id 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 app.component.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;
}

Désormais, lorsque l'utilisateur passe hors ligne, l'écran hors ligne s'affiche. Dès qu'il se reconnecte, l'écran hors ligne est masqué.

React

Dans votre projet React, ouvrez le 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 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;
}

Désormais, l'écran hors ligne s'affiche dès que l'utilisateur perd sa connexion. Il disparaît dès que l'utilisateur est de nouveau en ligne.

Méthodes et interfaces de support

Le Network API propose plusieurs méthodes et interfaces pour vous aider à gérer la connexion réseau. En voici les principales :

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

Continuez avec l'écran hors ligne en Vue, Angular ou React avec Capacitor

Si vous utilisez Écran hors ligne en Vue, Angular et React avec Capacitor pour planifier le comportement des médias et de l'interface natifs, connectez-l’à En utilisant @capgo/capacitor-live-activities pour la capacité native dans l'utilisation de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-live-activities, En utilisant @capgo/capacitor-video-player pour la capacité native dans l'utilisation de @capgo/capacitor-video-player, @capgo/capacitor-video-player pour les détails d'implémentation dans @capgo/capacitor-video-player, et En utilisant @capgo/capacitor-native-navigation pour la capacité native avec @capgo/capacitor-native-navigation.