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

En este tutorial, aprenderemos a crear una pantalla de cierre 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 cierre 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 puede probar la alcanzabilidad de URL, puertos TCP y saludos de WebSocket desde el code nativo.

Requisitos previos

Antes de comenzar, 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, crearemos un nuevo proyecto utilizando la herramienta de scaffolding 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 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 por características adicionales, selecciona ‘Ruta’ presionando la tecla de espacio. Espera a que el proyecto se cree.

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, vamos a instalar el @capacitor/network paquete, que proporciona la red API.

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

npm install @capacitor/network

For proyectos Capacitor también ejecute el siguiente comando para sincronizar los archivos del proyecto nativo:

npx cap sync

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

npm install -g @capacitor/cli

Implementación de la pantalla de cierre de sesión

En el siguiente paso, implementaremos la funcionalidad de pantalla de cierre de sesión en cada marco de trabajo. Mostraremos un mensaje simple cuando el usuario se desconecte.

Vue 3

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

agregue un elemento App.vuecon un id de <div> para mostrar el mensaje de pantalla de cierre de sesión: offline-screen Offline Screen

<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 desconexión. Cuando el usuario vuelva a conectarse, la pantalla de desconexión se ocultará.

Angular 14

En tu proyecto de Angular 14, abre el src/app/app.component.ts archivo y importa el 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);
  };

}

En tu plantilla de aplicación (app.component.html), agrega un <div> elemento con un id de offline-screen para mostrar el mensaje de pantalla de desconexión:

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

<!-- Your application content -->

Agrega 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 desconexión. Cuando el usuario vuelva a conectarse, la pantalla de desconexión se ocultará.

React

En tu proyecto de React, abre el archivo src/App.js y importa el 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 Métodos 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;
}

La red __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()Sigue adelante desde la pantalla de desconexión en Vue, Angular, React con __CAPGO_KEEP_0__
addListener('networkStatusChange', ...)targetLanguage

Keep going from Offline Screen in Vue, Angular, React with Capacitor

If you are using Pantalla en modo 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 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.