Progressive Web App: o que é e como funciona
Isso tudo parece ótimo … mas o que são os Progressive Web Apps, exatamente?
“O Progressive Web App usa recursos modernos da Web para oferecer uma experiência de usuário semelhante a um aplicativo.” – Aplicativos da Web progressivos
Aplicativos nativos permitem coisas como enviar notificações push, funcionamento off-line, parecer um aplicativo (como a Apple e o Google imaginaram), carregar na tela inicial e assim por diante. Os Web Apps móveis acessados em um navegador para dispositivos móveis, por comparação, historicamente não fizeram isso. Os Progressive Web Apps corrigem isso com novas APIs da Web, novos conceitos de design e novas palavras-chave.
Para ser claro, estou falando de aplicativos da web para dispositivos móveis para navegadores. Aplicativos híbridos, como o Ionic with Cordova, são executados sem restrições no ambiente nativo do aplicativo, com todos os recursos que esperamos de qualquer aplicativo nativo. Mas retire o conteúdo da Web de um aplicativo híbrido e carregue-o em um navegador móvel, e o aplicativo fica restrito pelos recursos do navegador (por vários motivos de segurança e padronização da API).
Os Progressive Web Apps trazem recursos que esperamos de aplicativos nativos para a experiência do navegador móvel de uma forma que usa tecnologias baseadas em padrões e é executado em um contêiner seguro acessível a qualquer pessoa na web.
No geral, os Progressive Web Apps descrevem uma coleção de tecnologias, conceitos de design e APIs da Web que funcionam em conjunto para fornecer uma experiência de aplicativo na Web para dispositivos móveis. Vamos analisar algumas das principais doutrinas dos Progressive Web Apps.
Service Workers
Os Service Workers são uma tecnologia incrivelmente poderosa e igualmente confusa por trás de um Progressive Web App. Eles potencializam a funcionalidade off-line, notificações push, atualização de conteúdo em segundo plano, armazenamento em cache de conteúdo e muito mais.
Em um nível alto, um Service Worker é um script de trabalho que funciona nos bastidores, independente de seu aplicativo, e é executado em resposta a eventos como solicitações de rede, notificações push, alterações de conectividade e muito mais.
Eu ouvi os Trabalhadores do Serviço descritos como um “proxy”, que eu acho que os descreve bem. Podemos ouvir eventos como fetch que acontecem sempre que uma solicitação de rede ocorre. Podemos lidar com esse evento com controle total, verificando dados em cache e retornando imediatamente ou permitindo que a solicitação continue no servidor remoto. Nosso script funciona como um proxy ou middleware para a solicitação.
O enorme poder e flexibilidade dos Service Workers os torna muito complicados e, geralmente, os desenvolvedores desejarão usar “receitas” pré-fabricadas para casos de uso comuns de trabalhadores de serviços, como o modo offline. A Mozilla tem uma ótima referência para receitas de trabalhadores de serviços que demonstram as inúmeras aplicações com código reutilizável. Por exemplo, veja como fazer um modo off-line simples que intercepte eventos de busca e retorne dados de um cache se a solicitação de rede falhar. O Google também tem uma enorme quantidade de Service Worker Samples.
takeaway principal: Trabalhadores de Serviços são apenas um arquivo JavaScript como qualquer outro, rodando em segundo plano e desencadeou através de eventos, e é até você para escrever código para lidar com caching, notificações push, buscando conteúdo, etc. Uma vez que os desenvolvedores acabam usando o mesmo “Receitas” para realizar tarefas comuns (como suporte offline), provavelmente usaremos as receitas existentes para facilitar nossas vidas. Os Service Workers estão disponíveis no Android com o Chrome 50 e não são atualmente suportados por outros principais navegadores de dispositivos móveis.
App Shell
O modelo App Shell é um conceito de design simples em que o carregamento inicial de um aplicativo da web móvel fornece um shell básico de uma interface de usuário do aplicativo, e o conteúdo do aplicativo é carregado depois. O App Shell não é uma API da Web ou uma estrutura, mas sim uma abordagem de design que os desenvolvedores podem aderir e que é aprimorada pelas habilidades de armazenamento em cache dos trabalhadores do serviço. Você pode achar que é uma abordagem óbvia e óbvia, tornada mais dramática por uma palavra de ordem.
Com o modelo do App Shell, nos concentramos em manter o shell da interface do usuário do aplicativo e o conteúdo dentro dele separado, e os armazenamos em cache separadamente. O ideal é que nosso App Shell seja armazenado em cache, de modo que seja carregado o mais rápido possível quando um usuário visita e retorna em uma data posterior. Ter o shell e a carga de conteúdo separadamente, teoricamente, melhora a percepção do usuário sobre o desempenho e a usabilidade do aplicativo.
Colocando isso no contexto do Ionic, podemos carregar nosso layout de aplicativo iônico imediatamente (guias, controlador de navegação, menu lateral, etc.), armazená-lo em cache por meio de um service worker e buscar e atualizar o conteúdo por meio do JS após o shell do aplicativo carregado.
À medida que começamos a adicionar mais suporte do PWA ao Ionic, você pode esperar que a abordagem do App Shell fique pronta para todos os aplicativos iônicos implantados como aplicativos da Web para dispositivos móveis, com receitas predefinidas do Service Worker para armazenamento em cache, off-line suporte e atualização de conteúdo em segundo plano.
Instabilidade e manifesto de aplicativo
Historicamente, os aplicativos da Web para dispositivos móveis não foram instalados como um aplicativo na tela inicial. Claro, um usuário poderia “fixar” um site para dispositivos móveis em sua tela inicial no iOS e Android, mas a experiência era de segunda categoria e o aplicativo ainda não acompanhava os recursos locais que esperávamos de aplicativos nativos (além disso, alguém realmente faça isso?).
Isso está mudando. Recentemente, o Chrome no Android adicionou suporte para instalar aplicativos da web na tela inicial com um banner de instalação nativo, assim como os banners de aplicativos nativos aos quais estamos acostumados.
Para informar ao Chrome que o nosso site para dispositivos móveis pode ser instalado como um aplicativo, escrevemos um arquivo manifest.json e o vinculamos a ele a partir de nossa página HTML principal (veja o segundo link acima para obter um exemplo completo).
Atualmente, o iOS não tem recursos adicionais além do Pin para o Homescreen, para que a experiência não seja tão fluida, mas esperamos que a Apple nos dê algumas novidades este ano.
Conclusão
Os Progressive Web Apps são partes iguais de novas APIs da Web, padrões de design e fluff de marketing. A Web para dispositivos móveis está mais próxima da paridade com aplicativos de loja de aplicativos instaláveis por meio de manifesto de aplicativo e suporte a instalação homescreen, funcionalidade de trabalhador em segundo plano com Service Workers, tempo de carregamento mais rápido com o App Shell e uma crença renovada de que os desenvolvedores da Web também podem criar incríveis experiências de aplicativos móveis .
Na Ionic, acreditamos que a Web é o futuro dos aplicativos: ela é executada em todos os lugares, é a pilha de tecnologia mais conhecida e impulsiona um número cada vez maior de aplicativos. Atualmente, as tecnologias da web são usadas por milhões de aplicativos de loja de aplicativos, mas até agora a web para celular tem sido uma experiência despojada que leva as pessoas à loja de aplicativos para o Real Thing. Os Progressive Web Apps mudam isso.
]]>
