Os atalhos de apps oferecem acesso rápido a algumas ações comuns que os usuários precisam com frequência.
Para melhorar a produtividade dos usuários e facilitar o reengajamento com tarefas essenciais, a plataforma da Web agora oferece suporte a atalhos de apps. Elas permitem que os desenvolvedores Web forneçam acesso rápido a várias ações comuns que os usuários precisam com frequência.
Este artigo vai ensinar você a definir atalhos de apps. Além disso, você aprenderá algumas práticas recomendadas associadas.
Sobre os atalhos de apps
Os atalhos de apps ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas no seu app da Web. O acesso fácil a essas tarefas em qualquer lugar em que o ícone do app é exibido melhora a produtividade dos usuários e aumenta o engajamento deles com o app da Web.
Para invocar o menu de atalhos de apps, clique com o botão direito do mouse no ícone do app na barra de tarefas (Windows) ou na base (macOS) na área de trabalho do usuário. Outra opção é tocar e pressionar o ícone do app na tela de início no Android.
O menu de atalhos de apps é exibido apenas para Progressive Web Apps instalados no computador ou dispositivo móvel do usuário. Confira Instalação no módulo "Conheça o PWA" para saber mais sobre os requisitos de instalação.
Cada atalho de app expressa uma intent do usuário, e cada uma delas é associada a um URL no escopo do app da Web. O URL é aberto quando um usuário ativa o atalho. Confira alguns exemplos de atalhos de apps:
- Itens de navegação de nível superior (por exemplo, página inicial, linha do tempo, pedidos recentes)
- Pesquisar
- Tarefas de entrada de dados (por exemplo, escrever um e-mail ou tweet, adicionar um comprovante)
- Atividades (por exemplo, iniciar um chat com os contatos mais conhecidos)
Definir atalhos de apps no manifesto do app da Web
Os atalhos de apps são definidos opcionalmente no manifesto do app da Web, um arquivo JSON que
informa o navegador sobre seu app da Web e como ele vai se comportar quando
instalado no computador ou dispositivo móvel do usuário. Mais especificamente, eles são
declarados no membro da matriz shortcuts. Abaixo está um
exemplo de um possível manifesto de app da Web.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
…
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
Cada membro da matriz shortcuts é um dicionário que contém pelo menos um
name e um url. Outros participantes são opcionais.
name- O rótulo legível do atalho do app quando exibido para o usuário.
short_name(opcional)- O rótulo legível usado quando o espaço é limitado. É recomendável fornecê-lo, mesmo que seja opcional.
description(opcional)- A finalidade legível do atalho do app. Ela não é usada no momento da redação deste texto, mas pode ser exposta a tecnologia adaptativa no futuro.
url- O URL aberto quando um usuário ativa o atalho de app. Esse URL precisa existir no escopo do manifesto do app da Web. Se for um URL relativo, o URL base será o URL do manifesto do app da Web.
icons(opcional)Uma matriz de objetos de recurso de imagem. Cada objeto precisa incluir as propriedades
srcesizes. Ao contrário dos ícones de manifesto do app da Web, otypeda imagem é opcional. Arquivos SVG não são aceitos no momento em que este artigo foi escrito. Use PNG.Se você quiser ícones de pixel perfeitos, forneça-os em incrementos de 48 dp (ou seja, ícones de 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 pixels). Caso contrário, recomendamos usar um único ícone de 192 x 192 pixels.
Como medida de qualidade, os ícones precisam ter pelo menos metade do tamanho ideal do dispositivo no Android, que é de 48 dp. Por exemplo, para ser exibido em uma tela xxhdpi, o ícone precisa ter pelo menos 72 x 72 pixels. Isso é derivado da fórmula para converter unidades de dp para unidades de pixel.
Testar os atalhos de apps
Para verificar se os atalhos do app estão configurados corretamente, use o painel Manifest no painel Application do DevTools.
Esse painel oferece uma versão legível por humanos de muitas das propriedades do manifesto, incluindo atalhos de apps. Ele facilita a verificação se todos os ícones de atalho, se fornecidos, estão sendo carregados corretamente.
Os atalhos de apps podem não estar disponíveis imediatamente para todos os usuários porque as atualizações do App Web Progressivo são limitadas a uma vez por dia. Saiba mais sobre como o Chrome gerencia atualizações no manifesto do app da Web.
Práticas recomendadas
Ordenar atalhos de apps por prioridade
Os atalhos são mostrados na ordem em que você os define no manifesto. É recomendável ordenar os atalhos de apps por prioridade, porque o limite no número de atalhos mostrados varia de acordo com a plataforma. O Chrome e o Edge no Windows, por exemplo, limitam o número de atalhos de apps a 10, enquanto o Chrome para Android exibe apenas 3. Antes do Chrome 92 para Android 7, quatro eram permitidos. O Chrome 92 adicionou um atalho para as configurações do site, usando um dos slots de atalho disponíveis para o app.
Usar nomes diferentes para os atalhos de apps
Não dependa dos ícones para diferenciar os atalhos de apps, porque eles nem sempre ficam visíveis. Por exemplo, o macOS não oferece suporte a ícones no menu de atalhos da base. Use nomes diferentes para cada atalho de app.
Medir o uso de atalhos de apps
Anote as entradas url dos atalhos de apps como você faria com start_url para fins de análise (por exemplo, url:
"/my-shortcut?utm_source=homescreen").
Suporte ao navegador
Os atalhos de apps estão disponíveis nas plataformas e versões abaixo.
Suporte à Atividade Confiável na Web
O Bubblewrap, a ferramenta recomendada para criar apps Android que usam a Atividade confiável na Web, lê atalhos de apps do manifesto do app da Web e gera automaticamente a configuração correspondente para o app Android. Os ícones para atalhos de apps são obrigatórios e precisam ter pelo menos 96 por 96 pixels no balão.
O PWABuilder, uma ótima ferramenta para transformar facilmente um App Web Progressivo em uma Atividade na Web Confiável, oferece suporte a atalhos de apps com algumas advertências.
Para desenvolvedores que integram a Atividade na Web Confiável manualmente ao app Android, os atalhos de apps podem ser usados para implementar os mesmos comportamentos.
Exemplo
Confira o exemplo de atalhos de apps e a fonte.
Links úteis
- MDN (em inglês)
- Especificações
- Exemplo de atalhos de apps | Exemplo de origem de atalhos de apps
- Componente Blink:
UI>Browser>WebAppInstalls