Creé una aplicación web progresiva y la publiqué en 3 tiendas de aplicaciones. Esto es lo que aprendí.

Un mes de trabajo, varios cientos de dólares y mucha burocracia.

Recientemente publiqué Chavah Messianic Radio, un reproductor de música similar a Pandora, como una aplicación web progresiva y lo envié a las 3 tiendas de aplicaciones (Google Play, iOS App Store, Windows Store).

El proceso fue doloroso y esclarecedor. Esto es lo que aprendí.

¿Por qué?

En primer lugar, podría preguntarse: "¿Por qué poner su aplicación en las tiendas de aplicaciones? ¡Solo vive en la web abierta! "

La respuesta, en pocas palabras, es porque ahí es donde están los usuarios . Hemos capacitado a una generación de usuarios para que encuentren aplicaciones en tiendas de aplicaciones patentadas, no en la web abierta y gratuita.

Para mi aplicación web, había 2 grandes razones para ingresar a la tienda de aplicaciones:

1. Demanda del usuario
2. Restricciones de aplicaciones web por plataformas móviles hostiles de Apple

Demanda de los usuarios: Mis usuarios me han estado preguntando durante años: "¿Existe una aplicación para Javá? No lo veo en la tienda ".

Lo preguntan porque hemos capacitado a los usuarios para que busquen aplicaciones en tiendas de aplicaciones propietarias.

Mi respuesta a mis usuarios hasta ahora ha sido,

“¡Oh, no necesitas una aplicación, solo ve al sitio web en tu teléfono! ¡Funciona!"

Pero estaba mintiendo un poco.

Las aplicaciones web reales solo funcionan un poco en dispositivos móviles. Lo que me lleva a la segunda razón: restricciones de aplicaciones web por parte de plataformas móviles hostiles de Apple.

Los proveedores de plataformas móviles, como Apple, están totalmente de acuerdo con las aplicaciones que usan su teléfono al máximo. Acceda a su ubicación, reproduzca audio de fondo, obtenga sus coordenadas GPS, reproduzca más de una cosa a la vez y más.

Apple está totalmente de acuerdo con eso.

Pero solo si le paga a Apple $ 99 al año por el privilegio.

Si quieres hacer cualquiera de esas cosas en una aplicación web antigua normal, bueno, Dios mío, Apple no solo te negará estas cosas, sino que te impedirá incluso pedir permiso .

Para mi aplicación de reproductor de música similar a Pandora, este horrible quebrantamiento se manifestó de muchas maneras.

Desde cosas menores como "iOS Safari no te permitirá reproducir audio sin primero interactuar con la página" hasta cosas importantes y sorprendentes como, "iOS Safari no te permitirá reproducir la siguiente canción si tu aplicación está en segundo plano o si tu pantalla está apagada ".

Ah, además de extrañas anomalías visuales como escribir en un cuadro de texto y ver su texto aparecer en otra parte de la pantalla.

Entonces, para que mi aplicación de música HTML5 fuera realmente funcional y funcionara en los dispositivos móviles de las personas, era necesario convertir mi PWA en una aplicación en la tienda de aplicaciones.

Barreras para entrar

En el mundo ideal, publicar su aplicación web en las tiendas de aplicaciones se vería así:

• Su Web / Cloud Host o Proveedor de Integración Continua
• Ha publicado una aplicación web progresiva. ¿Publicar en tiendas de aplicaciones?

☑ Tienda de aplicaciones iOS

☑ Google Play

☑ Tienda Windows

(O alternativamente, como Microsoft está experimentando, su PWA aparecerá automáticamente en la tienda de aplicaciones mientras Bing la rastrea).

Pero, por desgracia, no vivimos en este mundo ideal. En cambio, tenemos que lidiar con todo tipo de BS nativas patentadas para que nuestras aplicaciones web lleguen a las tiendas.

