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.
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 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 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.
Para empezar a compilar una aplicación web híbrida o PWA con Ionic, primero debe instalar las siguientes herramientas:
Node.js para interactuar con el ecosistema Ionic. Descargue NodeJS para Windows o siga la guía de instalación de NodeJS mediante Subsistema de Windows para Linux (WSL). Es posible que quiera considerar el uso del Administrador de versiones de Node (nvm) si va a trabajar con varios proyectos y versiones de NodeJS.
VS Code para escribir el código. Descargue VS Code para Windows. También puede instalar la extensión remota de WSL si prefiere compilar la aplicación con una línea de comandos de Linux.
Terminal Windows para trabajar con la interfaz de línea de comandos (CLI) preferida. Instale Terminal Windows desde Microsoft Store.
Git para el control de versiones. Descargue Git.
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.
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.
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.
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:
Instale los componentes necesarios: Kit de desarrollo de Java (JDK), Gradle y Android SDK.
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).
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.
Comentarios de Windows developer
Windows developer es un proyecto de código abierto. Seleccione un vínculo para proporcionar comentarios: