Clique e receba as novidades quentinhas no Telegram

Judah Gabriel Himango é um desenvolvedor e autor do aplicativo Chavah Messianic Radio.O Chavah é um site sem fins lucrativos projetado para beneficiar os discípulos da comunidade Judaica e amplificar a música messiânica. É grátis, não aceita publicidade e não faz dinheiro com esse site. 

Ele resolveu compartilhar a saga para transformar um aplicativo da Web em um PWA e enviá-lo para as três lojas de aplicativos. Exigiu cerca de um mês de trabalho, algumas centenas de dólares e muita burocracia. Acompanhe:

Eu publiquei recentemente o Chavah Messianic Radio , um player de música, tipo o Pandora, como um Progressive Web App e o enviei para as 3 lojas de aplicativos (Google Play, App Store do iOS e Microsoft Store).

O processo foi doloroso e esclarecedor. Aqui está o que eu aprendi.

Por quê?

Primeiro, você pode se perguntar: “Por que colocar seu aplicativo nas lojas de aplicativos? Apenas viva na web!

A resposta, em poucas palavras, é porque lá, é onde os usuários estão. Treinamos uma geração de usuários para encontrar aplicativos em lojas de aplicativos proprietários, não na Web gratuita e aberta.

Para o meu aplicativo da web, havia dois grandes motivos para entrar na loja de aplicativos:

1.      Demanda do usuário

2.      Restrições de aplicativos da Web por plataformas móveis hostis da Apple.

Demanda do usuário: Meus usuários me perguntam há anos: “Existe um aplicativo para o Chavah? Eu não encontro isso na loja. ”

Eles perguntam isso porque treinamos os usuários para procurar aplicativos em lojas de aplicativos proprietários.

Minha resposta aos meus usuários foi essa até agora:

“Aww, você não precisa de um aplicativo – basta acessar o site em seu telefone! Funciona!”

Mas, eu estava meio que mentindo.

Aplicativos web reais só funcionam meio que em dispositivos móveis. O que me leva à segunda razão: restrições de aplicativos da web por plataformas móveis hostis da Apple.

Fornecedores de plataformas móveis, como a Apple, são totalmente legais com aplicativos que usam seu telefone ao máximo. Deixam você acessar à sua localização, reproduzir áudio em segundo plano, obter as suas coordenadas GPS, ler todos os seus contatos, reproduzir vídeos ou áudio sem interação com aplicações, leir o seu email, interceptar a sua digitação, reproduzir mais de uma coisa de cada vez, utilizar o seu microfone e câmera, acessar suas fotos e muito mais.

A Apple é totalmente legal com isso. Não existe nada de errado.

Mas, somente se você pagar US $ 99 por ano pelo privilégio.

Se você quiser fazer qualquer uma dessas coisas em um aplicativo da web antigo regular, bem,  a Apple irá, não apenas negar essas coisas, ela também impede que você peça permissão.

Para o meu aplicativo de player de música tipo o Pandora, isso foi horrível de várias maneiras.

De pequenas coisas como “O iOS Safari não permite que você reproduza áudio sem primeiro interagir com a página” para coisas importantes como: “O iOS Safari não permite que você toque a próxima música se o seu aplicativo estiver em segundo plano ou se a sua tela estiver desligada. ”

Ah, mais anomalias visuais estranhas, como digitar uma caixa de texto e ver seu texto aparecer em outro lugar na tela.

Então, para tornar meu aplicativo de música HTML5 realmente funcional e funcionando nos dispositivos móveis das pessoas, foi necessário transformar meu PWA em um aplicativo na loja de aplicativos.

Barreiras à entrada

No mundo ideal, publicar seu aplicativo da Web nas lojas de aplicativos ficaria assim:


Seu site da web / Cloud Host

Você criou um PWA. Agora vai publicar nas lojas de aplicativos?

?

iOS Apple Store
?
Google Play
?
Microsoft Store