Cada una de las tiendas de aplicaciones tiene una barrera de entrada: lo difícil que es llevar una aplicación web existente a la tienda de aplicaciones.

Enumero algunas de las barreras a continuación.

Costo

• Apple : $ 99 / año para que su aplicación aparezca en la tienda de aplicaciones de iOS.
• Google: tarifa única de $ 25 para incluir su aplicación en Google Play Store.
• Microsoft: ¡Gratis!

No me hagas pagarte para que mi aplicación esté disponible para tus usuarios. Mi aplicación enriquece tu plataforma. Sin buenas aplicaciones, su plataforma será abandonada.

Apple solía entender esto. Cuando presentó por primera vez el iPhone, Steve Jobs insistió en que HTML5 era el futuro y que las aplicaciones serían simplemente aplicaciones web. No había un SDK de iPhone nativo para terceros. Desde entonces, Apple ha abandonado esta visión.

Google solicitó una tarifa única simbólica de $ 25. Probablemente para evitar spammers y disminuir la entrada de aplicaciones realmente basura en la tienda.

Microsoft parece decidido a aumentar la cantidad total de aplicaciones en su tienda de aplicaciones, independientemente de la calidad.

Ganador: Microsoft. Es difícil liberarse.

Añadiendo capacidades nativas

En un mundo ideal, no tendría que escribir una sola línea adicional de código para que mi aplicación web se integre en el sistema operativo. O, como dijo Steve Jobs en 2007,

“El motor Safari completo está dentro del iPhone. Y así, puede escribir increíbles aplicaciones Web 2.0 y Ajax que se ven exactamente y se comportan exactamente como las aplicaciones del 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

Para mí, eso significa que mi aplicación web reproduce audio de fondo utilizando audio HTML5 estándar; que funciona bien en todos los sistemas operativos.

Mi aplicación web declara qué audio se está reproduciendo, y los sistemas operativos lo captan, muestran la información de la canción que se está reproduciendo actualmente en la pantalla de bloqueo.

Mi aplicación controla el audio usando la API de audio HTML5 estándar; el sistema operativo lo capta y proporciona controles de reproducción / pausa / siguiente / volumen / barra de seguimiento en la pantalla de bloqueo.

Pero, lamentablemente, no vivimos en este mundo ideal. Todas las cosas enumeradas anteriormente en realidad no funcionan de manera inmediata en las 3 plataformas.

Mi aplicación web necesita reproducir audio en segundo plano. Y cargue las URL de mi CDN. Suena razonable, ¿verdad? Y además, ¿qué tal mostrar la información de la canción que se está reproduciendo actualmente en la pantalla de bloqueo? ¿Y controlar el audio (reproducir / pausar / siguiente, etc.) desde la pantalla de bloqueo? ¿Qué tan difícil es esto?

Aquí se toman tres enfoques muy diferentes:

• Apple : No le damos a las aplicaciones web una forma de declarar tales capacidades; deberá escribir un contenedor nativo (por ejemplo, con Cordova) para interactuar con el sistema operativo.
• Google : Web FTW! Creemos un nuevo estándar web que muestre audio y controles desde la pantalla de bloqueo. ¿Audio de fondo? ¡Claro, adelante!
• Microsoft: inyectaremos nuestra API patentada, window.Windows. *, En su espacio de nombres global de JavaScript y podrá usarla para hacer las cosas que desee.

Entrando en más detalles aquí para cada tienda:

Para la tienda de aplicaciones de iOS, ¿su aplicación web necesita reproducir audio de fondo? Utilice un complemento de Cordova. ¿Necesita mostrar la canción que se está reproduciendo actualmente en la pantalla de bloqueo? Utilice un complemento de Cordova. ¿Necesita controlar la canción que se está reproduciendo actualmente desde la pantalla de bloqueo? Utilice un complemento de Cordova. Entiendes la idea. Básicamente, Cordova engaña a Apple haciéndole creer que eres una aplicación nativa. Y como no eres una aplicación web desagradable, Apple te permite hacer todo lo que pueden hacer las aplicaciones nativas. Solo necesitas trucos nativos, complementos de Cordova, para que puedas hacerlo.

