Écran hors ligne dans Vue, Angular, React avec Capacitor

Apprenez à mettre en œuvre un écran hors ligne dans les applications Vue, Angular ou React en utilisant le réseau API et Capacitor. Améliorez l'expérience utilisateur en gérant efficacement les scénarios hors ligne.

Crédits de l'article

Martin Donadieu

Auteur

Valeria

Relecteur

Jordan

Éditeur

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. Pour des vérifications de disponibilité plus approfondies au-delà d'un simple drapeau en ligne/hors ligne @capgo/capacitor-diagnostics-de-réseau Pouvez-vous tester la disponibilité d'une URL, les ports TCP et les échanges WebSocket à partir de la code.

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 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 instructions, puis, lorsqu'on vous demande d'autres fonctionnalités, sélectionnez « Routing » en appuyant sur le 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 du réseau API

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

Ouvrez votre terminal et naviguez dans votre dossier de 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 de projet natifs :

npx cap sync

Vérifiez que vous avez Capacitor et CLI installés globalement en exécutant :

npm install -g @capacitor/cli

Implémenter l'écran hors ligne

Ensuite, nous allons implémenter 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);
};

Dans votre modèle d'application (App.vue), ajoutez un <div> élément 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 se trouve hors ligne, l'écran hors ligne sera affiché. Lorsque l'utilisateur revient en ligne, l'écran hors ligne sera masqué.

Angular 14

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

}

In votre modèle d'application (app.component.htmlajoutez une} <div> pour afficher le message d'écran hors ligne : offline-screen Ajoutez les styles suivants au

<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 à la app.component.css file:

#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 trouve hors ligne, l'écran hors ligne sera affiché. Lorsque l'utilisateur revient en ligne, l'écran hors ligne sera masqué.

React

fichier et importez le src/App.js module depuis Network ]} @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 à la App.css file:

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

Support des méthodes et interfaces

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(): Demander le statut actuel de la connexion réseau.
addListener('networkStatusChange', ...): Écouter les changements dans la connexion réseau.

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

Si vous utilisez L'écran hors ligne dans Vue, Angular, React avec Capacitor pour planifier le comportement de médias et d'interface natifs, connectez-l’avec En utilisant @capgo/capacitor-activités en direct pour la capacité native dans En utilisant @capgo/capacitor-activités en direct, @capgo/capacitor-activités en direct détails d'implémentation dans @capgo/capacitor-activités en direct, Utilisation de @capgo/capacitor-lecteur de vidéos capacité native dans Utilisation de @capgo/capacitor-lecteur de vidéos, @capgo/capacitor-lecteur de vidéos détails d'implémentation dans @capgo/capacitor-lecteur de vidéos, et Utilisation de @capgo/capacitor-navigation native capacité native dans Utilisation de @capgo/capacitor-navigation native.