Publicación de PWA en las principales tiendas de aplicaciones: por qué y cómo

Comenzando con Google Play Store, uno tras otro mercado de aplicaciones se subió al carro de dar la bienvenida a Progressive Web Apps (¿Qué es Progressive Web App?) en su tienda, convirtiéndolo en el nuevo enfoque de referencia para la entrega de software. Con todo esto en juego, sería un desperdicio no aprovechar esta nueva tecnología para expandir mejor el alcance de su aplicación.

Para brindarle una perspectiva más clara de todo el movimiento de aplicaciones web progresivas, específicamente el proceso de publicación, hoy revisaremos el estado actual de las PWA en los principales mercados de aplicaciones y cómo publicar una PWA en dichas tiendas.

¿Por qué debería publicar su aplicación web progresiva en las principales tiendas de aplicaciones?

Solía ​​​​ser que las aplicaciones web progresivas se limitaban solo a instalaciones web (Agregar a la pantalla de inicio). Sin embargo, con el tiempo, los mercados de aplicaciones como Google y Microsoft comenzaron a reconocer el potencial de las PWA y tomaron iniciativas para avanzar en la adopción de esta tecnología del futuro.

Si tiene las capacidades y los fondos, nuestra opinión profesional es que debe intentarlo: haga que su PWA sea omniplataforma. Después de todo, grandes marcas como Twitter, Uber y Spotify se subieron al carro y obtuvieron resultados estelares, lo que demuestra que esta tecnología no es solo marketing y que vale la pena considerarla. Microsoft mismo incluso fue un paso más allá al planear hacer de Progressive Web Apps la experiencia principal en Windows.

 Lectura recomendada : 12 mejores ejemplos de aplicaciones web progresivas.

Cómo publicar su PWA en las principales tiendas de aplicaciones

Tienda de juegos de Google

Siendo el precursor del movimiento PWA, no sería sorprendente ver a Google Play Store con los brazos abiertos para Progressive Web Apps. Con TWA (actividades web confiables) en su lugar, todas las secuencias de publicación se han hecho mucho más fáciles y deberían terminar en poco tiempo.

Requisitos

• Estudio Android instalado
• Una cuenta de desarrollador de Google
• Aplicaciones web progresivas que funcionan y de calidad comprobada.

Paso 1 : haga un clon de la aplicación de Android TWA Starter y modifíquelo

• Clone el proyecto svgomg-twa con el siguiente comando:

 clon de git https://github.com/GoogleChromeLabs/svgomg-twa.git

• Importe el proyecto a Android Studio usando Archivo > Nuevo > Importar proyecto .

En /app/build.gradle , modifique twaManifest según su propósito. Los detalles sobre qué y cómo cambiar se pueden encontrar en el archivo build.gradle.

Nota: El ID de la applicationId debe seguir un formato de <com>.<your-brand>.<your-app>

Después de las modificaciones, su /app/build.gradle debería verse así:

 def twaManifest = [
    ID de aplicación: 'com.simicart.app',
    hostName: 'simicart.com', // El dominio que se abre en la TWA.
    launchUrl: '/', // La ruta de inicio para el TWA. Debe ser relativo al dominio.
    name: 'SimiCart PWA', // El nombre que se muestra en el iniciador de Android.
    themeColor: '#ED8A19', // El color utilizado para la barra de estado.
    navigationColor: '#303F9F', // El color utilizado para la barra de navegación.
    backgroundColor: '#bababa', // El color utilizado para el fondo de la pantalla de presentación.
    enableNotifications: false, // Establézcalo en true para habilitar la delegación de notificaciones.
    // Agregue accesos directos para su aplicación aquí. Cada acceso directo debe incluir los siguientes campos:
    // - nombre: Cadena que aparecerá en el atajo.
    // - nombre_corto: cadena más corta utilizada si |nombre| es demasiado largo.
    // - url: ruta absoluta de la URL para iniciar la aplicación (por ejemplo, '/create').
    // - icono: Nombre del recurso en la carpeta dibujable para usar como icono.
    atajos: [
        nombre: 'Abrir SimiCart', 
        short_name: 'Abrir', 
        URL: '/abrir', 
        icono: 'salpicadura'
    ]
,
    // La duración del desvanecimiento de la animación en milisegundos que se reproducirá al eliminar la pantalla de inicio.
    splashScreenFadeOutDuración: 300
]

Paso 2 : Cree un almacén de claves y verifique el APK

Los almacenes de claves o las claves de carga son necesarias para la verificación de su APK. Para crear un almacén de claves, inicie Android Studio y navegue hasta Build → Generate Signed Bundle/APK y complete los campos obligatorios.

Una vez que haya creado un Almacén de claves, deberá extraer la huella digital SHA256 usando los siguientes comandos:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Tipo de entrada: PrivateKeyEntry
...
Certificado de huellas dactilares:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? copia esta línea