Para Google Play, es bueno que pueda escribir código JS para que esto funcione; no se requieren complementos de Cordova aquí. Por supuesto, JS no funcionará en ningún lugar excepto Chrome en Android ... pero bueno, tal vez algún día (¡en un mundo ideal!) Todos los navegadores móviles implementarán estas API web ... y el mundo vivirá como uno solo. Estoy casi listo para sacar algunas melodías de utopía hippie de John Lennon.

Para la Tienda Windows, ¿desea reproducir audio de fondo? ¡Lo siento! Es decir, a menos que declare sus intenciones en nuestro archivo de manifiesto de capacidades patentadas (fácil) Y que implemente esta interfaz multimedia patentada usando window.Windows.SystemMediaTransportControls (no tan fácil). De lo contrario, lo silenciaremos cuando su aplicación pase a segundo plano.

Ganador : Google. Quiero poder escribir JavaScript y dejar que el sistema operativo capte señales de mi aplicación.

Subcampeón : Windows. Todavía puedo escribir JavaScript antiguo, pero necesito hablar con una API JS de Windows patentada que se inyectó en mi proceso cuando se ejecutaba en Windows. No es terrible.

Perdedor : Apple. No les importan las aplicaciones web. De hecho, es peor que eso. Parece que en realidad son hostiles a las aplicaciones web. iOS Safari es el nuevo Internet Explorer 6. Se ha quedado atrás en casi todos los estándares web, especialmente en las aplicaciones web progresivas. Esto probablemente se deba a razones comerciales: las aplicaciones web interrumpen su raqueta de compras en la aplicación de $ 99 / año + 33%. Entonces, para que mi aplicación web funcione en su plataforma, básicamente tengo que fingir que soy una aplicación nativa.

Registro en la App Store

Enviar su PWA a la tienda de aplicaciones requiere registro, verificación comercial y más trámites burocráticos. Así es como les fue a las 3 tiendas de aplicaciones:

• Apple : debe demostrar que es una empresa legal registrada. Esta verificación no la hacemos nosotros, sino un tercero, que puede o no conocer su empresa.
• Google : ¿Quieres tu aplicación en nuestra tienda? Genial por nosotros.
• Microsoft : ¿Quieres tu aplicación en nuestra tienda? Genial por nosotros.

El mayor problema para mí fue que Apple me verificara como un negocio legal.

Primero, fui al sitio y me registré en el Programa de Desarrolladores de Apple. Completé mi nombre y la información de la empresa. (Aparte: supongo que Apple no le permitirá enviar una aplicación a menos que tenga una empresa legal registrada).

Hago clic en siguiente.

"La información que ingresó no coincide con su perfil de D&B".

¿Mi qué?

Un poco de búsqueda en Google mostró que el "perfil de D&B" es Dun y Bradstreet. Nunca había oído hablar de este grupo antes, pero descubrí que Apple los está usando para verificar los detalles legales de su corporación.

Y aparentemente, mi perfil de D&B no coincidía con lo que puse en mi registro de Apple Dev.

Busco en Google un poco más y encuentro que los foros de desarrollo de Apple están llenos de publicaciones similares. Nadie tuvo una buena respuesta.

Me comunico con el soporte técnico de Apple Dev. 24 horas después, me contactan por correo electrónico diciendo que debería comunicarme con D&B.

Decido ponerme en contacto con ellos ... pero Apple dice que tardarán unos días en responder.

En este punto, estoy pensando en abandonar toda la idea.

Mientras espero que el soporte de D&B se comunique conmigo, decido ir al sitio de D&B, verificar mi identidad y actualizar la información de mi empresa que, supongo, habían tomado de los registros gubernamentales.

