Os atalhos de app 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 importantes, a plataforma da Web agora oferece suporte a atalhos de apps. Eles permitem que desenvolvedores da Web ofereçam acesso rápido a algumas 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ê vai aprender algumas práticas recomendadas associadas.
Sobre os atalhos de apps
Os atalhos de app ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas no app da Web. O acesso fácil a essas tarefas de qualquer lugar em que o ícone do app seja exibido aumenta a produtividade dos usuários e aumenta o engajamento deles com o app da Web.
O menu de atalhos do app é invocado clicando com o botão direito do mouse no ícone do app na barra de tarefas (Windows) ou no dock (macOS) na área de trabalho do usuário ou tocando e mantendo o ícone do acesso rápido ao app no Android.
O menu de atalhos do app é mostrado apenas para Progressive Web Apps instalados no dispositivo móvel ou desktop do usuário. Confira a instalação no nosso módulo "Aprenda sobre 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 de pagamento)
- Atividades (por exemplo, iniciar um chat com os contatos mais populares)
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 ao navegador sobre o app da Web e como ele se comporta 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 membros são opcionais.
name- O rótulo legível para humanos do atalho do app quando exibido ao usuário.
short_name(opcional)- O rótulo legível usado quando o espaço é limitado. É recomendável fornecer essa informação, mesmo que seja opcional.
description(opcional)- A finalidade legível para humanos do atalho do app. Ele não é usado no momento da escrita, mas pode ser exposto a tecnologias acessíveis no futuro.
url- O URL aberto quando um usuário ativa o atalho do 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 recursos de imagem. Cada objeto precisa incluir
srce uma propriedadesizes. Ao contrário dos ícones do manifesto do app da Web, otypeda imagem é opcional. Os arquivos SVG não são compatíveis no momento da escrita. Use PNG.Se você quiser ícones 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, é recomendável 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 exibir em uma tela xxhdpi, o ícone precisa ter pelo menos 72 x 72 pixels. Isso é derivado da fórmula para converter unidades de dp em unidades de pixel.
Testar os atalhos do app
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. Isso facilita a verificação de que todos os ícones de atalho, se fornecidos, estão sendo carregados corretamente.
Os atalhos de app podem não estar disponíveis imediatamente para todos os usuários, porque as atualizações do Progressive Web App são limitadas a uma vez por dia. Saiba mais sobre como o Chrome processa as atualizações do manifesto do app da Web.
Práticas recomendadas
Ordenar os atalhos de apps por prioridade
Os atalhos são mostrados na ordem em que você os define no manifesto. Recomendamos que você organize os atalhos de apps por prioridade, porque o limite do número de atalhos exibidos 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 três. Antes do Chrome 92 para Android 7, eram permitidos 4. O Chrome 92 adicionou um atalho às configurações do site, usando um dos slots de atalho disponíveis para o app.
Usar nomes de atalho de apps distintos
Não confie em ícones para diferenciar os atalhos de apps, porque eles nem sempre estão visíveis. Por exemplo, o macOS não oferece suporte a ícones no menu de atalhos da base. Use nomes distintos para cada atalho de app.
Medir o uso de atalhos de apps
Você precisa anotar as entradas url de atalhos de apps como 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 listadas abaixo.
Suporte à Atividade Confiável na Web
O Bubblewrap, a ferramenta recomendada para criar apps Android que usam a Trusted Web Activity, lê os 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 x 96 pixels no Bubblewrap.
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
- Especificações
- Exemplo de atalhos de apps | Origem do exemplo de atalhos de apps
- Componente do Blink:
UI>Browser>WebAppInstalls