Paso 3 : Configure el enlace de activos digitales

Se necesita un enlace de activo digital para verificar la propiedad de su contenido web, que luego se puede usar para vincular a su APK.

Generar un archivo de estado de cuenta

Utilice la huella digital SHA256 que extrajo anteriormente y genere un archivo de estado de cuenta con el Generador y probador de listas de estados de cuenta.

Una vez que haya generado un archivo de estado de cuenta, el siguiente paso es crear un archivo de acceso público que contenga información de la herramienta de activos digitales. El archivo debe colocarse en su servidor web y en esta ubicación:

 .bien conocido/enlaces de activos.json

La ubicación de este archivo depende del proceso de compilación de su aplicación web, pero normalmente debería estar en los directorios implementados, es decir, los directorios 'público' o 'dist'.

Cuando todo esté listo, el siguiente y último paso que debe hacer es implementar su aplicación.

Paso 4 : Cree y publique su aplicación en Google Play

Con su Google Play Console en la configuración predeterminada, vaya a Todas las aplicaciones → Crear aplicación .

Crear una prueba interna

Vaya a Versiones de la aplicación → Pista de prueba interna → Crear versión para crear una Pista de prueba interna de su aplicación.

Crea un APK firmado

En Android Studio, navegue hasta Build → Generate Signed Bundle/APK y use el almacén de claves SHA256 que extrajimos anteriormente. Asegúrese de marcar las dos casillas de versión de la firma.

Sube el APK

Ahora estás al final de este proceso. Para cargar su apk, simplemente vaya a Google Play Store, Lanzamientos de la aplicación → Pista de prueba interna → Editar lanzamiento .

No te olvides de completar el listado de la tienda

Todos los campos obligatorios deben completarse antes de que su aplicación pueda incluirse en el proceso de revisión. Estos campos son necesarios para obtener información crucial, como detalles de precios, listado de tiendas, calificación de contenido, etc. Cuando se complete este proceso, debería ver cuatro marcas de verificación verdes ️ que indican que se completaron todos los campos obligatorios.

Y eso es. Su PWA ahora está lista para revisión y estará lista para descarga pública en unas pocas horas.

Tienda de aplicaciones de Apple

De todos los principales mercados de aplicaciones, Apple App Store podría ser el menos acogedor o incluso hostil a las PWA, lo cual es un poco irónico considerando que Steve Jobs fue el primero en visualizar un futuro lleno de aplicaciones web progresivas.

El motor completo de Safari está dentro del iPhone. Y así, puede escribir increíbles aplicaciones Web 2.0 y Ajax que se ven y se comportan exactamente como las aplicaciones en el iPhone. Y estas aplicaciones pueden integrarse perfectamente con los servicios de iPhone. Pueden hacer una llamada, pueden enviar un correo electrónico, pueden buscar una ubicación en Google Maps.

Steve Jobs, 2007

En iOS, las PWA están severamente limitadas en términos de funciones. No hay soporte para notificaciones automáticas, el manifiesto de la aplicación web solo es parcialmente compatible y las nuevas funciones, como la Galería de aplicaciones nuevas, a menudo ignoran los PWA por completo. Y debido a esto, tiene sentido que PWA no sea bienvenido en la App Store de Apple, según las Pautas de revisión de la App Store de Apple:

Su aplicación debe incluir funciones, contenido e interfaz de usuario que la eleven más allá de un sitio web reempaquetado . Si su aplicación no es particularmente útil, única o "similar a una aplicación", no pertenece a la App Store.

Funcionalidad mínima, pautas de revisión de la tienda de aplicaciones

Dado que Apple hace todo lo posible por paralizar todas las capacidades de PWA, cualquier esfuerzo por publicar un PWA, incluso cuando se trata de un envoltorio de aplicación nativo como Cordova, es inútil. Por ahora, solo podemos esperar que las futuras versiones de iOS brinden un mejor soporte para PWA, pero a partir de ahora, no es posible publicar PWA en Apple App Store, por lo que debería considerar un enfoque de aplicación nativa si la mayoría de su público objetivo utiliza dispositivos basados ​​en iOS.

 Leer más: PWA en iOS 14 Beta: cambios sutiles

Tienda de Microsoft

Como se indica en nuestro artículo Windows 10 y PWA: el futuro de la entrega de software, Microsoft ha estado sentando las bases para una tienda de aplicaciones web progresivas durante bastante tiempo y poco a poco se está convirtiendo en una realidad. Los PWA de marcas más populares ya están poblando todos los mercados de aplicaciones y con resultados no menos ejemplares para que otros los sigan.

