Os Progressive Web Apps têm sido muito bem-vindos à discussão. Eles ainda são um modelo relativamente novo, mas seus princípios podem aprimorar igualmente os aplicativos criados com JS baunilha, React, Polymer, Angular ou qualquer outro framework. Nesta postagem, vou resumir algumas opções e referenciar os apps para você começar a usar seu Progressive Web App hoje mesmo.
O que é um App Web Progressivo?
É importante lembrar que os Progressive Web Apps funcionam em qualquer lugar, mas são potentes nos navegadores modernos. O aprimoramento progressivo é a espinha dorsal do modelo.
Aaron Gustafson comparou o aprimoramento progressivo a um amendoim "M&M". O amendoim é o conteúdo, a cobertura de chocolate é a camada de apresentação e o JavaScript é a casca doce. Essa camada pode variar em cor, e a experiência pode variar dependendo dos recursos do navegador que a usa.
Pense no doce shell como o lugar onde muitos recursos do Progressive Web App podem residir. Eles são experiências que combinam o melhor da Web e o melhor dos apps. Eles são úteis para os usuários desde a primeira visita em uma guia do navegador, sem necessidade de instalação.
À medida que o usuário constrói uma relação com esses apps pelo uso repetido, eles deixam a experiência ainda melhor: carregando muito rapidamente em conexões de rede lentas (graças ao service worker), enviando notificações push relevantes e com um ícone de primeira classe na tela inicial que pode carregá-los como experiências de app em tela cheia. Eles também podem usar banners inteligentes para a instalação de apps da Web.
Os Progressive Web Apps são
- Progressiva: funciona para todos os usuários, independente da escolha do navegador, porque eles são criados com aprimoramento progressivo como locatário principal.
- Responsivo: se ajustam a qualquer formato, computador, smartphone, tablet ou o que quiser.
- Independente de conectividade: o recurso tem service workers para trabalhar off-line ou em redes de baixa qualidade.
- Semelhante a app: use o modelo de shell do app para fornecer navegações e interações no estilo do app.
- Atual: sempre atualizado graças ao processo de atualização do service worker.
- Seguro: disponibilizado por TLS para evitar espionagem e garantir que o conteúdo não seja adulterado.
- Detectáveis: são identificáveis como "aplicativos" graças aos manifestos W3C e ao escopo de registro do service worker que permite que os mecanismos de pesquisa os encontrem.
- Reengajamento: facilite o reengajamento com recursos como notificações push.
- Instalar: permite que os usuários "mantenham" os apps que consideram mais úteis na tela inicial sem precisar de uma app store.
- Pode ser vinculado: compartilhe facilmente via URL e não exige instalação complexa.
Os Progressive Web Apps também não são exclusivos do Chrome para Android. Confira abaixo o Progressive Web App da Pokedex funcionando no Firefox para Android (Beta) com a adição antecipada da tela inicial e os recursos de armazenamento em cache do service worker sem problemas.
Um dos aspectos positivos da natureza "progressiva" desse modelo é que os recursos podem ser desbloqueados gradualmente à medida que os fornecedores de navegador fornecem um suporte melhor a eles. Progressive Web Apps, como o Pokedex, também funcionam muito bem no Opera no Android, com algumas diferenças importantes na implementação:
Para saber mais sobre os Progressive Web Apps, leia a postagem original do blog (em inglês) de Alex Russell sobre eles. Paul Kinlan também criou uma tag Stack Overflow muito útil para Progressive Web Apps que vale a pena conferir.
Princípios
Manifesto de app da Web
O manifesto permite que seu app da Web tenha uma presença mais nativa na tela inicial do usuário. Ele permite que o app seja iniciado no modo de tela cheia (sem uma barra de URL), oferece controle sobre a orientação da tela e, nas versões recentes do Chrome no Android, oferece suporte à definição de uma tela de apresentação e cor do tema para a barra de endereço. Ele também é usado para definir um conjunto de ícones por tamanho e densidade usados para a tela de apresentação e o ícone da tela inicial mencionados acima.
É possível encontrar um arquivo de manifesto de exemplo no Web Starter Kit e mais nos exemplos do Google Chrome. Bruce Lawson escreveu um gerador de manifesto e Mounir Lamouri também escreveu um validador de manifesto da Web que vale a pena conferir.
Nos meus projetos pessoais, eu uso o realfavicongenerator para gerar ícones do tamanho correto para o manifesto do app da Web e para uso no iOS, em computadores e assim por diante. O módulo Node favicons também é capaz de gerar uma saída semelhante como parte do processo de build.
Atualmente, os navegadores baseados no Chromium (Chrome, Opera etc.) são compatíveis com manifestos de apps da Web, com o Firefox desenvolvendo ativamente o suporte e o Edge listando-os como em consideração. O WebKit/Safari ainda não postou sinais públicos sobre suas intenções para implementar o recurso.
Para mais detalhes, leia Apps da Web instaláveis com o manifesto de apps da Web no Chrome para Android nos Fundamentos da Web.
Banner "Adicionar à tela inicial"
O Chrome no Android já é compatível com a adição do seu site à tela inicial por algum tempo, mas as versões recentes também são compatíveis com a sugestão proativa de sites usando banners para a instalação de apps da Web nativos.
Para que as solicitações de instalação de apps mostrem seu app, é preciso:
- Ter um manifesto de app da Web válido
- Ser veiculado por HTTPS (consulte letsencrypt para receber um certificado sem custo financeiro)
- Ter um service worker válido registrado
- Ser visitado duas vezes, com pelo menos cinco minutos entre as visitas
Diversos exemplos de banners de instalação de aplicativos estão disponíveis, abrangendo banners básicos até casos de uso mais complexos, como a exibição de aplicativos relacionados.
Service worker para armazenamento em cache off-line
Um service worker é um script executado em segundo plano, separado da página da Web. Ele responde a eventos, incluindo solicitações de rede feitas a partir de páginas que exibe. Um service worker tem uma vida útil intencionalmente curta.
Ele desperta ao receber um evento e permanece em execução apenas pelo tempo necessário para processá-lo. O service worker permite que você use a API Cache para armazenar recursos em cache e pode ser usada para fornecer aos usuários uma experiência off-line.
Os service workers são poderosos para armazenamento em cache off-line, mas também oferecem ganhos de desempenho significativos na forma de carregamento instantâneo para visitas repetidas ao seu site ou app da Web. Você pode armazenar o shell do seu aplicativo em cache para que ele funcione off-line e preencher o conteúdo usando JavaScript.
Um conjunto abrangente de amostras de service workers está disponível nas amostras do Google Chrome. O livro de receitas off-line de Jake Archibald é uma leitura obrigatória. Recomendo que você teste o tutorial de Paul Kinlan sobre seu primeiro app da Web off-line, caso ainda não trabalhe com service workers.
Nossa equipe também mantém uma série de utilitários de assistentes e ferramentas de compilação que consideramos úteis para reduzir a sobrecarga na configuração do service worker. Elas estão listadas nas Bibliotecas de service worker. Os dois principais são:
- sw-precache: uma ferramenta de tempo de build que gera um script de service worker, útil para armazenar previamente em cache o shell do seu app da Web
- sw-toolbox: uma biblioteca que fornece armazenamento em cache do ambiente de execução para recursos usados com pouca frequência
Jeff Posnick escreveu um guia rápido sobre o sw-precache chamado Off-line, rápido, com o módulo sw-precache e um codelab sobre essa ferramenta que pode ser útil para você.
O Chrome, o Opera e o Firefox implementaram o suporte ao service worker, e o Edge tem sinais públicos positivos sobre o interesse no recurso. O Safari mencionou de forma breve o interesse nele por meio do plano de cinco anos proposto por um engenheiro.
Notificações push para reengajamento
Efetivamente, você pode criar aplicativos da web com os quais os usuários podem interagir fora de uma guia. O navegador pode ser fechado e a pessoa não precisa nem estar usando ativamente seu app da Web para interagir com sua experiência. O recurso requer o service worker e um manifesto de app da Web, baseado em alguns dos recursos resumidos anteriormente.
A API Push é implementada no Chrome, em desenvolvimento no Firefox e em consideração no Edge. Ainda não há sinais públicos do Safari sobre a intenção da empresa de implementar esse recurso.
Notificações push na Web aberta é uma introdução abrangente à configuração push de Matt Gaunt. Um codelab sobre notificações push também está disponível nos Fundamentos da Web.
Michael van Ouwerkerk, da equipe do Chrome, também tem uma introdução de 6 minutos ao Push se você preferir vídeos.
Como adicionar camadas em recursos avançados
Lembre-se: a experiência do usuário pode ter diferentes níveis de complexidade dependendo do navegador usado para visualizar o app da Web. Você está no controle da casca dura.
Recursos adicionais que chegam à plataforma da Web, como a sincronização em segundo plano (para sincronização de dados com um servidor mesmo quando o app da Web está fechado) e o Web Bluetooth (para comunicação com dispositivos Bluetooth no seu app da Web), também podem ser colocados em camadas no Progressive Web App dessa maneira.
A sincronização única em segundo plano foi ativada no Google Chrome, e Jake Archibald tem um vídeo do app Wikipédia off-line e um artigo demonstrando isso em ação. Francois Beaufort também tem várias amostras de Bluetooth da Web disponíveis se tiver interesse em testar essa API.
Compatível com framework
Realmente não há nada que impeça você de aplicar qualquer um dos princípios acima a um aplicativo ou framework que você está usando no desenvolvimento. Alguns outros princípios que vale a pena ter em mente ao criar seu Progressive Web App são o modelo de desempenho RAIL centrado no usuário e as animações baseadas em FLIP.
Espero que, em 2016, haja um número crescente de padrões e projetos semente sendo preparados organicamente para o suporte aos Progressive Web Apps como recurso principal. Até lá, a barreira para adicionar esses recursos aos seus próprios aplicativos não é muito alta e é IMHO. Vale a pena o esforço.
Arquitetura
Há diferentes níveis de "adequação total" ao modelo de App Web Progressivo, mas uma abordagem comum adotada é a arquitetura em torno de um shell de aplicativo. Esse não é um requisito difícil, mas traz vários benefícios.
A arquitetura de shell do aplicativo incentiva o armazenamento em cache do shell do seu aplicativo (a interface do usuário) para que ele funcione off-line e preencha o conteúdo usando JavaScript. Em visitas repetidas, isso permite que você veja pixels significativos na tela de forma muito rápida sem a rede, mesmo que seu conteúdo eventualmente venha dela. Isso resulta em ganhos de performance significativos.
Jeremy Keith recentemente comentou que, nesse tipo de modelo, a renderização do lado do servidor não deve ser vista como substituta, mas a do lado do cliente precisa ser encarada como um aprimoramento. Este é um feedback justo.
No modelo do Application Shell, a renderização do lado do servidor deve ser usada o máximo possível, e a renderização progressiva do lado do cliente deve ser usada como um aprimoramento, da mesma forma que "aprimoramos" a experiência quando há suporte ao service worker. Há muitas maneiras de abordar isso.
Minha recomendação é ler nosso artigo sobre a arquitetura e avaliar como princípios semelhantes podem ser melhor aplicados ao seu próprio aplicativo e pilha.
Introdução aos códigos boilerplate
Shell do aplicativo
O repositório app-shell contém uma implementação quase completa da arquitetura de shell do aplicativo. Ela tem um back-end escrito em Express.js e um front-end escrito em ES2015.
Como ele abrange as partes do modelo do cliente e do servidor e tem muita coisa acontecendo, vai levar algum tempo para se familiarizar com a base de código. Esse é o nosso ponto de partida mais abrangente para o Progressive Web App no momento. O Documentos será nosso próximo foco deste projeto.
Kit do iniciante no Polymer
O ponto de partida oficial dos apps da Web da Polymer é compatível com os seguintes recursos do App Web Progressivo:
- Manifesto do aplicativo da Web
- Tela de apresentação do Google Chrome para Android
- Armazenamento em cache off-line do service worker com os elementos Platinum SW
- Notificações push (configuração manual necessária) com os elementos Push Platinum
A versão atual do PSK não é compatível com alguns dos padrões de desempenho mais avançados (por exemplo, modelo de shell de aplicativo e carregamento assíncrono) encontrados em alguns apps da Web do Progressive Polymer.
Nosso objetivo é tentar incorporar esses padrões ao PSK em 2016, mas os primeiros experimentos relacionados podem ser encontrados no app Zuperkulblog (link em inglês) da Polymer de Rob Dodson e na excelente palestra Polymer Perf Patterns de Eric Bidelman (link em inglês).
Kit do iniciante na Web
Nosso ponto de partida para novos projetos baunilha inclui os seguintes recursos do App Web Progressivo:
- Manifesto do aplicativo da Web
- Tela de apresentação do Google Chrome para Android
- Pré-armazenamento em cache de service worker graças ao sw-precache
Se você preferir trabalhar com JS/ES2015 baunilha e não conseguir usar o Polymer, o Web Starter Kit pode ser útil como ponto de referência para reutilizar ou roubar snippets de código.
Apps Web Progressivos com e sem frameworks
Vários Progressive Web Apps de código aberto já foram criados por membros da comunidade com e sem bibliotecas e estruturas JS. Se você está em busca de inspiração, os repositórios abaixo podem ser úteis como referência. Eles também são apps muito bons.
JavaScript baunilha
- Voice Memos, de Paul Lewis, foi desenvolvido usando uma arquitetura semelhante à
app-shell(write-up) - Off-line da Wikipédia por Jake Archibald (vídeo)
- Air Horner por Paul Kinlan
- Guitar Tuner por Paul Lewis (texto)
Polymer
- Zuperkulblog por Rob Dodson (slides)
Reação
- iFixit, de Jeff Posnick: usa
sw-precachepara armazenamento em cache do shell do aplicativo (slides)
DOM virtual
- Pokedex, da Nolan Lawson: excelente app da Web progressivo que aplica uma abordagem "fazer tudo em um funcionário da Web" para ajudar na renderização progressiva. (descrição)
Angular.js
- Timey.in de Kenneth Auchenberg. Também usa
sw-precachepara pré-armazenamento em cache de recursos
Notas de encerramento
Como mencionado, os Progressive Web Apps ainda estão na infância, mas é um momento empolgante para experimentar as metodologias por trás deles e ver até que ponto eles podem ser aplicados aos seus próprios aplicativos da Web.
Paul Kinlan está planejando a orientação dos Fundamentos da Web sobre os Progressive Web Apps. Se você tiver sugestões sobre áreas que gostaria de abordar, sinta-se à vontade para comentar na conversa.
Leia mais
- Progressive Web Apps: como escapar guias sem perder a alma
- Por que os Progressive Web Apps são o futuro do desenvolvimento na Web
- Progressive Web Apps: prontos para o horário nobre
- Como criar um App Progressivo com ServiceWorker
- Os Progressive Web Apps são o futuro
- Progressive Web App: uma nova maneira de aproveitar os dispositivos móveis
- Conheça o Pokedex.org: um app da Web progressivo para fãs de Pokémon
- Resumo da Conferência de desenvolvedores do Chrome: Progressive Web Apps