¿Mencioné lo horrible que es esto? Solo quiero listar mi aplicación web existente en la tienda. Por favor ayuda.

Voy a D&B para actualizar mi perfil comercial. ¡Sorpresa! Tienen un error de JavaScript en su lógica de validación que me impide actualizar mi perfil.

Afortunadamente, soy un desarrollador competente. Hago clic en poner un punto de interrupción en su JavaScript, hago clic en enviar, cambio el indicador isValid a verdadero y ¡listo! Actualicé mi perfil de D&B.

De vuelta a Apple Dev -> intentemos esto de nuevo. Registrar mi empresa ...

"Error: la información que ingresó no coincide con su perfil de D&B".

AREYOUFREAKINKIDDINGME.

Habla con Apple de nuevo. "Oh, pueden pasar de 24 a 48 horas para que la información actualizada de D&B llegue a nuestro sistema".

Ya sabes, porque la información digital puede tardar 2 días en viajar del servidor A al servidor B. Suspiro.

Dos días después, intento registrarme ... ¡finalmente funciona! Ahora estoy en el programa de desarrolladores de Apple y puedo enviar aplicaciones para su revisión.

Ganador : Google y Microsoft; ambos tardaron 5 minutos en registrarse.

Perdedor : El registro de desarrollador de Apple fue lento y doloroso. Llevó aproximadamente una semana registrarse en su programa de desarrollo. Me requirió contactar al soporte de 2 malditas compañías diferentes. Y me obligó a depurar en tiempo de ejecución el código JavaScript en un sitio web de terceros solo para poder superar su validación defectuosa del lado del cliente, para que mi información fluya a Apple, para que pueda enviar mi aplicación a la tienda. Wow solo wow.

Si hay alguna gracia salvadora aquí para Apple, es que tienen un programa sin fines de lucro 501c3, donde las organizaciones sin fines de lucro pueden tener una exención de su tarifa anual de $ 99. Aproveché eso. Y quizás este paso adicional complicó las cosas.

Empaquetado, creación y envío de aplicaciones

Una vez que tenga una aplicación web, debe ejecutar algo de magia en ella para convertirla en algo que pueda enviar para la revisión de la App Store.

• Apple : Primero, compre una Mac; no puede crear una aplicación para iOS sin una Mac. Instale XCode y estas herramientas y marcos de construcción, adquiera un certificado de nuestro programa de desarrollo, cree un perfil en un sitio web separado llamado iTunes Connect, conéctelo con el certificado que generó en el centro de desarrollo de Apple, luego envíelo usando XCode. Tan fácil como uno, dos, tres ... treinta y siete ...
• Google : descargue Android Studio, genere un certificado de seguridad a través de él, luego empaquételo usando Studio. Sube el paquete al sitio web de desarrolladores de Android.
• Microsoft : genere un paquete .appx utilizando estas herramientas de línea de comandos gratuitas o Visual Studio. Sube al sitio web del Centro de desarrollo de Microsoft.

La buena noticia es que existe una herramienta gratuita para hacer la magia de convertir su aplicación web en paquetes de aplicaciones . Esa increíble herramienta gratuita se llama PWABuilder. Analiza una URL, le dice lo que necesita hacer (por ejemplo, tal vez agregar algunos iconos de la pantalla de inicio a su manifiesto web de PWA). Y en un asistente de 3 pasos, te permite descargar paquetes que contienen toda la magia:

• Para Windows, en realidad genera el paquete .appx. Literalmente, puede tomar eso y enviarlo al sitio del Centro de desarrollo de Windows.
• Para Google, genera una aplicación Java contenedora que contiene su aplicación web PWA. Desde Android Studio, crea este proyecto, que genera el paquete de Android que se puede cargar en el sitio del Centro de desarrollo de Android.
• Para Apple, genera un proyecto XCode que se puede construir con XCode. Lo que requiere una Mac.

