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 conexión inalámbrica y brindar una mejor experiencia del usuario. Para realizar comprobaciones de alcance más profundas más allá de una simple bandera online/offline @capgo/capacitor-diagnósticos-de-red puedes probar la alcanzabilidad de una 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
Create React App

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 "Rutas" presionando la tecla del teclado. Espera a que el proyecto se cree. React

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

Espera a que el proyecto se cree.

npx create-react-app offline-screen-react

Instalando la red __CAPGO_KEEP_0__

Installing the Network API

paquete, que proporciona la red __CAPGO_KEEP_0__. @capacitor/network package, which provides the Network API.

Open your terminal and navigate to your project directory. Then, run the following command to install the package:

npm install @capacitor/network

Para proyectos Capacitor, también ejecuta el siguiente 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 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 tu proyecto de Vue 3, abre el archivo src/main.js y importa el módulo desde Network En tu plantilla de aplicación ( @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);
};

), agrega un elemento con un id de App.vuepara mostrar el mensaje de pantalla de offline: <div> element with an id of offline-screen to display the offline screen message:

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

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

Angular 14

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

}

), agregue un elemento con un id de app.component.htmlpara mostrar el mensaje de pantalla de espera: <div> Agregue los siguientes estilos al archivo offline-screen Now, when the user goes offline, the offline screen will be displayed. When the user comes back online, the offline screen will be hidden.

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

<!-- Your application content -->

Angular 14 app.component.css En su proyecto de Angular 14, abra el 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;
}

y importe el módulo desde

React

En tu proyecto de React, abre el archivo src/App.js módulo desde Network Agrega los siguientes estilos al archivo: @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

Ahora, cuando el usuario se desconecta, se mostrará la pantalla de desconexión. Cuando el usuario vuelva a conectarse, la pantalla de desconexión se ocultará. App.css Metodos y Interfaces de Apoyo

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

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

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

El Network __CAPGO_KEEP_0__ proporciona varios métodos e interfaces para ayudarte a manejar la conexión de red. Aquí te presentamos algunos de los más importantes:

: Consulta el estado actual de la conexión de red.

The Network API provides several methods and interfaces to help you handle the network connection. Here are some of the key ones:

getStatus()Continúa desde la pantalla de desconexión en Vue, Angular, React con __CAPGO_KEEP_0__
addListener('networkStatusChange', ...)__CAPGO_KEEP_0__

Capacitor

If you are using Offline Screen en Vue, Angular, React con Capacitor para planificar el comportamiento de medios y interfaz nativos, conectarlo con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @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.