Leer en inglés

Compartir a través de


Introducción al desarrollo de una aplicación web PWA o híbrida para Android

Esta guía le ayudará a empezar a crear una aplicación web híbrida o una aplicación web progresiva (PWA) en Windows mediante un único código base HTML/CSS/JavaScript que se puede usar en la web y entre plataformas de dispositivos (Android, iOS, Windows).

Mediante el uso de los marcos y componentes adecuados, las aplicaciones basadas en web pueden funcionar en un dispositivo Android de una manera que parezca muy similar a una aplicación nativa.

Características de una aplicación web híbrida o PWA

Hay dos tipos principales de aplicaciones web que se pueden instalar en dispositivos Android. La principal diferencia es si el código de la aplicación está incrustado en un paquete de aplicación (híbrido) o hospedado en un servidor web (pwa).

  • Aplicaciones web híbridas: el código (HTML, JS, CSS) se empaqueta en un APK y se puede distribuir a través de Google Play Store. El motor de visualización está aislado del explorador de Internet de los usuarios, sin uso compartido de sesión o caché.

  • Aplicaciones web progresivas (PWAs): el código (HTML, JS, CSS) reside en la web y no es necesario empaquetarse como APK. Los recursos se descargan y actualizan según sea necesario mediante service Worker. El explorador Chrome se representará y mostrará la aplicación, pero tendrá un aspecto nativo y no incluirá la barra de direcciones del explorador normal, etc. Puede compartir el almacenamiento, la caché y las sesiones con el explorador. Esto es básicamente como instalar un acceso directo al explorador Chrome en un modo especial. Las PWA también se pueden enumerar en Google Play Store mediante la actividad web de confianza.

Las PWA y las aplicaciones web híbridas son muy similares a una aplicación nativa de Android en que:

  • Se puede instalar a través de App Store (Google Play Store o Microsoft Store)
  • Tener acceso a características nativas del dispositivo, como cámara, GPS, Bluetooth, notificaciones y lista de contactos
  • Trabajar sin conexión (sin conexión a Internet)

Las PWA también tienen algunas características únicas:

  • Se puede instalar en la pantalla principal de Android directamente desde la web (sin app Store)
  • Además, se puede instalar a través de Google Play Store mediante una actividad web de confianza
  • Se puede detectar a través de la búsqueda web o compartirse a través de un vínculo de dirección URL.
  • Confiar en un trabajo de servicio para evitar la necesidad de empaquetar código nativo

No necesita un marco para crear una aplicación híbrida o PWA, pero hay algunos marcos populares que se tratarán en esta guía, como PhoneGap (con Cordova) e Ionic (con Cordova o Condensador mediante Angular o React).

Apache Cordova

Apache Cordova es un marco de código abierto que puede simplificar la comunicación entre el código de JavaScript que vive en una webView nativa y la plataforma nativa de Android mediante complementos. Estos complementos exponen puntos de conexión de JavaScript que se pueden llamar desde el código y que se usan para llamar a las API nativas de dispositivos Android. Algunos complementos de Cordova de ejemplo incluyen acceso a servicios de dispositivos como el estado de la batería, el acceso a archivos, los tonos de vibración y anillo, etc. Estas características no suelen estar disponibles para aplicaciones web o exploradores.

Hay dos distribuciones populares de Cordova:

  • PhoneGap: Adobe ha dejado de usar el soporte técnico.

  • Ionic

Ionic

Ionic es un marco que ajusta la interfaz de usuario (UI) de la aplicación para que coincida con el lenguaje de diseño de cada plataforma (Android, iOS, Windows). Ionic le permite usar Angular o React.

Nota

Hay una nueva versión de Ionic que usa una alternativa a Cordova, denominada Condensador. Esta alternativa usa contenedores para que la aplicación sea más fácil de usar web.

Introducción a Ionic mediante la instalación de las herramientas necesarias

Para empezar a compilar una aplicación web híbrida o PWA con Ionic, primero debe instalar las siguientes herramientas:

Creación de un nuevo proyecto con Ionic Cordova y Angular

Instale Ionic y Cordova escribiendo lo siguiente en la línea de comandos:

npm install -g @ionic/cli cordova

Cree una aplicación de Angular Ionic con la plantilla de aplicación "Pestañas" escribiendo el comando :

ionic start photo-gallery tabs

Cambie a la carpeta de la aplicación:

cd photo-gallery

Ejecute la aplicación en el explorador web:

ionic serve

Para obtener más información, consulte los documentos de Angular de Ionic Cordova. Visite la sección Creación de una aplicación de Angular en una PWA de los documentos Ionic para aprender a mover la aplicación de ser un híbrido a una PWA.

Creación de un nuevo proyecto con condensador Ionic y Angular

Instale Ionic y Cordova-Res escribiendo lo siguiente en la línea de comandos:

npm install -g @ionic/cli native-run cordova-res

Cree una aplicación de Angular Ionic con la plantilla de aplicación "Pestañas" y agregue Condensador escribiendo el comando :

ionic start photo-gallery tabs --type=angular --capacitor

Cambie a la carpeta de la aplicación:

cd photo-gallery

Agregue componentes para que la aplicación sea una PWA:

npm install @ionic/pwa-elements

Importe @ionic/pwa-elements si agrega lo siguiente al src/main.ts archivo:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Ejecute la aplicación en el explorador web:

ionic serve

Para obtener más información, consulte la documentación de Angular del condensador Ionic. Visite la sección Creación de una aplicación de Angular en una PWA de los documentos Ionic para aprender a mover la aplicación de ser un híbrido a una PWA.

Creación de un nuevo proyecto con Ionic y React

Instale la CLI Ionic escribiendo lo siguiente en la línea de comandos:

npm install -g @ionic/cli

Para crear un nuevo proyecto con React, escriba el comando :

ionic start myApp blank --type=react

Cambie a la carpeta de la aplicación:

cd myApp

Ejecute la aplicación en el explorador web:

ionic serve

Para obtener más información, consulte la documentación de Ionic React. Visite la sección Hacer que la aplicación React sea una PWA de los documentos Ionic para aprender a mover la aplicación de ser un híbrido a una PWA.

Prueba de la aplicación Ionic en un dispositivo o emulador

Para probar la aplicación Ionic en un dispositivo Android, conecte el dispositivo (asegúrese de que está habilitado primero para el desarrollo) y, a continuación, en la línea de comandos, escriba:

ionic cordova run android

Para probar la aplicación Ionic en un emulador de dispositivos Android, debe hacer lo siguiente:

  1. Instale los componentes necesarios: Kit de desarrollo de Java (JDK), Gradle y Android SDK.

  2. Creación de un dispositivo virtual Android (AVD): consulte la [Guía para desarrolladores de Android]](https://developer.android.com/studio/run/managing-avds.html).

  3. Escriba el comando de Ionic para compilar e implementar la aplicación en el emulador: ionic cordova emulate [<platform>] [options]. En este caso, el comando debe ser:

ionic cordova emulate android --list

Consulta el Emulador de Cordova en los documentos Ionic para obtener más información.