PWAs avançados

Embora alguns recursos de PWA sejam conhecidos, como a API Notifications, que permite que um web app receba e publique notificações da plataforma, há vários recursos novos e futuros que estão chegando à Web para turbinar seus apps. O projeto de recursos da Web do Chromium, também conhecido como Projeto Fugu 🐡, é uma iniciativa para ativar padrões da Web novos e avançados, preservando o que torna a Web única: segurança centrada no usuário, baixa fricção e compatibilidade entre plataformas.

Observação:esses recursos estão em vários estados de conclusão, desde em consideração até enviados. Este documento se concentra em recursos que funcionam em computadores. Embora os usuários do ChromeOS provavelmente recebam recursos direcionados para computadores assim que eles forem disponibilizados, o suporte multiplataforma, mesmo o suporte estável no ChromeOS, às vezes pode ser um processo de vários anos. Confira o rastreador de recursos para informações mais precisas sobre os lançamentos.

Como acabar com a falta de apps

A maioria dessas funcionalidades foi criada para diminuir a distância entre apps tradicionais para computador ou dispositivos móveis e apps da Web. As primeiras funcionalidades importantes a serem lançadas permitem que os apps da Web acessem os seletores de contatos e as funcionalidades de compartilhamento da plataforma. Além disso, os PWAs instalados podem se registrar como um destino de compartilhamento da plataforma e mostrar ícones de notificações, entre outros.

Cada recurso passa por um extenso processo de padronização para solicitar feedback da comunidade e ajudar a moldar a API, garantindo que o design final seja seguro, privado e confiável. As novas funcionalidades são rastreadas em um rastreador aberto e podem ser divididas em uma de cinco categorias:

ENVIADO

Disponível para uso na versão estável mais recente do Chrome. Pode ser usado de forma confiável, desde que o uso seja detectado corretamente.

NA VERSÃO DE TESTE DE ORIGEM

Disponível como um teste de origem (TO) do Chrome, permitindo que recursos e APIs experimentais sejam validados pela equipe do Chrome em uso no mundo real e que você envie feedback sobre a usabilidade e a eficácia da API. As OTs são opcionais e permitem que você teste a funcionalidade com seus usuários sem que eles precisem ativar flags especiais no navegador. As APIs podem mudar após um OT, e os OTs não estarão disponíveis por um período antes do lançamento. Portanto, eles não devem ser tratados como um mecanismo de lançamento antecipado para novas APIs.

NA VERSÃO DE TESTE PARA DESENVOLVEDORES

Disponível por trás de uma flag no Chrome. Essas APIs são experimentais e ainda estão em desenvolvimento. Elas não estão prontas para uso em produção, e há uma boa chance de que haja bugs e que as APIs mudem. Embora os desenvolvedores possam usar esse tempo para testar recursos experimentais por conta própria, eles não devem instruir os usuários a ativar flags para usar os recursos.

INÍCIO:

O desenvolvimento começou, mas ainda não há uma API utilizável.

EM ANÁLISE

APIs em que os usuários demonstraram interesse, mas a implementação ainda não começou. Se uma API ainda não tiver sido iniciada, marque-a com uma estrela ou adicione seus casos de uso ao problema dela para ajudar a equipe do Chromium a priorizar.

Aprimorar seu PWA

Ao criar seu PWA, considere implementar as seguintes APIs e práticas recomendadas para melhorar muito a aparência do seu web app. Dividido por caso de uso geral, seu app pode se beneficiar de uma ou mais APIs para melhorar a experiência geral do usuário. As APIs marcadas com 🔮 estão em teste de origem, as marcadas com 🚩 estão em teste para desenvolvedores, as marcadas com 📱 estão estáveis em dispositivos móveis e as implementações para computador já começaram. Todas as outras APIs mencionadas estão estáveis, mas talvez não estejam disponíveis em todas as plataformas. Somente as APIs disponíveis nas versões estáveis, Beta (marcadas com β) ou Canary (marcadas com α) atuais do Chrome estão incluídas. Essa lista é atualizada regularmente para refletir as APIs lançadas.

Instalação de apps

Se você quiser que seu web app esteja disponível ao lado de outros apps instalados, como na barra de tarefas, no iniciador, na área de trabalho e no alternador de apps, implemente as APIs a seguir para que seu PWA seja instalável. Opcionalmente, siga este codelab.