(Ou alternadamente, como a Microsoft está experimentando, o seu PWA aparecerá automaticamente na loja de aplicativos, já que o Bing está fazendo um rastreamento em toda a web à procura de PWAs.

Mas, infelizmente, nós não vivemos neste mundo ideal. Em vez disso, temos que lidar com todos os tipos de soluções nativas e proprietárias para publicar nossos aplicativos da web nas lojas.

Cada uma das lojas de aplicativos tem uma barreira à entrada: Quais são as dificuldade em disponibilizar um aplicativo da web existente  para essas lojas de aplicativos?

Eu listo algumas destas barreiras abaixo.

Custo


·         Apple : US $ 99 / ano para ter seu aplicativo listado na Aple Store do iOS.

·         Google: taxa única de US $ 25 para listar seu aplicativo na Google Play Store.

·         Microsoft: grátis!


Não me faça pagar para disponibilizar meu aplicativo para seus usuários. Meu aplicativo enriquece sua plataforma. Sem bons aplicativos, sua plataforma será abandonada.

A Apple costumava entender isso. Quando introduziu o iPhone pela primeira vez, Steve Jobs estava convencido de que o HTML5 era o futuro e que os aplicativos seriam simplesmente aplicativos da web. Não houve SDK do iPhone nativo para terceiros. Infelizmente, a Apple abandonou essa visão.

O Google solicitou uma taxa única de US $ 25,00. Provavelmente, para evitar spammers e diminuir a entrada de aplicativos realmente indesejados na loja.

A Microsoft parece determinada a aumentar o número total de aplicativos em sua loja de aplicativos.

Vencedor: Microsoft. É difícil vencer o grátis.

Adicionando capacidades nativas

Em um mundo ideal, eu não teria que escrever uma única linha extra de código para o meu aplicativo da Web integrar-se ao sistema operacional. Ou, como Steve Jobs disse em 2007 ,

“O mecanismo completo do Safari está dentro do iPhone. E assim, você pode escrever incríveis aplicativos Web 2.0 e Ajax que parecem exatamente e se comportam exatamente como aplicativos no iPhone. E esses aplicativos podem se integrar perfeitamente aos serviços do iPhone. Eles podem fazer uma ligação, enviar um e-mail, procurar um local no Google Maps. ” Steve Jobs, 2007

Para mim, em um mudo ideal, isso significa que meu aplicativo da web reproduz áudio em segundo plano usando o áudio HTML5 padrão; que funciona muito bem em todos os sistemas operacionais.

Meu aplicativo da web declara o que o áudio está tocando, e os sistemas operacionais captam isso, mostram as informações da música que estão sendo reproduzidas no momento na tela de bloqueio.

Meu aplicativo controla o áudio usando a API de áudio HTML5 padrão; o sistema operacional pega isso e fornece controles de play / pause / next / volume / trackbar na tela de bloqueio.

Mas, infelizmente não vivemos neste mundo ideal. Todas as coisas listadas acima não funcionam de fato nas três plataformas.

Meu aplicativo da web precisa reproduzir áudio em segundo plano. E carregue URLs do meu CDN. Soa razoável, certo? E bônus, que tal mostrar atualmente a informação da música na tela de bloqueio? E controlar o áudio (reproduzir / pausar / próximo, etc.) da tela de bloqueio? Quão difícil é isso?

Três abordagens muito diferentes tomadas aqui:


·         Apple : Não damos aos aplicativos da Web uma maneira de declarar esses recursos; você precisará escrever um wrapper nativo (por exemplo, com Cordova) para interagir com o sistema operacional.

·         Google : Web! Vamos criar um novo padrão web que mostre áudio e controles da tela de bloqueio. Áudio de fundo? Claro vá em frente!

·         Microsoft: Injetaremos nossa API proprietária, window.Windows. *, Em seu namespace global JavaScript e você poderá usá-la para fazer as coisas que deseja fazer.


Entrando em mais detalhes aqui para cada loja:

Para a loja de aplicativos do iOS, caso o seu aplicativo da web precisa reproduzir áudio de fundo? Use um plugin Cordova. Precisa mostrar a música que está sendo reproduzida no momento na tela de bloqueio? Use um plugin Cordova . Precisa controlar a música atualmente sendo reproduzida na tela de bloqueio? Use um plugin Cordova. Você entendeu a ideia. Basicamente, Cordova engana a Apple a pensar que você é um aplicativo nativo. E como você não é um aplicativo da web nojento, a Apple permite que você faça todas as coisas que os aplicativos nativos podem fazer. Você só precisa de truques nativos, ou seja – plugins Cordova – para deixar você fazer isso.

Para o Google Play, é bom poder escrever código JS para que isso funcione, nenhum plug-in Cordova é necessário aqui. É claro que o JS não funcionará em lugar algum, exceto o Chrome no Android… mas hey, talvez um dia (em um mundo ideal!) Todos os navegadores móveis implementarão essas APIs da web… e o mundo viverá como um só. 

Para a Microsoft Store, se você quiser reproduzir áudio de fundo? Desculpa! Ou seja, a menos que você declare suas intenções em nosso arquivo de manifesto de recursos proprietários (fácil) E você implementar essa interface de mídia proprietária usando window.Windows.SystemMediaTransportControls (não tão fácil). Caso contrário, você será silenciado quando seu aplicativo for para o segundo plano.

Vencedor : Google. Eu quero ser capaz de escrever apenas um JavaScript e deixar o SO pegar dicas do meu aplicativo.

Vice-campeão : Microsoft. Ainda posso escrever JavaScript simples, mas, preciso falar com uma API proprietária do Windows JS que foi injetada em meu processo quando executada no Windows. Não é tão mal.

Perdedor : Apple. Eles não se importam com aplicativos da web. Na verdade, é pior que isso. Parece que eles são realmente hostis aos aplicativos da web. O iOS Safari é o novo Internet Explorer 6. Ele ficou para trás em quase todos os padrões da Web, especialmente em torno dos Progressive Web Apps. Provavelmente, isso é por motivos de negócios: os aplicativos da web interrompem sua compra de US $ 99 / ano + 33% para cada app. Então, para fazer meu aplicativo da Web funcionar em sua plataforma, tenho que basicamente fingir que sou um aplicativo nativo.

Registro na App Store

Enviar seu PWA para a loja de aplicativos requer registro, verificação de negócios e mais burocracia. Veja como as 3 lojas de aplicativos se saíram:


·         Apple : Você precisa provar que é uma empresa legal e registrada. Essa verificação não é feita por nós, mas por terceiros , que podem ou não conhecer sua empresa.

·         Google : Você quer seu aplicativo na nossa loja? Legal, nós cuidamos disso.

·         Microsoft : Você quer seu aplicativo na nossa loja? Legal, nós cuidamos disso.


O maior sofrimento para mim foi ser verificado como um negócio legal pela Apple.

Primeiro, fui ao site e me registrei no Programa de Desenvolvedores da Apple. Eu preenchi meu nome e informações da empresa. (Além disso: acho que a Apple não permitirá que você envie um aplicativo, a menos que você tenha uma empresa legal registrada?)

Clico em avançar.

“As informações que você digitou não correspondem ao seu perfil D & B.”

Meu o quê?

Um pouco de pesquisa no Google mostrou que “perfil da D & B” é Dun e Bradstreet. Eu nunca ouvi falar desse grupo antes, mas descubro que a Apple está usando-os para verificar os detalhes legais da corporação.

E, aparentemente, meu perfil da D & B não corresponde ao que eu coloquei no meu registro da Apple Dev.

Eu pesquisei um pouco mais e encontrei fóruns de desenvolvedores Apple repleto de posts semelhantes. Ninguém teve uma boa resposta.

Entrei em contato com o suporte da Apple Dev. 24 horas depois, sou contatado por e-mail dizendo que devo entrar em contato com a D & B.

Eu decido contatá-los … mas, a Apple diz que levará alguns dias para eles responderem.

Neste ponto, estou pensando em abandonar toda a ideia.

Enquanto esperava que o suporte da D & B me dessem um retorno, decidi ir ao site da D & B, verificar minha identidade e atualizar as informações da minha empresa, que, presumo, foram extraídas de registros do governo.

Eu mencionei o quão simples isso é? Eu só quero listar meu aplicativo da web existente na loja. Por favor, me ajuda.

Eu vou para a D & B para atualizar o perfil da minha empresa. Surpresa! Eles têm um bug de JavaScript em sua lógica de validação que me impede de atualizar meu perfil.

Felizmente, sou um desenvolvedor proficiente. Eu clico colocar um ponto de interrupção em seu JavaScript, clique em enviar, altero o sinalizador isValid para true e voila! Eu atualizei meu perfil D & B.

De volta ao Apple Dev -> vamos tentar novamente. Cadastre minha empresa e segue todo o processo…

“Erro: as informações que você digitou não correspondem ao seu perfil D & B.”

Vocês só podem estar brincando comigo!

Falei com a Apple novamente. “Oh, isso pode levar de 24 a 48 horas para que as informações atualizadas da D & B entrem em nosso sistema”.

Alguém sabe responder porque as informações digitais podem levar dois dias para viajar do servidor A para o servidor B?

Dois dias depois, tento me registrar… finalmente funcionou! Agora estou no programa Apple Developer e posso enviar aplicativos para a revisão.

Vencedor : Google e Microsoft; ambos demoraram 5 minutos para me registrar.

Perdedor : O registro do desenvolvedor da Apple foi lento e doloroso. Demorou cerca de uma semana para ser registrado no programa de desenvolvimento. Isso me obrigou a entrar em contato com o suporte de duas empresas diferentes. E exigiu que eu depurasse o código JavaScript em tempo real em um site de terceiros apenas para que eu pudesse passar pela validação do lado do cliente, para que minhas informações fluam para a Apple, para que eu possa enviar meu aplicativo para a loja. Isso é  doloroso.

Se há alguma graça salvadora aqui para a Apple, é que eles têm um programa sem fins lucrativos 501c3, onde organizações sem fins lucrativos podem ter sua taxa anual de US $ 99 dispensada. Eu aproveitei isso. E talvez esse passo extra tenha complicado as coisas.

App Embalagem, Construção, Envio

Depois de ter um aplicativo da web, você precisa executar alguma mágica para transformá-lo em algo que possa enviar para a revisão nas lojas de Apps.


·         Apple : Primeiro, compre um Mac; você não pode criar um aplicativo para iOS sem um Mac. Instale o XCode e essas ferramentas e estruturas de compilação, adquira um certificado do nosso programa de desenvolvedor, crie um perfil em um site separado chamado iTunes Connect, conecte-o ao certificado gerado no Apple Dev Center e envie usando o XCode. Fácil como um, dois, três … trinta e sete passos …

·         Google : faça o download do Android Studio, gere um certificado de segurança e, em seguida, empacote-o usando o Studio. Faça o upload do pacote para o website do desenvolvedor Android.

·         Microsoft : Gere um pacote .appx usando essas ferramentas de linha de comando gratuitas ou o Visual Studio. Carregue para o site do Microsoft Dev Center.


A boa notícia é que há uma ferramenta gratuita para fazer a mágica de transformar seu aplicativo da Web em pacotes de aplicativos . Essa incrível ferramenta gratuita é chamada: PWABuilder

Ele analisa uma URL, informa o que você precisa fazer (por exemplo, talvez inclua alguns ícones da tela inicial no manifesto da web do PWA). E em um assistente de 3 etapas, ele permite que você baixe pacotes que contenham toda a magia:

  • Para o Windows, ele realmente gera o pacote .appx. Você pode literalmente pegar isso e enviá-lo no site do Centro de Desenvolvimento do Windows.
  • Para o Google, ele gera um aplicativo Java de wrapper que contém seu aplicativo da Web do PWA. No Android Studio, você cria este projeto, que gera o pacote Android que pode ser carregado no site do Android Dev Center.
  • Para a Apple, ele gera um projeto XCode que pode ser construído com o XCode. Que requer um Mac.
  • Mais uma vez, a Apple foi a mais dolorosa de todas. Eu não tenho um Mac. Mas você não pode construir o projeto XCode para o seu PWA sem um Mac.

Eu não quero pagar vários milhares de dólares para publicar meu aplicativo gratuito na loja de aplicativos da Apple. Eu não quero pagar pelo privilégio de enriquecer a plataforma iOS da Apple.

Felizmente, o MacInCloud custa cerca de US $ 25/mês, e eles fornecem uma máquina Mac com o XCode já instalado. Você pode acessá-lo remotamente usando a Área de Trabalho Remota do Windows ou até mesmo por meio de uma interface da Web.

Não foi suficiente apenas criar o projeto XCode e enviar. Eu tive que gerar um certificado de segurança no site do desenvolvedor da Apple, em seguida, criar um novo perfil de aplicativo em um site separado, o iTunes Connect, onde você realmente enviar o pacote.

E isso não foi tudo: já que a Apple é hostil aos aplicativos da web, tive que instalar alguns frameworks especiais e adicionar plugins Cordova que permitem que meu aplicativo faça coisas como reproduzir áudio em segundo plano, adicionar a música atual à tela de bloqueio, controle o volume da música e o status da reprodução na tela de bloqueio e muito mais.

Isso levou pelo menos uma semana para colocar meu aplicativo em um estado operacional antes que eu pudesse enviá-lo para a loja de aplicativos.

Vencedor : Microsoft. Imagine isso: você pode acessar um site (pwabuilder.com) que gera um pacote de aplicativos para seu aplicativo da web. E não é só isso, você pode baixar ferramentas de linha de comando que farão o trabalho para você. GUI pessoal? O Visual Studio gratuito funcionará.

Vice-campeão : Google. Requer o Android Studio, mas é grátis, roda todo mundo e é bastante simples.

Perdedor : Apple. Eu não deveria ter que comprar um computador proprietário – um Mac de vários milhares de dólares – para construir meu aplicativo. O Apple Dev Center -> o emaranhado do iTunes Connect parece uma tentativa do gerente fora de toque de empurrar o iTunes para os desenvolvedores. Ele deve simplesmente fazer parte do site do Apple Developer Center.

Teste de aplicativos

Depois que você finalmente fizer todos os encantamentos mágicos para transformar seu aplicativo da web existente em um pacote de aplicativo para dispositivos móveis, provavelmente desejará enviá-lo para os testadores antes de liberar seu aplicativo para as massas.


·         Apple : Para testar, você faz com que seus testadores instalem o Test Flight em seu dispositivo iOS. Então você adiciona o e-mail do testador no iTunes Connect. O testador receberá uma notificação e poderá testar seu aplicativo antes que ele esteja disponível na loja de aplicativos.

·         Google : no Android Dev Center, você adiciona endereços de e-mail de testadores. Uma vez adicionados, eles podem ver sua versão alfa / beta na App Store.

·         Microsoft : Eu realmente não usei isso, então não vou comentar sobre isso.


Vencedor : Apple. O aplicativo Test Flight da Apple é fácil e simplificado. Você pode controlar a expiração alfa / beta simplesmente no lado do administrador. O Google não ficou muito atrás; foi bastante indolor, nem mesmo exigindo um aplicativo separado.

App Review

Quando seu aplicativo estiver pronto para brilhar, envie seu aplicativo para análise. A revisão é feita usando uma lista de verificação programática (por exemplo, você tem um ícone de lançamento?) E por pessoas reais (“seu aplicativo é um clone de outro aplicativo X, então, nós o rejeitamos”)


·         Apple : antes do envio, o XCode avisa sobre possíveis problemas durante a compilação. A revisão humana do aplicativo leva de 24 a 48 horas.

·         Google : Tem alguém em casa? O Android Studio não me informou sobre problemas em potencial e meu aplicativo foi aprovado em poucos minutos após o envio. Eu não acho que um ser humano realmente olhou para o meu aplicativo.

·         Microsoft : Após a apresentação, uma rápida revisão programática detectou um problema relacionado a formatos incorretos de ícones. Depois de passar por essa etapa, um ser humano analisou meu aplicativo em quatro dias.


Vencedor : Apple.

Claro, como desenvolvedor, gosto do fato de meu aplicativo estar instantaneamente na Google Play Store. Mas, isso é apenas porque, suspeito, não foi realmente revisado por um ser humano.

A Apple teve o tempo de resposta mais rápido para uma revisão humana real. As atualizações também foram revisadas em 24 horas.

Microsoft foi certa ou errou aqui. A revisão inicial levou 3 ou 4 dias. Uma atualização posterior demorou 24 horas. Em seguida, outra atualização, onde eu adicionei a plataforma XBox, levou outros 3-4 dias.

Conclusão

É doloroso e custa dinheiro ter um PWA existente e colocá-lo em funcionamento em plataformas móveis e listado nnas lojas de Apps.

Vencedor : Google. Eles tornaram mais fácil entrar na loja de aplicativos. Isso facilitou a integração na plataforma nativa, tentando padronizar as APIs da web que as plataformas do sistema operacional podem atender (hello, lovely navigator.mediaSession)

Segundo lugar : Microsoft. Eles facilitaram a aplicação mágica do seu aplicativo da Web, transformando-o em um pacote que pode ser enviado para a loja deles. (Pode ser feito gratuitamente usando o site PWABuilder !) A integração com a plataforma significa usar a auto-inject windows.Windows . * Espaço para nome do JavaScript. Não é ruim.

Perdedor : Apple. Não exija que eu compre um Mac para criar um aplicativo para o iOS. Não me force a usar wrappers nativos para se integrar à sua plataforma. Não me obrigue a brincar com certificados de segurança; Deixe suas ferramentas de criação criá-las para mim e armazená-las automaticamente em minha conta do Centro de Desenvolvimento. Não me faça usar dois sites diferentes: o Apple Dev Center e o iTunes Connect.

Considerações finais: A web sempre vence. Ela derrotou o Flash. Ela matou o Silverlight. Ele destruiu aplicativos nativos no desktop. O navegador é a plataforma do rich client. O sistema operacional é apenas um lançador de navegador e um comunicador de hardware.

A web também ganhará no celular. Os desenvolvedores não querem criar três aplicativos separados para as principais plataformas. As empresas não querem pagar pelo desenvolvimento de 3 aplicativos.

A resposta para tudo isso é a web. Podemos criar aplicativos da Web avançados – aplicativos da Web progressivos – e empacotá-los para todas as lojas de aplicativos.

A Apple, em particular, tem um incentivo perverso para impedir o progresso da web. É o mesmo incentivo que a Microsoft teve no final dos anos 90 e início dos anos 2000: ela quer ser a plataforma para bons aplicativos. PWAs prejudicam isso; eles estão por toda parte.

Minha sabedoria de software é esta: os PWAs acabarão por ganhar e ultrapassar os aplicativos móveis nativos. Em 5 a 10 anos, os aplicativos iOS nativos serão tão comuns quanto os aplicativos Win32. A Apple vai chutar e gritar, mantendo o iOS Safari atrás da curva, bloqueando o progresso do PWA onde puder. (Até mesmo o recente “suporte” para os PWAs no iOS Safari 11.1 na verdade prejudicam os PWAs .)

Minha sugestão para plataformas de aplicativos móveis é adotar o inevitável e adicionar automaticamente PWAs de qualidade à sua loja de aplicativos ou permitir que os desenvolvedores facilmente (por exemplo, com três cliques ou menos, como o pwabuilder.com) enviem um PWA para sua loja.

Para baixar o app Chavah Messianic Radio para iOS, clique aqui.

Para baixo o app Chavah Messianic Radio para Android, clique aqui.

Para acessar via web, clique aqui.

Para baixar na Microsoft Store, clique abaixo:

[appbox windowsstore 9nhkjb6lpptv]

Fonte: Debugger.Break