Ultimamente, temos discutido muito sobre os Apps Web Progressivos. Eles ainda são um modelo relativamente novo, mas os princípios deles podem melhorar igualmente os apps criados com vanilla JS, React, Polymer, Angular ou qualquer outra estrutura. Neste post, vamos resumir algumas opções e apps de referência para você começar a usar seu próprio app da Web progressivo hoje mesmo.
O que é um Progressive Web App?
É importante lembrar que os Progressive Web Apps funcionam em qualquer lugar, mas são otimizados em navegadores modernos. O aprimoramento progressivo é a base 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 do 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 de navegador sem exigir instalações.
À medida que o usuário cria um relacionamento com esses apps com o uso repetido, eles tornam a experiência ainda melhor, carregando muito rápido em conexões de rede lentas (graças ao service worker), enviando notificações push relevantes e tendo um ícone de primeira classe na tela inicial do usuário que pode carregá-los como experiências de app em tela cheia. Eles também podem aproveitar os banners de instalação de apps da Web inteligentes.
Os Progressive Web Apps são
- Progressivo: funciona para qualquer usuário, independentemente do navegador escolhido, porque é criado com o aprimoramento progressivo como princípio fundamental.
- Responsivo: se adequa a qualquer formato, como computador, smartphone, tablet ou o que for inventado a seguir.
- Independente de conectividade: o recurso tem service workers para trabalhar off-line ou em redes de baixa qualidade.
- Semelhante a aplicativos: use o modelo de shell do app para fornecer navegações e interações de estilo de app.
- Atual: sempre atualizado graças ao processo de atualização do service worker.
- Seguro: é fornecido por TLS para evitar invasões e garantir que o conteúdo não seja adulterado.
- Descobríveis: podem ser identificados como "aplicativos" graças aos manifestos do W3C e ao escopo de registro do service worker, que permitem que os mecanismos de pesquisa os encontrem.
- Reenvolvente: facilita o reengajamento com recursos como notificações push.
- Instalável: permite que os usuários "guardem" os apps mais úteis na tela inicial sem precisar acessar uma app store.
- Vinculável: compartilhe facilmente por URL e não exija instalações complexas.
Os Progressive Web Apps também não são exclusivos do Chrome para Android. Abaixo, podemos ver o app da Web progressiva Pokedex funcionando no Firefox para Android (Beta), com os recursos de adição à tela inicial e de armazenamento em cache do service worker funcionando perfeitamente.
Um dos aspectos positivos da natureza "progressiva" desse modelo é que os recursos podem ser desbloqueados gradualmente à medida que os fornecedores de navegadores oferecem suporte melhor para eles. Os Progressive Web Apps, como o Pokedex, também funcionam muito bem no Opera para Android, com algumas diferenças na implementação:
Para saber mais sobre os Progressive Web Apps, leia a postagem do blog original de Alex Russell sobre o assunto. Paul Kinlan também criou uma tag do Stack Overflow muito útil para Progressive Web Apps.
Princípios
Manifesto do 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.
Um arquivo de manifesto de exemplo pode ser encontrado no Web Starter Kit e nas amostras do Google Chrome. Bruce Lawson criou um Gerador de manifestos, e Mounir Lamouri também criou um validador de manifestos 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, no computador e assim por diante. O módulo Node favicons também pode 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 publicou indicadores públicos sobre as intenções de 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á oferece suporte para adicionar seu site à tela inicial há algum tempo, mas as versões recentes também oferecem suporte para sugerir proativamente a adição de sites usando banners de instalação de aplicativos 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 conferir um certificado sem custo financeiro)
- Ter um service worker válido registrado
- Ser visitado duas vezes, com pelo menos 5 minutos entre as visitas
Há várias amostras de banners de instalação de apps disponíveis, que abrangem banners básicos e casos de uso mais complexos, como mostrar 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.
Ela é ativada quando recebe um evento e é executada 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 usado para oferecer 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. É possível armazenar o shell do aplicativo em cache para que ele funcione off-line e preencher o conteúdo usando JavaScript.
Um conjunto abrangente de exemplos de service worker está disponível nos exemplos do Google Chrome. O livro de receitas off-line de Jake Archibald é uma leitura obrigatória. Se você não tem experiência com service workers, recomendo que faça o tutorial seu primeiro app da Web off-line de Paul Kinlan.
Nossa equipe também mantém vários utilitários auxiliares e ferramentas de build de service workers que achamos úteis para reduzir a sobrecarga na configuração de service workers. Elas estão listadas nas Bibliotecas de service worker. As duas principais são:
- sw-precache: uma ferramenta de build que gera um script de service worker útil para pré-armazenar 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 uma introdução rápida sobre o sw-precache chamada Offline-first, fast, with the sw-precache module (em inglês) e um codelab sobre a mesma ferramenta que pode ser útil.
O Chrome, o Opera e o Firefox implementaram suporte para service workers, e o Edge tem indicadores públicos positivos sobre o interesse no recurso. O Safari mencionou brevemente o interesse no recurso no 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 estar fechado, e o usuário nem precisa estar usando o app da Web ativamente para se envolver com a experiência. O recurso exige um service worker e um manifesto de app da Web, com base em alguns dos recursos resumidos anteriormente.
A API Push está 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 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 usar recursos avançados
Lembre-se de que a experiência do usuário pode ter diferentes níveis de doçura, dependendo do navegador usado para acessar o app da Web. Você tem o controle da casca do doce.
Outros recursos que chegam à plataforma da Web, como a sincronização em segundo plano (para sincronizar dados com um servidor mesmo quando o app da Web está fechado) e o Bluetooth da Web (para se comunicar com dispositivos Bluetooth pelo app da Web) também podem ser usados no app da Web progressivo dessa maneira.
A sincronização em segundo plano única foi ativada no Chrome, e Jake Archibald tem um vídeo do app da Wikipedia off-line e um artigo que demonstram como ele funciona. O François Beaufort também tem várias amostras da Web Bluetooth disponíveis para quem quiser testar essa API.
Compatível com o framework
Não há nada que impeça você de aplicar qualquer um dos princípios acima a um aplicativo ou framework que você está criando. Alguns outros princípios que valem a pena lembrar ao criar seu Progressive Web App são o modelo de desempenho centrado no usuário RAIL e as animações baseadas em FLIP.
Espero que, em 2016, um número cada vez maior de modelos e projetos iniciais inclua de forma orgânica o suporte a apps da Web progressivos como um 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 como "tudo-em-um" é usado no modelo de Progressive Web App, mas uma abordagem comum é arquitetar em torno de um shell de aplicativo. Isso não é um requisito rígido, mas oferece vários benefícios.
A arquitetura do shell do aplicativo incentiva o armazenamento em cache do shell do aplicativo (a interface do usuário) para que ele funcione off-line e preencha o conteúdo usando JavaScript. Em visitas repetidas, isso permite exibir pixels importantes na tela muito rapidamente sem a rede, mesmo que o conteúdo venha dela. Isso traz ganhos significativos de desempenho.
Recentemente, Jeremy Keith comentou que, nesse tipo de modelo, talvez a renderização do lado do servidor não deva ser considerada uma alternativa, mas sim uma melhoria. Este é um feedback justo.
No modelo de shell do aplicativo, 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 uma melhoria da mesma forma que "melhoramos" a experiência quando o service worker é compatível. Há muitas maneiras de fazer 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 do Application Shell. Ele tem um back-end escrito em Express.js e um front-end escrito em ES2015.
Como ele abrange partes do modelo do lado do cliente e do servidor, e há muitas coisas acontecendo, vai levar algum tempo para você se familiarizar com a base de código. É o ponto de partida mais completo para Progressive Web Apps no momento. Os documentos serão o próximo foco deste projeto.
Kit do iniciante no Polymer
O ponto de partida oficial para apps da Web com Polymer oferece suporte aos seguintes recursos de Progressive Web Apps:
- 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 do SW Platinum
- Notificações push (configuração manual necessária) com os elementos Push Platinum
A versão atual do PSK não tem suporte para alguns dos padrões de desempenho mais avançados (por exemplo, modelo de shell do aplicativo, carregamento assíncrono) encontrados em alguns apps da Web do Polymer progressivo.
Nosso objetivo é tentar incorporar esses padrões ao PSK em 2016, mas os primeiros experimentos sobre isso podem ser encontrados no app Polymer Zuperkulblog de Rob Dodson e na excelente palestra Polymer Perf Patterns de Eric Bidelman.
Kit do iniciante na Web
Nosso ponto de partida opinativo para novos projetos vanilla inclui os seguintes recursos de Progressive Web Apps:
- Manifesto do aplicativo da Web
- Tela de apresentação do Google Chrome para Android
- Pré-armazenamento em cache de service workers com sw-precache
Se você prefere trabalhar com JS/ES2015 vanilla e não pode usar o Polymer, o Web Starter Kit pode ser útil como um ponto de referência para reutilizar ou copiar 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 frameworks JS. Se você estiver procurando inspiração, os repositórios abaixo podem ser úteis como referência. Eles também são apps muito bons.
JavaScript baunilha
- O recurso Voice Memos (em inglês) de Paul Lewis foi criado usando uma arquitetura semelhante à
app-shell(write-up) - Wikipedia off-line, por Jake Archibald (vídeo)
- Air Horner por Paul Kinlan
- Guitar Tuner, por Paul Lewis (detalhes)
Polymer
- Zuperkulblog, de Rob Dodson (slides)
Reação
- iFixit, de Jeff Posnick: usa
sw-precachepara armazenamento em cache do shell do aplicativo (slides)
DOM virtual
- Pokedex, de Nolan Lawson: um excelente app da Web progressivo que aplica uma abordagem "faça tudo em um worker da Web" para ajudar na renderização progressiva. (relatório)
Angular.js
- Timey.in, de Kenneth Auchenberg: também usa
sw-precachepara pré-cachear recursos.
Notas de encerramento
Como mencionado, os Progressive Web Apps ainda estão no início, mas é um momento empolgante para brincar com as metodologias e ver como elas podem ser aplicadas aos seus próprios apps da Web.
Paul Kinlan está planejando o guia de Web Fundamentals sobre apps da Web progressivos. Se você tiver sugestões de áreas que gostaria de ver abordadas, comente na conversa.
Leitura adicional
- Progressive Web Apps: como escapar das guias sem perder a alma
- Por que os Progressive Web Apps são o futuro do desenvolvimento da 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
- Introdução à Pokedex.org: um Progressive Web App para fãs de Pokémon
- Resumo da Conferência de desenvolvedores do Chrome: Progressive Web Apps