Contente
- A ascensão dos PWAs
- PWAs em ação hoje
- Instalação
- Lançamento offline e imediato
- Experiência de primeira classe
- App store
- Integração de plataforma
- Desafios de design e UX
- O ano dos PWAs
Assim como o web design responsivo eliminou a lacuna entre os sites para desktop e móveis há alguns anos, as técnicas progressivas de aplicativos da web estão atualmente fechando a lacuna entre a web e o mundo dos aplicativos. Com as experiências do usuário de desktop para aplicativos móveis convergindo rapidamente, parece que uma internet muito mais elegante e eficiente está evoluindo - embora, inevitavelmente, não sem algumas mudanças significativas em seu código genético subjacente.
- Como construir um Progressive Web App
Evidentemente, existem algumas pressões seletivas significativas que conduzem a isso. Em primeiro lugar, criar aplicativos nativos para cada nicho não é necessariamente um uso eficiente de recursos: os usuários acabam com centenas de grandes aplicativos desperdiçando largura de banda e valioso espaço em disco e as empresas gastam muito dinheiro criando aplicativos apenas para serem abandonados após suas primeiras versões. E a maioria desses aplicativos é impulsionada apenas pelo conteúdo da web: informações provenientes de serviços da web ou de um sistema de gerenciamento de conteúdo.
A definição de um aplicativo da web progressivo não é concreta. Um PWA é apenas um aplicativo da web que usa várias novas APIs e habilidades na plataforma da web usando aprimoramento progressivo para oferecer uma experiência semelhante a um aplicativo em todas as plataformas com a mesma base de código. É mais um conjunto de práticas recomendadas e uso de API que cria uma excelente experiência semelhante a um aplicativo para seus usuários, então é como se você não tivesse ou não tivesse um PWA; é mais como se seu site fosse mais ou menos PWA.
Você está prestes a começar a construir um novo site? Tente usar um construtor de sites. E certifique-se de obter o suporte necessário de um serviço de hospedagem na web decente também. Ou para algo um pouco diferente, consulte nosso guia para o melhor armazenamento em nuvem.
A ascensão dos PWAs
Embora o nome PWA tenha sido cunhado em 2015 no artigo Escaping Tabs Without Losing our Soul, de Alex Russell que trabalha no Google para a equipe do Chrome, a jornada deles não começou realmente aí. Costumávamos ter aplicativos HTML (HTAs), que foram criados pela Microsoft em 1999, juntamente com muitas outras plataformas de aplicativos da web da Nokia, BlackBerry e outras empresas. Então, em 2007, Steve Jobs apresentou o que era na época a única maneira de criar aplicativos para o iPhone original: PWAs, embora com um nome diferente. O Chrome começou daí, aprimorou as APIs alguns anos depois e inventou o nome PWA.
Com tantas experiências anteriores fracassadas de tentar trazer conteúdo da web para o mundo dos aplicativos, por que achamos que vai funcionar agora? Bem, principalmente, cabe às empresas que agora estão trabalhando e promovendo as tecnologias por trás dos PWAs, como Microsoft, Google, Apple e Mozilla, para citar apenas alguns. Além disso, o desempenho da plataforma web atingiu um ponto em que não há diferença percebida quando você compara um PWA bem projetado com um aplicativo nativo. Essas condições nunca existiram antes e esse é um dos motivos pelos quais a comunidade da web decidiu que chegou a hora dos PWAs.
PWAs em ação hoje
Hoje, os PWAs são totalmente funcionais e instaláveis em:
- Android com a maioria dos navegadores, com o Chrome oferecendo a melhor experiência
- iOS com Safari
- Chromebooks
- Windows 10 da Microsoft Store
- Feature phones com KaiOS - um fork do Firefox OS - atualmente disponível para milhões de usuários, principalmente na Índia
O suporte também chegará ao macOS, Windows e Linux por meio do Chrome ainda este ano. Ele está disponível hoje como um sinalizador experimental 'Desktop PWA' se você quiser experimentá-lo agora. A instalação no Windows on Edge sem o uso da loja também virá mais tarde, embora nenhum período de tempo específico seja definido.
Se você reler a lista, verá que cada plataforma tem ou está prestes a ter suporte para PWAs totalmente instaláveis nos próximos meses. E como um PWA é apenas um site com recursos na parte superior que serão ativados apenas em navegadores compatíveis, podemos até dizer que é compatível com todos os navegadores a partir de sua funcionalidade básica.
Além disso, os PWAs estão sendo gerados atualmente a partir da maioria das CLIs para diferentes estruturas, incluindo Angular 6+ CLI, React Create App, PWA Starter Kit da Polymer e Preact CLI. Finalmente, a equipe do Ionic Framework teve a ideia do Capacitor, um substituto de código aberto do Cordova que possibilita PWAs nativos em todas as lojas de aplicativos.
Instalação
Um dos aspectos críticos de um PWA é a instalação do aplicativo. Esse processo é feito em duas etapas opcionais: o download e o armazenamento offline dos arquivos do aplicativo e a instalação do ícone no sistema operacional. Como as duas etapas são opcionais, você pode oferecer uma experiência offline no navegador ou pode oferecer um ícone sem instalação offline. Mas um verdadeiro PWA deve incluir ambos: deve ser servido com TLS em HTTPS e o usuário decidirá se o usará no navegador ou em seu próprio ícone instalado.
Lançamento offline e imediato
O cérebro de um PWA é o service worker, um arquivo JavaScript instalado no dispositivo do usuário que é responsável por baixar os arquivos do aplicativo, armazená-los em um cache e posteriormente disponibilizá-los quando necessário. Depois que o service worker é instalado, ele atua como um proxy de rede para todos os recursos de que o aplicativo da web precisa: ele pode decidir buscá-lo na rede ou entregá-lo do cache local, o que torna o aplicativo disponível offline e também disponível apenas alguns milissegundos, mesmo se o usuário tiver conexão, emulando a inicialização de um aplicativo nativo.
Para instalar um service worker, seu documento HTML precisará incluir algo como:
if (’serviceWorker’ no navegador) navigator.serviceWorker.register ("sw.js");
Isso instalará o arquivo "sw.js" nos dispositivos dos usuários para a pasta atual no domínio atual - um conceito conhecido como escopo. Depois de instalado, as próximas visitas a qualquer URL dentro de seu escopo serão gerenciadas por esse service worker.
Digamos que temos um PWA com quatro arquivos: index.html, app.js, app.css e logo.png. A primeira coisa é instalar esses arquivos no cache do arquivo sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; auto. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (recursos)));});
Então, para que o PWA seja sempre atendido a partir do cache, precisamos ouvir o evento fetch dentro do service worker e decidir a política de cache a ser usada, como cache primeiro com o trecho a seguir.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
Nesse caso, toda vez que o usuário acessar o PWA (tanto de um navegador quanto de um ícone instalado), o mecanismo obterá os arquivos do cache. Uma vantagem dos PWAs em relação aos aplicativos nativos é que os dispositivos não precisam baixar todos os arquivos novamente quando há uma alteração, apenas o arquivo que foi alterado com um processo transparente. Além disso, ainda podemos baixar partes do aplicativo sob demanda.
Mas o desafio é como saber quais arquivos foram atualizados no servidor para que você possa substituí-los no cache? Se você não quiser escrever um service worker de baixo nível para gerenciar isso, você pode usar a biblioteca de código aberto Workbox, que o ajudará com a geração do service worker e o manifesto de recursos para atualizar o pacote instalado.
Esteja ciente de que os arquivos do seu PWA serão excluídos se houver pressão de armazenamento no dispositivo, a menos que você solicite o armazenamento persistente, se disponível:
if ('armazenamento' em navigator && 'persist' em navigator.storage) navigator.storage.persist ();
No Chrome e na maioria dos navegadores Android, seu aplicativo não é capaz de usar mais de cinco por cento do espaço disponível; no iOS é 50 MiB (perto de 50 MB) por host apenas; no Edge é variável de acordo com o tamanho total da memória e na Windows Store, é ilimitado.
Experiência de primeira classe
Temos o cérebro e agora é a hora do coração: o manifesto do aplicativo da web. O objetivo de transformar um site em um PWA não é apenas garantir que ele esteja disponível rapidamente ou off-line, mas também permitir que tenha seu próprio ícone no sistema operacional e ofereça uma experiência totalmente autônoma como qualquer outro aplicativo instalado.
O manifesto é um arquivo JSON que define metadados para o PWA usado por um navegador ou loja de aplicativos para definir o comportamento da instalação.
O arquivo define várias propriedades como metadados para seu PWA. Cada sistema operacional lerá essas propriedades e fará o possível para corresponder à experiência de sua preferência. Por exemplo, o Android irá ler 'display: standalone' e criar uma experiência de app normal. Com 'display: minimal-ui', ele criará uma experiência com um URL visível e certificado TLS - útil para aplicativos sensíveis à segurança. Com 'display: fullscreen', ele cria aplicativos totalmente imersivos sem barra de status ou botão Voltar visível. Um conjunto de ícones e cores define como as telas iniciais ou barras de título ficarão na janela do seu aplicativo.
Existem alguns geradores de manifesto, como o Web App Manifest Generator ou o PWA Builder, que também redimensionam o ícone para você em diferentes resoluções se você fornecer um de alta resolução (mínimo de 512 pixels).
Quando você tem o arquivo de manifesto vinculado ao seu documento HTML, os usuários poderão instalar o aplicativo usando diferentes técnicas dependendo do navegador, normalmente chamado de Adicionar à tela inicial, Instalar ou apenas Adicionar. Se o seu PWA puder ser rastreado pelo Bing, a Microsoft o adicionará automaticamente à Microsoft Store para que os usuários do Windows 10 possam instalá-lo a partir daí.
Em alguns sistemas operacionais, seu PWA terá a capacidade de capturar links. Isso significa que, após o usuário instalar o aplicativo, qualquer URL dentro do escopo do seu manifesto será aberto dentro dos limites do seu aplicativo e não no navegador, independentemente de aparecer no navegador ou em outros aplicativos como WhatsApp, Facebook ou um e-mail.
Se você passar nos requisitos de PWA que estamos definindo aqui, algumas plataformas oferecerão emblemas de ambiente (um pequeno ícone geralmente na barra de URL especificando que a web pode ser instalada) ou um banner de aplicativo da web. Se preferir, você também pode adicionar seu próprio botão Instalar personalizado usando o seguinte snippet:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // mostrará o prompt nativo de instalação})
Se o PWA estiver instalado, o evento 'appinstalled' será disparado no objeto da janela para que você possa rastrear as estatísticas de escuta dele.
App store
Um dos principais benefícios de instalar de um navegador é poder evitar o processo de aprovação da loja de aplicativos ou ter que pagar para ser um editor. Isso vem com vantagens óbvias, como publicação instantânea, criação de aplicativos privados para empresas ou aplicativos que não deveriam ser aceitos nas lojas.
Mas algumas empresas querem estar na loja. A partir de hoje, as únicas lojas que aceitam oficialmente os PWAs são a Windows Store e a kaiOS Store. Felizmente, com ferramentas como Capacitor (atualmente em Alpha) ou PWA Builder, podemos criar e assinar pacotes nativos para outras plataformas também.
Existem alguns PWAs já publicados na Google Play Store, como Twitter Lite e Google Maps Go, atualmente em implementações personalizadas. O Chrome oferecerá uma solução do Chrome 68 por meio de atividades confiáveis na web. A partir desse ponto, seremos capazes de criar um pacote Android (APK) com um iniciador para nosso PWA e carregá-lo para a loja. Para a Microsoft Store no Windows 10, o site PWA Builder está atualmente ajudando na geração de um pacote APPX do Windows 10. Usando uma visualização da web, você pode criar manualmente um aplicativo iOS para a App Store, mas seja extremamente cuidadoso com as regras da loja.
Integração de plataforma
Ao implementar técnicas de aprimoramento progressivo, você poderá usar muitos recursos, incluindo notificações push, acesso a câmera e microfone, geolocalização, sensores, pagamentos, diálogos de compartilhamento e armazenamento offline. Todos esses recursos são executados diretamente no modelo de segurança do navegador, incluindo diálogos de permissão.
Também podemos nos comunicar com outros aplicativos por meio de esquemas de URI, como abrir o Twitter, YouTube ou WhatsApp por meio de seus URLs ou URIs personalizados, como o whatsapp: //.
Finalmente, ao criar PWAs nativos que são publicados na loja usando o Capacitor ou na Microsoft Store, seremos capazes de criar uma ponte para APIs nativas que nos permitirão executar virtualmente qualquer código nativo. Essa integração com o Windows 10 inclui acesso ao hardware, mas também integração com o sistema operacional, oferecendo opções como Pin to Start. Por exemplo, o PWA do Twitter permite que você fixe qualquer usuário na tela inicial.
Desafios de design e UX
Projetar PWAs tem desafios únicos, por isso é importante gastar algum tempo pesquisando, testando o máximo possível e considerando o seguinte:
- Os usuários esperam experiências semelhantes às de um aplicativo.
- O processo de instalação ainda é novo, então precisamos fazer um esforço extra para explicar como instalar o aplicativo.
- Atualizar o aplicativo em segundo plano sem interação do usuário é ótimo, mas também adiciona alguns desafios para a UX.
- Na área de trabalho, o design da Web responsivo assume uma nova fronteira, pois as janelas PWA podem ser minúsculas, muito menores do que uma janela de visualização móvel. Isso significa que precisamos criar visualizações específicas ou pequenos widgets para este formato, como visto no Chrome OS hoje.
- As notificações push devem agregar valor apenas ao usuário, então aprenda a perguntar no momento certo e não perca a oportunidade de enviar mensagens que não são úteis ou interessantes.
- Precisamos projetar para desempenho na web e para acesso offline.
O ano dos PWAs
Com a adição do iOS e do desktop este ano, os PWAs estão em toda parte hoje. Mas precisamos lembrar que a jornada deles está apenas começando, então espere mudanças frequentes e certifique-se de manter-se atualizado com as técnicas e ideias mais recentes para fornecer uma excelente experiência ao usuário enquanto a plataforma evolui.
Este artigo foi publicado originalmente na edição 308 da internet, a revista mais vendida do mundo para web designers e desenvolvedores. Compre a edição 308 aqui ou inscreva-se aqui.
