Cómo crear una pantalla en modo offline en Vue 3, Angular 14 o React

En este tutorial, aprenderemos a crear una pantalla en modo offline en aplicaciones de Vue 3, Angular 14 y React utilizando la red API. La red API proporciona información de red y conectividad, lo que nos permite manejar escenarios de desconexión y ofrecer una mejor experiencia de usuario. Para comprobaciones de alcance más profundas más allá de una simple bandera online/offline @capgo/capacitor-diagnósticos-de-red puedes probar la accesibilidad de URL, puertos TCP y saludos de WebSocket desde el code nativo.

Requisitos previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

Node.js (versión 14 o superior)
Vue CLI
Angular CLI
Crear App de React

Configuración del Proyecto

Primero, crea un nuevo proyecto utilizando la herramienta de armado correspondiente para cada marco de trabajo.

Vue 3

Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto de Vue 3:

vue create offline-screen-vue3

Elige el preset predeterminado y espera a que el proyecto se cree.

Angular 14

Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto de Angular 14:

ng new offline-screen-angular14

Sigue las instrucciones, y cuando se te pregunte sobre características adicionales, selecciona "Ruta" presionando la tecla space para activarla. Espera a que el proyecto se cree.

React

Abra su terminal y ejecute el siguiente comando para crear un nuevo proyecto de React:

npx create-react-app offline-screen-react

Espera a que se cree el proyecto.

Instalando la red API

Ahora, instalaremos el @capacitor/network paquete, que proporciona la red API.

Abra su terminal y navegue a su directorio de proyecto. Luego, ejecute el siguiente comando para instalar el paquete:

npm install @capacitor/network

Para proyectos Capacitor también ejecute el siguiente comando para sincronizar los archivos de proyecto nativos:

npx cap sync

Asegúrese de tener el Capacitor CLI instalado globalmente ejecutando:

npm install -g @capacitor/cli

Implementación de la pantalla de offline

A continuación, implementaremos la funcionalidad de pantalla de offline en cada marco. Mostraremos un mensaje simple cuando el usuario se desconecte.

Vue 3

En su proyecto Vue 3, abra el src/main.js archivo y importe el Network módulo desde @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);
};

En su plantilla de aplicación (App.vue), agregue un <div> elemento con un id de offline-screen para mostrar el mensaje de pantalla de offline:

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

Ahora, cuando el usuario se desconecta, se mostrará la pantalla de offline. Cuando el usuario vuelva a conectarse, la pantalla de offline se ocultará.

Angular 14

En su proyecto de Angular 14, abra el src/app/app.component.ts archivo y importe el Network módulo desde @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);
  };

}

En su plantilla de aplicación (app.component.htmlagregue un <div> elemento con un id de offline-screen para mostrar el mensaje de pantalla de offline:

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

<!-- Your application content -->

Agregue los siguientes estilos al app.component.css archivo:

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

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

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

Ahora, cuando el usuario se desconecta, se mostrará la pantalla de offline. Cuando el usuario vuelva a conectarse, la pantalla de offline se ocultará.

React

En su proyecto de React, abra el src/App.js archivo y importe el Network módulo desde @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

Agregue los siguientes estilos al App.css archivo:

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

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

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

Now, when the user goes offline, the offline screen will be displayed. When the user comes back online, the offline screen will be hidden.

Metodos y Interfaces de Apoyo

La red API proporciona varios métodos e interfaces para ayudarlo a manejar la conexión de red. Aquí hay algunos de los más importantes:

getStatus(): Consultar el estado actual de la conexión de red.
addListener('networkStatusChange', ...): Escuchar cambios en la conexión de red.

Siga adelante desde Pantalla de Offline en Vue, Angular, React con Capacitor

Si está utilizando Pantalla de Offline en Vue, Angular, React con Capacitor para planificar el comportamiento de medios y interfaz nativa, conecte con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-actividades-en-vivo para los detalles de implementación en @capgo/capacitor-actividades-en-vivo, Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, @capgo/capacitor-reproductor-de-videos para los detalles de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.