Ionic 6+: crear aplicaciones ios, android y pwas con angular download

Ir al contenido principal

Este explorador ya no se admite.

Actualice a Microsoft Edge para aprovechar las características y actualizaciones de seguridad más recientes, y disponer de soporte técnico.

Comenzar desarrollar una aplicación web híbrida o PWA para Android

• Artículo
• 09/27/2022
• Tiempo de lectura: 6 minutos

En este artículo

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 a los usuarios muy similares 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 Android dispositivos. 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 la 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é.

• Web Apps progresiva (PWA): 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 un trabajo de servicio. 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 el 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 del 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 un App Store)
• Además, se puede instalar a través del 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 una PWA, pero hay algunos marcos populares que se tratarán en esta guía, incluido 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 JavaScript que vive en una webView nativa y la plataforma Android nativa 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 dispositivo 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 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.

Comenzar con 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:

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

Creación de un 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 la documentación de Ionic Cordova Angular. Visite la sección Convertir la aplicación Angular en una PWA de los documentos de Ionic para aprender a mover la aplicación de ser un híbrido a un PWA.

Creación de un proyecto con condensador iónico 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 convertir la aplicación en un PWA:

npm install @ionic/pwa-elements

Importe @ionic/pwa-elements agregando 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 sobre el condensador Ionic Angular. Visite la sección Convertir la aplicación Angular en una PWA de los documentos de Ionic para aprender a mover la aplicación de ser un híbrido a un PWA.

Creación de un proyecto con Ionic y React

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

npm install -g @ionic/cli

Cree un proyecto con React escribiendo 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 Creación de la aplicación de React una PWA de los documentos Ionic para aprender a mover la aplicación de ser un híbrido a un 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 dispositivo Android, debe hacer lo siguiente:

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

2. Crear un dispositivo virtual (AVD) de Android): consulte la [guía del desarrollador 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

Consulte el Emulator cordova en los documentos de Ionic para obtener más información.

Recursos adicionales

• Desarrollo de aplicaciones de doble pantalla para Android y obtención del SDK de dispositivo para Surface Duo

• Actualización de la configuración de Windows Defender para mejorar el rendimiento

• Habilitación de la compatibilidad con virtualización para mejorar el rendimiento del emulador