Cómo crear una pantalla de trabajo en línea/offline en Vue 3, Angular 14 o React

En este tutorial, aprenderemos a crear una pantalla de trabajo en línea fuera de línea 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 trabajo en línea fuera de línea y ofrecer una mejor experiencia del usuario. Para verificaciones de alcance más profundas más allá de una bandera online/offline simple @capgo/capacitor-diagnósticos de red puedes probar la alcance de URL, puertos TCP y saludos de WebSocket desde el code.

Prerequisites

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

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

Configuración del Proyecto

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

Vue 3

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

vue create offline-screen-vue3

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

Angular 14

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

ng new offline-screen-angular14

Siga las instrucciones, y cuando se le pregunte por características adicionales, seleccione "Ruta" presionando la tecla espacio espere a que el proyecto se haya creado.

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

Instalando la red API

Espere a que el proyecto se cree. @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 ejecuta el siguiente comando para sincronizar los archivos del proyecto nativo:

npx cap sync

Verifique que tenga instalado globalmente el Capacitor CLI ejecutando:

npm install -g @capacitor/cli

Implementando la pantalla de fuera de línea

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

Vue 3

y importe el módulo desde src/main.js En su plantilla de aplicación ( Network módulo de @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 tu plantilla de aplicación (App.vue), agregar una <div> Implementación de la pantalla de offline offline-screen para mostrar el mensaje de pantalla 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 desconecte, 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 archivo src/app/app.component.ts y importe el módulo desde Network módulo de @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.htmlagregue una) <div> Agregue los siguientes estilos al archivo 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 -->

Añada los siguientes estilos a 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;
}

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

React

In 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;
}

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

Metodos y Interfaces de Apoyo

La red API ofrece varias métodos e interfaces para ayudarte a manejar la conexión de red. Algunos de los más importantes son:

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

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

Si está utilizando Pantalla en modo offline en Vue, Angular, React con Capacitor para planificar el comportamiento de medios y interfaz nativa, 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.