Una vez más, Apple fue el más doloroso de todos. No tengo una Mac. Pero no puede crear el proyecto XCode para su PWA sin una Mac.

No quiero pagar varios miles de dólares para publicar mi aplicación gratuita en la tienda de aplicaciones de Apple. No quiero pagar por el privilegio de enriquecer la plataforma iOS de Apple.

Afortunadamente, MacInCloud cuesta alrededor de $ 25 al mes y te dan una máquina Mac con XCode ya instalado. Puede acceder a él de forma remota mediante el Escritorio remoto de Windows, o incluso a través de una interfaz web.

No fue suficiente simplemente construir el proyecto XCode y enviarlo. Tuve que generar un certificado de seguridad en el sitio de desarrolladores de Apple, luego crear un nuevo perfil de aplicación en un sitio separado, iTunes Connect, donde realmente envías el paquete.

Y eso no fue todo: dado que Apple es hostil a las aplicaciones web, tuve que instalar algunos marcos especiales y agregar complementos de Cordova que permiten que mi aplicación haga cosas como reproducir audio en segundo plano, agregar la canción actual a la pantalla de bloqueo, controle el volumen de la canción y el estado de reproducción desde la pantalla de bloqueo, y más.

Esto tomó al menos una semana de arreglos para que mi aplicación funcionara antes de poder enviarla a la tienda de aplicaciones.

Ganador : Microsoft. Imagínese esto: puede ir a un sitio web que genera un paquete de aplicación para su aplicación web. Y si eso no es lo tuyo, puedes descargar herramientas de línea de comandos que harán el trabajo. Persona GUI? El Visual Studio gratuito funcionará.

Subcampeón : Google. Requiere Android Studio, pero es gratis, funciona para todos y es bastante simple.

Perdedor : Apple. No debería tener que comprar una computadora propietaria, una Mac de varios miles de dólares, para crear mi aplicación. El centro de desarrollo de Apple -> iTunes Connect parece el intento de un administrador fuera de contacto de llevar iTunes a los desarrolladores. Simplemente debería ser parte del sitio del Centro de desarrolladores de Apple.

Prueba de aplicaciones

Una vez que finalmente hizo todos los encantamientos mágicos para convertir su aplicación web existente en un paquete de aplicación móvil, probablemente desee enviarlo a los probadores antes de lanzar su aplicación a las masas sin lavar.

• Apple : para las pruebas, los evaluadores deben instalar Test Flight en su dispositivo iOS. Luego, agrega el correo electrónico del probador en iTunes Connect. El evaluador recibirá una notificación y podrá probar su aplicación antes de que esté disponible en la tienda de aplicaciones.
• Google : en el Centro de desarrollo de Android, agrega las direcciones de correo electrónico de los evaluadores. Una vez agregadas, pueden ver su versión alfa / beta en la App Store.
• Microsoft : en realidad no usé esto, así que no lo comentaré.

Ganador : Lanzar. La aplicación Test Flight de Apple es simple y optimizada. Puede controlar la caducidad alfa / beta simplemente en el lado del administrador. Google no se quedó atrás; fue bastante indoloro, ni siquiera requirió una aplicación separada.

Revisión de la aplicación

Una vez que su aplicación esté lista para el horario de máxima audiencia, envíe su aplicación para revisión. La revisión se realiza mediante una lista de verificación programática (por ejemplo, ¿tiene un icono de inicio?) Y personas reales ("su aplicación es un clon de X, la rechazamos").

• Apple : antes del envío, XCode le advierte sobre posibles problemas durante la compilación. La revisión humana de la aplicación tarda entre 24 y 48 horas.
• Google : ¿Hay alguien en casa? Android Studio no me informó sobre problemas potenciales y mi aplicación fue aprobada minutos después de su envío. No creo que un ser humano real haya visto mi aplicación.
• Microsoft : Tras el envío, una revisión programática rápida detectó un problema relacionado con formatos de icono incorrectos. Después de aprobar, un humano revisó mi aplicación en 4 días.

