How to Create an Offline Screen in Vue 3, Angular 14, o React

In este tutorial, aprenderemos a crear una pantalla de 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 offline y brindar una mejor experiencia del usuario. Para verificaciones de alcance más profundas más allá de una simple bandera online/offline @capgo/capacitor-diagnósticos-de-red pueden probar la alcanzabilidad de URL, puertos TCP y saludos de WebSocket desde el code nativo.

Requisitos previos

Antes de comenzar, asegúrese de tener instalados los siguientes:

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

Configuración del proyecto

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

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 espacio para crear 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 el proyecto se cree.

Instalando la red API

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

Abra su terminal y navegue hasta 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 de 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);
};

In su plantilla de aplicación (App.vue), agrega un <div> con un id de offline-screen para mostrar el mensaje de pantalla de fuera de línea:

<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 fuera de línea. Cuando el usuario vuelva a conectarse, se ocultará la pantalla de fuera de línea.

Angular 14

En tu proyecto de Angular 14, abre el src/app/app.component.ts archivo y 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 tu plantilla de aplicación (app.component.html), agrega un <div> con un id de offline-screen para mostrar el mensaje de pantalla fuera de línea:

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

<!-- Your application content -->

Agregar los siguientes estilos al archivo: app.component.css Ahora, cuando el usuario se desconecta, se mostrará la pantalla fuera de línea. Cuando el usuario vuelva a conectarse, la pantalla fuera de línea se ocultará.

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

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

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

React

En tu proyecto de React, abre el archivo

y importa el módulo desde src/App.js Agregar los siguientes estilos al archivo: Network Ahora, cuando el usuario se desconecta, se mostrará la pantalla fuera de línea. Cuando el usuario vuelva a conectarse, la pantalla fuera de línea se ocultará. @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

Métodos y Interfaces de Apoyo App.css Para Vue

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

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

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

Para Angular

Para React

La red API ofrece varios métodos e interfaces para ayudarte a manejar la conexión de red. Aquí te presentamos algunos de los más importantes:

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

Sigue adelante con la pantalla de Offline en Vue, Angular, React con Capacitor

Si estás utilizando La pantalla de Offline en Vue, Angular, React con Capacitor para planificar el comportamiento de medios y interfaz nativa, conecta con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo Usando @capgo/capacitor-actividades-en-vivo para el detalle 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 el detalle 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.