• Manifesto do app da Web: fornece informações sobre o app da Web ao navegador e ao sistema operacional, como nome, logotipo, URL para iniciar o app e como exibir o app da Web.
• Service Workers e API Cache Storage: permitem que seu app da Web crie um servidor proxy e controle como o cache do navegador é processado. Um service worker que reage a um evento fetch do navegador e pode responder a uma solicitação de busca do URL de inicialização especificado no manifesto do app da Web com conteúdo quando o modo off-line é um requisito para instalação.
• Executar ao fazer login 🚩β: permite configurar o PWA para iniciar automaticamente quando o usuário faz login.
• Atalhos do ícone do app: ofereça atalhos para URLs específicos com seu web app (por exemplo, iniciar uma conversa, fazer upload de uma foto etc.) no menu de contexto do ícone do app instalado (ou seja, toque e mantenha pressionado em dispositivos móveis, clique com o botão direito do mouse em computadores) em plataformas compatíveis.
• getInstalledRelatedApps: permite que seu app da Web verifique se o PWA, o app Android ou o app Windows (UWP) já foi instalado.

Adaptável e acessível

Se você quer que seu web app seja usado por usuários com dispositivos diferentes e necessidades físicas e/ou mentais diferentes, considere implementar o seguinte:

• Design responsivo: garanta que seu web app ofereça uma experiência utilizável, ou pelo menos não quebrada, para tamanhos de tela pequenos e grandes, permitindo que usuários de diferentes dispositivos e posicionamentos de janela usem seu app.
• Diretrizes da WCAG 2.0: garanta que seu web app possa ser usado por pessoas com um espectro de habilidades físicas e mentais, não apenas indivíduos neurotípicos e sem deficiência. Consulte também as recomendações do governo do Reino Unido sobre como criar projetos para acessibilidade.

Monetização e distribuição

• Pagamentos na Web: interface padrão e flexível para pagamentos on-line criada para funcionar em qualquer navegador ou dispositivo e com qualquer provedor de serviços de pagamento ou pagamento.
• API Digital Goods 🔮: interface flexível e padrão para consultar e gerenciar compras no app de aplicativos da Web, incluindo suporte a tipos de compras comuns, como compras únicas, compras recorrentes (como gemas/moedas no jogo) e assinaturas. Funciona em conjunto com os pagamentos na Web.
• Atividade Confiável na Web: crie um app Android para seu PWA para que ele possa ser listado para download em lojas compatíveis, como o Google Play.

Acesso à área de transferência

• Área de transferência assíncrona: lê e grava textos e imagens na área de transferência do usuário e detecta eventos de copiar e colar.

Notificações

Se o web app precisar notificar os usuários, por exemplo, um app de chat ou uma codificação em segundo plano em andamento, considere implementar as seguintes APIs:

• Notificações push na Web: depois que um usuário ativa esse recurso, seu web app pode enviar notificações para ele.
• API Badging: permite que seu web app instalado defina um selo em todo o aplicativo no ícone do app, opcionalmente com um número.
• Gatilhos de notificação 🔮: envie notificações aos usuários quando uma condição de acionamento for atendida, por exemplo, com base em tempo ou localização (como notificações de eventos do Google Agenda).

Compartilhamento de intents e tratamento de protocolos

• Registro de protocolo de URL 🚩α: permite que aplicativos da Web se registrem como gerenciadores de protocolos/esquemas de URL personalizados usando o manifesto de instalação.
• Compartilhamento na Web: use a interface de compartilhamento do sistema integrada em dispositivos compatíveis para compartilhar URLs, textos e arquivos com outros apps instalados no dispositivo. Seu app não precisa ser instalado.
• Destino de compartilhamento da Web: disponibilize seu PWA instalado na interface de compartilhamento integrada do sistema em dispositivos compatíveis para permitir que os usuários compartilhem texto e arquivos com seu app de outros apps.

Abrir e salvar arquivos

• API File Handling 🚩: faça com que seu web app instalado registre no sistema operacional a capacidade de processar (ler/transmitir/editar) arquivos com determinados tipos MIME e/ou extensões de arquivo. Assim, por exemplo, ele pode ser uma opção na lista "Abrir com aplicativo…" de um menu de contexto.
• API File System Access: acesso robusto ao sistema de arquivos do usuário por sessão, permitindo as seguintes interações (conforme necessário para seu app):
  • Ler arquivos do sistema de arquivos local: mostra um seletor de arquivos e permite que um usuário escolha um ou, opcionalmente, vários arquivos para abrir, incluindo a limitação dos tipos de arquivos permitidos por tipo MIME e extensão.
  • Salvar alterações no arquivo aberto: salva as mudanças feitas em um arquivo aberto com o FSA diretamente, sem pedir que o usuário escolha onde salvar o arquivo ou baixe uma cópia.
  • Criar um novo arquivo no sistema de arquivos local: permite que um usuário crie um arquivo, opcionalmente com extensão padrão, no sistema de arquivos local, que seu app pode acessar para salvar.
  • Arquivos abertos recentemente: os manipuladores de arquivos criados com a FSA podem ser armazenados no IndexedDB, permitindo que você mostre uma lista de arquivos usados recentemente entre sessões de usuários. No entanto, as permissões de edição ainda não são mantidas entre as sessões.
  • Ler, gravar e manipular um diretório: permite que um usuário escolha um diretório no sistema de arquivos local para que o app leia o conteúdo, crie, leia e exclua arquivos e subdiretórios e determine o caminho relativo do arquivo.