Al igual que Google, Microsoft da la bienvenida a los PWA y, además, incluso planean popularizar y reemplazar las aplicaciones UWP nativas con aplicaciones híbridas, una especie de aplicaciones web progresivas envueltas en shells nativos.

En teoría, publicar su aplicación web progresiva en Microsoft Store no debería requerir ningún esfuerzo, ya que originalmente se planeó como un proceso automático que utiliza Bing como mecanismo de rastreo para PWA de calidad. Sin embargo, todo aún se encuentra en una etapa experimental y no funciona con la eficacia prevista, por lo que deberá enviar manualmente su PWA como un paquete de aplicación de Windows (.appx). Pero no te preocupes, el proceso no es tan estresante como el de una determinada tienda de aplicaciones.

Requisitos

• Una cuenta del Centro de desarrollo de Windows
• Constructor de PWA
• Una aplicación web progresiva en funcionamiento y de calidad comprobada que cumple con las políticas de la tienda

Paso 1 : Reserve un nombre para su aplicación

El primer paso para publicar una aplicación en Microsoft Store es reservar un nombre. En caso de que te estés preguntando qué pasaría si un muchacho loco decidiera reservar todos los nombres existentes: no te preocupes, la reserva de nombres caducará después de 3 meses.

Rellene los campos obligatorios y anótelos en algún lugar, ya que esta información será necesaria más adelante.

Paso 2: Genere un AppX usando PWABuilder

Como se mencionó anteriormente, PWABuilder es una excelente manera de generar un paquete funcional publicable en los principales mercados de aplicaciones. Es una de las primeras herramientas en el mercado que fue desarrollada por Microsoft únicamente con el propósito de hacer avanzar la adopción de PWA.

Generar Manifiesto

En PWABuilder, ingrese la URL de su PWA y haga clic en Comenzar . Tenga en cuenta que este paso es crucial, ya que identifica y/o completa automáticamente la información que falta en su manifest.json , que a menudo se necesita para las PWA que no están diseñadas específicamente para Microsoft Store.

 Lectura recomendada: Manifiesto de PWA: cómo crear el manifiesto de su aplicación web de forma sencilla

El siguiente paso es crear trabajadores de servicios para su PWA, pero suponiendo que la suya es una aplicación web progresiva típica en la que los trabajadores de servicios ya están integrados, este paso se omitirá y avanzaremos al paso final: obtener su paquete .appx.

Generar AppX

Al hacer clic en generar AppX, debería ver algo como esta ventana emergente:

Aquí es donde la información anterior puede ser útil. Complete los campos y se mostrará un cuadro de descarga que contiene el paquete .appx. Descárguelo y ahora estará listo para publicar su PWA en Microsoft Store.

En caso de que desee probar su PWA antes de publicarlo en la tienda, siempre existe la opción de probarlo en Windows habilitando el Modo desarrollador → Haga clic con el botón derecho en test_install.ps1 → Ejecutar con PowerShell . Al hacer esto, se agregará automáticamente su PWA a su escritorio y al menú Inicio, desde donde se puede iniciar y probar para ver si todo funciona correctamente.

Paso 3: envíe su paquete de aplicación a Microsoft Store

Para publicar su PWA en Microsoft Store, deberá navegar a la carpeta del paquete dentro del .zip que descargó anteriormente. En esta carpeta se encuentra todo lo que necesitaría para publicar en Microsoft Store. Para aclaraciones, esta carpeta no contiene nada de su código, ya que solo sirve como un mecanismo de dirección a su PWA en la web y otros metadatos de la tienda no relacionados.

Una vez que haya localizado el archivo windows.appx, diríjase a la página de envío en su Centro de desarrollo y complete la información requerida:

Después de completar todos los pasos y completar todos los campos obligatorios, el botón " Enviar a la tienda " debería encenderse, lo que indica que su PWA ahora está lista para el proceso de revisión. Este proceso tardará entre una hora y varios días en completarse; una vez que termine, su PWA estará certificada y disponible para descargas públicas/privadas (depende de su configuración de disponibilidad en el Centro de desarrollo).

Conclusión

Después de todo esto, tal vez todavía se pregunte por qué debería crear una aplicación web progresiva, y mucho menos pasar por todos estos problemas para publicar una. Y tienes razón al hacer preguntas tan fundamentales.

La aplicación web progresiva está demostrando paso a paso que es el futuro de la entrega de software y el siguiente paso natural en la evolución de la tecnología web. A partir de ahora, ya se usa ampliamente en todo el mundo del comercio electrónico, donde la experiencia unificada y atractiva en todos los dispositivos es la clave para lograr altas conversiones.

Al ser una tecnología nueva, ya es bastante difícil crear una aplicación web progresiva tal cual. Con SimiCart, ya no tiene que preocuparse por las fases de desarrollo de su Magento PWA , ya que proporcionamos una solución completa y la mejor rentable del mercado.