Faça seu PWA parecer mais um aplicativo
Faça com que seu Progressive Web App não pareça um site, mas sim um aplicativo "real"
Quando você joga o buzzword bingo Progressive Web App, é uma aposta segura marcar como "PWAs são apenas sites". A documentação do PWA da Microsoft concorda, dizemos isso neste mesmo site, e até mesmo os indicados pelo PWA, Frances Berriman e Alex Russell, também assim o escrevem. Sim, os PWAs são apenas sites, mas também são muito mais do que isso. Se feitos da maneira certa, um PWA não se parecerá com um site, mas como aplicativo "real". Então, o que significa parecer um aplicativo de verdade?
Para responder a essa pergunta, deixe-me usar o aplicativo Apple Podcasts como exemplo. Ele está disponível no macOS para desktop e no iOS (e iPadOS, respectivamente) no celular. Embora o Podcasts seja um aplicativo de mídia, as ideias centrais que ilustro com sua ajuda se aplicam também a outras categorias de aplicativos.
Capaz de funcionar offline #
Se você der um passo para trás e pensar em alguns dos aplicativos específicos da plataforma que você pode ter em seu telefone celular ou computador desktop, uma coisa se destaca: você nunca ganha nada. No aplicativo Podcasts, mesmo se eu estiver offline, sempre há algo. Quando não há conexão de rede, o aplicativo ainda abre naturalmente. A seção Top Charts não mostra nenhum conteúdo, mas em vez disso mostra alternativamente uma mensagem Não é possível conectar agora emparelhada com um botão Tentar novamente. Pode não ser a experiência mais acolhedora, mas a menos recebo algo.
Como fazer isso na web
O aplicativo Podcasts segue o chamado modelo de shell de aplicativo. Todo o conteúdo estático necessário para mostrar o aplicativo principal é armazenado em cache localmente, incluindo imagens decorativas como os ícones de menu à esquerda e os ícones da interface do usuário do player principal. O conteúdo dinâmico, como os dados do Top Charts só é carregado sob demanda, com conteúdo alternativo em cache local disponível caso o carregamento falhe. Leia o artigo The App Shell Model para aprender como aplicar este modelo de arquitetura ao seu aplicativo da web.Conteúdo offline disponível e reproduzível em mídia #
Quando offline, através da gaveta do lado esquerdo, eu ainda consigo navegar até a seção Baixados e curtir episódios de podcast transferidos que estão prontos para ser tocados e exibidos com todos os metadados como capas e descrições.
Como fazer isso na web
O conteúdo de mídia baixado anteriormente pode ser servido a partir do cache, por exemplo, usando a receita Servir áudio e vídeo em cache da biblioteca Workbox. Outro conteúdo sempre pode ser armazenado no cache ou em IndexedDB. Leia o artigo Armazenamento para a web para saber todos os detalhes e para saber quando usar qual tecnologia de armazenamento. Se você tiver dados que devem ser armazenados de forma persistente sem o risco de serem eliminados quando a quantidade de memória disponível ficar baixa, você pode usar a API de armazenamento persistente.Download proativo em segundo plano #
Quando estiver on-line novamente, posso pesquisar conteúdo com uma consulta como http 203 , e quando decidir assinar o resultado da pesquisa, o podcast HTTP 203, o último episódio da série é baixado imediatamente, sem mais perguntas.
Como fazer isso na web
Baixar um episódio de podcast é uma operação que pode levar mais tempo. A API Background Fetch permite delegar downloads ao navegador, que cuida deles em segundo plano. No Android, o navegador, por sua vez, pode até mesmo delegar esses downloads ao sistema operacional para que o navegador não precise estar em execução contínua. Assim que o download for concluído, o service worker do seu aplicativo é ativado e você pode decidir o que fazer com a resposta.Compartilhando e interagindo com outros aplicativos #
O aplicativo Podcasts se integra naturalmente a outros aplicativos. Por exemplo, quando clico com o botão direito em um episódio de que gosto, posso compartilhá-lo com outros aplicativos do meu dispositivo, como o aplicativo Mensagens. Ele também se integra naturalmente à área de transferência do sistema. Posso clicar com o botão direito em qualquer episódio e copiar um link nela.
Como fazer isso na web
A API Web Share e a API Web Share Target permitem que seu aplicativo compartilhe e receba textos, arquivos e links de e para outros aplicativos no dispositivo. Embora ainda não seja possível para um aplicativo da web adicionar itens de menu ao menu de atalho embutido do sistema operacional, há muitas outras maneiras de se conectar a outros aplicativos no dispositivo. Com a API Async Clipboard , você pode ler e gravar texto e dados de imagem (imagens PNG) programaticamente de e para a área de transferência do sistema. No Android, você pode usar a API Contact Picker para selecionar entradas do gerenciador de contatos do dispositivo. Se você oferece um aplicativo específico da plataforma e um PWA, pode usar a API Get Installed Related Apps para verificar se o aplicativo específico da plataforma está instalado; nesse caso, você não precisa encorajar o usuário a instalar o PWA ou aceitar notificações push da web.Atualização do app em segundo plano #
Nas configurações do aplicativo Podcasts, posso configurar o aplicativo para baixar novos episódios automaticamente. Assim, não preciso nem pensar nisso, sempre haverá conteúdo atualizado. É mágica.
Como fazer isso na web
A API Periodic Background Sync permite que seu aplicativo atualize seu conteúdo regularmente em segundo plano, sem a necessidade de estar em execução. Isso significa que o novo conteúdo está disponível de forma proativa, para que seus usuários possam começar a mergulhar nele imediatamente, quando quiserem.Estado sincronizado na nuvem #
Ao mesmo tempo, minhas assinaturas são sincronizadas em todos os dispositivos que possuo. Em um mundo perfeito, não preciso me preocupar em manter sincronizadas as assinaturas de podcast manualmente. Da mesma forma, não preciso ter medo de que a memória do meu dispositivo móvel seja consumida por episódios que já ouvi em meu desktop e vice-versa. O estado de reprodução é mantido em sincronia e os episódios ouvidos são excluídos automaticamente.
Como fazer isso na web
Sincronizar dados de estado do aplicativo é uma tarefa que você pode delegar à API Background Sync. A operação de sincronização em si não precisa acontecer imediatamente, apenas eventualmente, e talvez até mesmo quando o usuário já tiver fechado o aplicativo novamente.Principais controles de mídia de hardware #
Quando estou ocupado com outro aplicativo, digamos, lendo uma página de notícias no navegador Chrome, ainda posso controlar o aplicativo Podcasts com as teclas de mídia do meu laptop. Não há necessidade de alternar para o aplicativo apenas para avançar ou retroceder.
Como fazer isso na web
As teclas de mídia são suportadas pela API de sessão de mídia. Assim, os usuários podem usar as teclas de mídia de hardware em seus teclados físicos, fones de ouvido ou até mesmo controlar o aplicativo da web a com as teclas de mídia de software em seus smartwatches. Uma ideia adicional para suavizar as operações de busca é enviar um padrão de vibração quando o usuário estiver buscando uma parte significativa do conteúdo, por exemplo, passando os créditos de abertura ou o limite de um capítulo.Multitarefa e atalho de aplicativo #
É claro que sempre posso executar várias tarefas ao mesmo tempo no aplicativo Podcasts de qualquer lugar. O aplicativo tem um ícone claramente distinguível que também posso colocar na minha Mesa ou Dock de aplicativos para que os podcasts possam ser iniciados imediatamente, quando eu quiser.
Como fazer isso na web
Os Progressive Web Apps no desktop e no celular podem ser instalados na tela inicial, menu iniciar ou dock de aplicativo. A instalação pode acontecer com base em uma solicitação proativa ou totalmente controlada pelo desenvolvedor do aplicativo. O artigo O que é necessário para ser instalável? cobre tudo que você precisa saber. Durante a multitarefa, os PWAs aparecem independentemente do navegador.Ações rápidas no menu de contexto #
As ações mais comuns do aplicativo, Pesquisar por novo conteúdo e Verificar novos episódios , estão disponíveis diretamente no menu de contexto do aplicativo no Dock. Através do menu Opções , também posso decidir abrir o aplicativo no momento do login.
Como fazer isso na web
Ao especificar os atalhos do ícone do aplicativo no manifesto do aplicativo da web do PWA, você pode registrar rotas rápidas para tarefas comuns que os usuários podem acessar diretamente com o ícone do aplicativo. Em sistemas operacionais como o macOS, os usuários também podem clicar com o botão direito do mouse no ícone do aplicativo e configurá-lo para iniciar no momento do login. Há um trabalho em andamento em uma proposta para executar no login.Atuar como aplicativo padrão #
Outros aplicativos iOS e até mesmo sites ou e-mails podem se integrar ao aplicativo Podcasts, aproveitando o esquema de URL podcasts:// Se eu seguir um link como podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 enquanto estiver no navegador, sou levado diretamente para o aplicativo Podcasts e posso decidir se quero assinar ou ouvir o podcast.
Como fazer isso na web
Lidar com esquemas de URL totalmente personalizados ainda não é possível, mas há um trabalho em andamento em uma proposta para Manipulação de protocolo de URL para PWAs. Atualmente,registerProtocolHandler() com um web+ é a melhor alternativa.Integração do sistema de arquivos local #
Você pode não pensar nisso imediatamente, mas o aplicativo Podcasts se integra naturalmente ao sistema de arquivos local. Quando eu faço download de um episódio de podcast, no meu laptop ele é armazenado em ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. Ao contrário de, digamos, ~/Documents, esse diretório obviamente não deve ser acessado diretamente por usuários regulares, mas está lá. Outros mecanismos de armazenamento além dos arquivos são mencionados na seção de conteúdo offline.
Como fazer isso na web
A API de acesso ao sistema de arquivos permite que os desenvolvedores tenham acesso ao sistema de arquivos local do dispositivo. Você pode usá-lo diretamente ou por meio da biblioteca de suporte browser-fs-access, que fornece uma alternativa transparente para navegadores que não oferecem suporte à API. Por motivos de segurança, os diretórios do sistema não são acessíveis pela web.Aparência e comportamento da plataforma #
Existe uma coisa mais sutil que é evidente para um aplicativo iOS como Podcasts: nenhum dos rótulos de texto é selecionável e todo o texto se mistura com a fonte do sistema da máquina. Além disso, minha opção para o tema de cores do sistema (modo escuro) é respeitada.
Como fazer isso na web
Aproveitando auser-select pelo usuário com o valor none , você pode proteger os elementos da IU de serem selecionados acidentalmente. No entanto, certifique-se de não abusar dessa propriedade para tornar o conteúdo do aplicativo não selecionável. Isso deve ser usado apenas para elementos da IU, como textos de botão etc. O system-ui para a font-family permite que você especifique a fonte da IU padrão do sistema a ser usada para seu aplicativo. Finalmente, seu aplicativo pode obedecer à preferência de esquema de cores do usuário, respeitando a preferênciaprefers-color-scheme com uma chave alternante para modo escuro opcional para substituí-la. Outra coisa a se decidir pode ser o que o navegador deve fazer ao atingir o limite de uma área de rolagem, por exemplo, para implementar puxar personalizado para atualizar. Isso é possível com a propriedade CSS de overscroll-behaviorBarra de título personalizada #
Ao olhar para a janela do aplicativo Podcasts, você percebe que ela não possui uma barra de título e uma barra de ferramentas integradas clássicas, como, por exemplo, a janela do navegador Safari, mas sim uma experiência personalizada que se parece com uma barra lateral encaixada na janela do player principal.
Como fazer isso na web
Embora não seja possível no momento, a personalização da barra de título está sendo trabalhada no momento. Você pode (e deve), no entanto, especificar adisplay e as theme-color do tema do manifesto do aplicativo da web para determinar a aparência e comportamento da janela do seu aplicativo e para decidir quais controles padrão do navegador - potencialmente nenhum deles - devem ser mostrados.Animações rápidas #
As animações no aplicativo são rápidas e suaves em podcasts. Por exemplo, quando abro a gaveta Notas de Episódio à direita, ela desliza elegantemente para dentro. Quando eu removo um episódio de meus downloads, os episódios restantes flutuam e consomem o espaço da tela que foi liberado pelo episódio excluído.
Como fazer isso na web
Animações performáticas na web certamente são possíveis se você levar em consideração uma série de práticas recomendadas descritas no artigo Animações e desempenho. As animações de rolagem normalmente vistas em conteúdo paginado ou carrosséis de mídia podem ser bastante aprimoradas usando o recursoCSS Scroll Snap. Para ter controle total, você pode usar a API Web Animations.Conteúdo que aparece fora do aplicativo #
O aplicativo Podcasts no iOS pode exibir conteúdo em outros locais que não o aplicativo real, por exemplo, na exibição de Widgets do sistema ou na forma de uma sugestão de Siri. Ter chamadas à ação proativas baseadas no uso que requerem apenas um toque para interagir pode aumentar muito a taxa de novos engajamentos de um aplicativo como o Podcasts.
Como fazer isso na web
A API de índice de conteúdo permite que seu aplicativo informe ao navegador qual conteúdo do PWA está disponível offline. Isso permite que o navegador exiba esse conteúdo fora do aplicativo principal. Marcando conteúdo interessante em seu aplicativo como adequado para reprodução de áudio falável e usando marcação estruturada em geral, você pode ajudar mecanismos de pesquisa e assistentes virtuais como o Google Assistant a apresentar suas ofertas em uma apresentação ideal.Widget de controle de mídia da tela de bloqueio #
Quando um episódio de podcast está sendo reproduzido, o aplicativo Podcasts mostra um belo widget de controle na tela de bloqueio que apresenta metadados como a capa do episódio, o título do episódio e o nome do podcast.
Como fazer isso na web
A API de sessão de mídia permite que você especifique metadados como arte, títulos de faixas etc. que são exibidos na tela de bloqueio, smartwatches ou outros widgets de mídia no navegador.Notificações via push #
As notificações push se tornaram um pouco incômodas na web (embora os prompts de notificação estejam muito mais silenciosos agora). Mas, se usados corretamente, eles podem agregar muito valor. Por exemplo, o aplicativo iOS Podcasts pode, opcionalmente, me notificar sobre novos episódios de podcasts nos quais estou inscrito ou recomendar novos, bem como me alertar sobre novos recursos do aplicativo.
Como fazer isso na web
A API Push permite que seu aplicativo receba notificações push para que você possa notificar seus usuários sobre eventos importantes sobre seu PWA. Para notificações que devem ser disparadas em um momento conhecido no futuro e que não requerem uma conexão de rede, você pode usar a API Notification Triggers.Emblema do ícone do app #
Sempre que houver novos episódios disponíveis de um dos podcasts em que estiver inscrito, um emblema do ícone do aplicativo no ícone da tela inicial do Podcasts aparece, mais uma vez me encorajando a voltar a interagir com o aplicativo de uma forma que não seja intrusiva.
Como fazer isso na web
Você pode definir emblemas de ícones de aplicativos com a Badging API. Isso é especialmente útil quando seu PWA tem alguma noção de itens "não lidos" ou quando você precisa de um meio para chamar discretamente a atenção do usuário de volta para o aplicativo.A reprodução de mídia tem precedência sobre as configurações de economia de energia #
Quando a mídia de podcast está sendo reproduzida, a tela pode desligar, mas o sistema não entrará no modo de espera. Os aplicativos também podem manter a tela ativada, por exemplo, para exibir letras ou legendas.
Como fazer isso na web
A API Screen Wake Lock permite evitar que a tela desligue. A reprodução de mídia na web impede automaticamente que o sistema entre no modo de espera.Descoberta de aplicativos em uma loja de aplicativos #
Embora o aplicativo Podcasts faça parte da experiência de desktop do macOS, no iOS ele precisa ser instalado a partir da App Store. Uma busca rápida por podcast , podcasts ou apple podcasts transforma imediatamente o aplicativo na App Store.
Como fazer isso na web
Embora a Apple não permita PWAs na App Store, no Android, você pode enviar seu PWA como um wrap de uma Atividade da Web confiável. Obubblewrap amacia essa operação. Este script também é o que alimenta internamente o recurso de exportação de aplicativos Android do PWABuilder, que você pode usar sem mexer na linha de comando.Resumo sobre os recursos #
A tabela abaixo mostra uma visão geral compacta de todos os recursos e fornece uma lista de recursos úteis para realizá-los na web.
Conclusão #
Os PWAs já percorreram um longo caminho desde sua introdução em 2015. No contexto do Projeto Fugu 🐡, a equipe multiempresarial do Chromium está trabalhando para preencher as últimas lacunas restantes. Seguindo apenas alguns dos conselhos deste artigo, você pode chegar mais perto de oferecer uma sensação de app e fazer com que seus usuários esqueçam que estão lidando com "apenas um site", porque, sinceramente, a maioria deles não se preocupe como seu aplicativo é construído (e por que deveria?), contanto que pareça um aplicativo de verdade.
Agradecimentos #
Este artigo foi revisado por Kayce Basques , Joe Medley , Joshua Bell , Dion Almaer , Ade Oshineye , Pete LePage , Sam Thorogood , Reilly Grant e Jeffrey Yasskin.