• Fluxos de compactação: compacte ou descompacte usando os algoritmos de compactação gzip e deflate.

Gerenciamento de janelas

• API Fullscreen: permite que um usuário faça com que um elemento no seu app da Web, por exemplo, um vídeo, ocupe toda a tela.
• API Cross-Screen Window Placement 🔮: permite que seu web app receba informações sobre telas conectadas e posicione janelas em relação a elas, permitindo web apps com várias janelas e telas.
• Modo de exibição de aplicativo com guias 🚩: permite que seu web app instalado seja exibido em uma ou mais guias, não apenas em uma única janela.

Integração mais direta com o SO

• API Local Fonts 🔮: permite que seu app da Web liste fontes instaladas localmente e solicite acesso de baixo nível (orientado a bytes) ao contêiner SFNT, que inclui todos os dados da fonte. Assim, seu app pode renderizar fontes instaladas localmente de maneira personalizada.
• Wake Lock: permite que seu web app impeça que uma tela entre em suspensão, permitindo que ele execute tarefas de longa duração sem medo de interrupção (por exemplo, transcodificação de arquivos ou manter uma receita aberta enquanto cozinha).
• Detecção de inatividade 🔮: permite que seu web app detecte quando o usuário não está usando o dispositivo ativamente.

Suporte off-line expandido

Se você quiser que seu app da Web funcione ainda melhor off-line, considere implementar as seguintes APIs:

• Sincronização em segundo plano: quando estiver off-line, coloque na fila as solicitações que precisam de uma conexão e sincronize os dados do seu web app em segundo plano quando a rede estiver disponível, em vez de não processar as solicitações off-line. Por exemplo, permitir que as mensagens sejam enviadas ou que as mudanças incrementais em um documento sejam sincronizadas quando você voltar a ficar on-line.
• Sincronização periódica em segundo plano: permite que o service worker do seu app da Web instalado e usado com frequência seja ativado periodicamente, com base em um período mínimo de tempo, e executado, por exemplo, para atualizar um cache, permitindo que o conteúdo esteja atualizado quando um usuário abrir o app.
• API Content Indexing: permite que seu web app informe ao navegador qual conteúdo está disponível off-line para que ele possa ser mostrado aos usuários.
• Busca em segundo plano: permite buscas em segundo plano de longa duração, como o download de filmes ou o envio de vídeos e imagens, sem o risco de o service worker ser encerrado.

Streaming, codificação e decodificação de mídia

Se o web app reproduzir arquivos de mídia, como arquivos de vídeo ou áudio, considere implementar as seguintes APIs:

• Streaming adaptável: permite que os streams de vídeo alternem entre taxas de bits com base no desempenho da rede.
• Picture-in-picture: permite que um usuário abra o vídeo do seu app da Web em uma janela sempre aberta, que pode ser movida e redimensionada de forma independente.
• API Media Session: permite que um usuário controle a reprodução de mídia do seu web app usando hardware e funcionalidades de software no nível do SO (como botões de reproduzir/pausar/parar em teclados ou telas de bloqueio), além de controlar notificações de mídia no nível do SO (como título, artista, álbum e arte da capa).
• API Chromecast: permite que um usuário transmita mídia para um receptor Chromecast disponível, por exemplo, para reproduzir um vídeo do seu web app na TV.
• Web Codecs 🔮: acesso a codificadores e decodificadores de mídia de hardware e software integrados, úteis para casos de uso em tempo real, como transmissões ao vivo de baixa latência e codificação, decodificação e transcodificação de arquivos.

Suporte expandido para entrada

• Eventos de ponteiro: reaja a eventos de toque, stylus e mouse usando uma única API, permitindo mais opções de entrada para seus usuários. Consulte também as práticas recomendadas para interfaces de usuário compatíveis com toque e entrada e controles do usuário.
• API Gamepad: permite que seu app da Web responda a entradas de gamepads comuns.
• Web HID 🚩: permite que seu app da Web acesse dispositivos de interface humana não padrão, como controladores personalizados.

Suporte avançado para periféricos

• Web USB: permite que seu web app acesse dispositivos USB não padrão (ou seja, teclados e mouses) do seu app.
• API Serial 🔮: adiciona uma API para comunicação com dispositivos de hardware por uma porta serial física ou virtual.

Sua lista de verificação de PWA

Tudo pronto para começar a melhorar seu PWA com essas novas APIs eficientes? Escolha um dos casos de uso abaixo para conferir um conjunto recomendado de APIs ou crie sua própria lista de verificação e trabalhe para concluí-la.