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

En este tutorial, aprenderemos a crear una pantalla offline en aplicaciones Vue 3, Angular 14 y React usando el Network API. El Network API proporciona información de red y conectividad, permitiéndonos gestionar escenarios offline y mejorar la experiencia de usuario. Para comprobaciones de conectividad más profundas que un simple flag online/offline, @capgo/capacitor-network-diagnostics puedes probar la conectividad de URLs, puertos TCP y handshakes de WebSocket desde code nativo.

Requisitos

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

Configuración del proyecto

Primero, vamos a crear un nuevo proyecto usando la herramienta de scaffolding de cada framework.

Vue 3

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

vue create offline-screen-vue3

Elige el preset por defecto y espera a que se cree el proyecto.

Angular 14

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

ng new offline-screen-angular14

Sigue los prompts y, cuando se te pregunte por funciones adicionales, selecciona “Routing” pulsando la spacebar tecla. Espera a que se cree el proyecto.

React

Abre tu terminal y ejecuta 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 el API Network

Ahora, vamos a instalar el @capacitor/network paquete, que proporciona el API Network.

Abre tu terminal y navega hasta el directorio de tu proyecto. Luego, ejecuta el siguiente comando para instalar el paquete:

npm install @capacitor/network

Para proyectos con Capacitor, ejecuta también este comando para sincronizar los archivos del proyecto nativo:

npx cap sync

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

npm install -g @capacitor/cli

Implementación de la pantalla offline

A continuación, implementaremos la funcionalidad de pantalla offline en cada framework. Mostraremos un mensaje sencillo cuando el usuario se quede sin conexión.

Vue 3

En tu proyecto de Vue 3, abre el src/main.js archivo e importa 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 la plantilla de tu aplicación (App.vue), añade un <div> elemento con el id offline-screen para mostrar el mensaje de la pantalla 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 quede sin conexión, se mostrará la pantalla de offline. Cuando vuelva a estar conectado, la pantalla de offline se ocultará.

Angular 14

En tu proyecto de Angular 14, abre el src/app/app.component.ts archivo e importa 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 la plantilla de tu aplicación (app.component.html), añade un <div> elemento con el id offline-screen para mostrar el mensaje de la pantalla offline:

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

<!-- Your application content -->

Añade 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 quede sin conexión, se mostrará la pantalla de offline. Cuando vuelva a estar conectado, la pantalla de offline se ocultará.

React

En tu proyecto de React, abre el src/App.js archivo e importa 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

Añade 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;
}

Ahora, cuando el usuario se quede sin conexión, se mostrará la pantalla de offline. Cuando vuelva a estar conectado, la pantalla de offline se ocultará.

Métodos e interfaces de soporte

La red API ofrece varios métodos e interfaces para ayudarte a gestionar la conexión de red. Estos son algunos de los principales:

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

Continúa desde la pantalla Offline en Vue, Angular y React con Capacitor

Si estás usando Pantalla offline en Vue, Angular, React con Capacitor para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para los detalles de implementación en @capgo/capacitor-live-activities, Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player, @capgo/capacitor-video-player por el detalle de implementación en @capgo/capacitor-video-player, y Uso de @capgo/capacitor-native-navigation para la capacidad nativa al usar @capgo/capacitor-native-navigation.