Ganador : Apple.

Claro, como desarrollador, me gusta el hecho de que mi aplicación estuvo instantáneamente en la tienda Google Play. Pero eso es solo porque, sospecho, en realidad no fue revisado por un humano.

Apple tuvo el tiempo de respuesta más rápido para la revisión humana real. Las actualizaciones también pasaron la revisión dentro de las 24 horas.

Microsoft fue impredecible aquí. La revisión inicial tomó 3 o 4 días. Una actualización posterior tardó 24 horas. Luego, otra actualización, donde agregué la plataforma XBox, tomó otros 3-4 días.

Conclusión

Es doloroso, y cuesta dinero, tomar una PWA existente y hacerla funcional en plataformas móviles y listada en la App Store.

Ganador : Google. Hicieron que fuera más fácil ingresar a la tienda de aplicaciones. Esto hizo que fuera más fácil de integrar en la plataforma nativa, al intentar estandarizar las API web que las plataformas de SO pueden captar (hola, encantador navigator.mediaSession)

Subcampeón : Microsoft. Hicieron que fuera más fácil rociar su aplicación web con magia, convirtiéndola en un paquete que puede enviarse a su tienda. (¡Se puede hacer de forma gratuita utilizando el sitio de PWABuilder!) Integrarse con su plataforma significa usar el espacio de nombres window.Windows. * JavaScript autoinyectado. No está mal.

Perdedor : Apple. No me exija que compre una Mac para crear una aplicación iOS. No me obligues a usar envoltorios nativos para integrarme con tu plataforma. No me exija que joda con certificados de seguridad; Deje que sus herramientas de compilación las hagan por mí y las almacene automáticamente en mi cuenta del Centro de desarrollo. No me hagas usar 2 sitios diferentes: Apple Dev Center e iTunes Connect.

Reflexiones finales: la web siempre gana. Derrotó a Flash. Mató a Silverlight. Destruyó aplicaciones nativas en el escritorio. El navegador es la plataforma de cliente enriquecido. El sistema operativo es simplemente un lanzador de navegador y un comunicador de hardware.

La web también ganará en los dispositivos móviles. Los desarrolladores no quieren crear 3 aplicaciones independientes para las principales plataformas. Las empresas no quieren pagar por el desarrollo de 3 aplicaciones.

La respuesta a todo esto es la web. Podemos crear aplicaciones web enriquecidas (aplicaciones web progresivas) y empaquetarlas para todas las tiendas de aplicaciones.

Apple, en particular, tiene un incentivo perverso para detener el progreso de la web. Es el mismo incentivo que tuvo Microsoft a finales de los 90 y principios de los 2000: quiere ser la plataforma para buenas aplicaciones. Las PWA socavan eso; corren por todas partes.

Mi sabiduría de software es la siguiente: las PWA eventualmente ganarán y superarán a las aplicaciones móviles nativas. En 5 a 10 años, las aplicaciones nativas de iOS serán tan comunes como las aplicaciones Win32 C. Apple irá pateando y gritando, manteniendo iOS Safari detrás de la curva, bloqueando el progreso de PWA donde pueda. (Incluso su reciente "soporte" para PWA en iOS Safari 11.1 en realidad paraliza las PWA).

Mi sugerencia para las plataformas de aplicaciones móviles es aceptar lo inevitable y agregar automáticamente PWA de calidad a su tienda de aplicaciones o permitir que los desarrolladores envíen fácilmente (por ejemplo, gratis y con 3 clics o menos) una PWA a su tienda.

Lectores, espero que esto haya sido útil para echar un vistazo a las PWA en las tiendas de aplicaciones en 2018.

¿Ha enviado una PWA a una tienda de aplicaciones? Me encantaría escuchar tu experiencia en la sección de comentarios. Y puedes leer más de las publicaciones de mi blog en mi blog.