Os atalhos de apps dão 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 os desenvolvedores da Web forneçam acesso rápido a algumas ações comuns das quais os usuários precisam com frequência.
Este artigo ensina como definir atalhos de apps. Além disso, você vai 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 app da Web. O acesso fácil a essas tarefas em qualquer lugar em que o ícone do app seja exibido melhora a produtividade dos usuários e aumenta o engajamento deles com o app da Web.
O menu de atalhos de apps é invocado clicando com o botão direito do mouse no ícone do app na barra de tarefas (Windows) ou dock (macOS) na área de trabalho do usuário, ou ao tocar e pressionar o ícone na tela de início do app no Android.
O menu de atalhos de apps é mostrado apenas para Progressive Web Apps instalados na área de trabalho ou no dispositivo móvel do usuário. Confira Instalação no módulo "Aprenda a usar o PWA" para conferir os requisitos de instalação.
Cada atalho do app expressa uma intent do usuário, cada uma associada a um URL no escopo do seu app da Web. O URL é aberto quando um usuário ativa o atalho do app. 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 procurados)
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 deve se comportar quando
instalado no computador ou no dispositivo móvel do usuário. Mais especificamente, elas são
declaradas no membro da matriz shortcuts. Veja abaixo 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. Os outros participantes são opcionais.
name- O rótulo legível por humanos do atalho do app quando exibido para o usuário.
short_name(opcional)- O rótulo legível por humanos usado quando o espaço é limitado. É recomendável fornecê-la, mesmo que seja opcional.
description(opcional)- A finalidade legível do atalho do app. Ele não é usado até o momento, mas pode ser exposto a tecnologia adaptativa 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 recurso de imagem. Cada objeto precisa incluir
srce uma propriedadesizes. Ao contrário dos ícones de manifesto do app da Web, otypeda imagem é opcional. Os arquivos SVG não eram compatíveis no momento da gravação. Use PNG.Se quiser ícones de pixels 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 ser exibido em uma tela xxhdpi, o ícone precisa ter pelo menos 72 por 72 pixels. Isso é derivado da fórmula para converter unidades dp para unidades de pixel.
Testar os atalhos de apps
Para verificar se os atalhos de apps estão configurados corretamente, use o painel Manifest no painel Application do DevTools.
Esse painel apresenta uma versão legível por humanos de muitas das propriedades do manifesto, incluindo atalhos de apps. Isso facilita a verificação de 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 Progressive Web App estão limitadas a uma vez por dia. Saiba mais sobre como o Chrome processa 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. Recomendamos 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 o 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 atalhos de app diferentes
Não dependa dos í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 diferentes para cada atalho de app.
Medir o uso de atalhos de apps
Anote as entradas url dos 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 confiável a atividades 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. Observe que os ícones de atalhos de apps são obrigatórios e precisam ter pelo menos 96 por 96 pixels no Bubblewrap.
O PWABuilder, uma ótima ferramenta para transformar facilmente um Progressive Web App em uma atividade confiável na Web, é compatível com atalhos de apps com algumas ressalvas.
Para desenvolvedores que integram manualmente a Atividade confiável na Web ao app Android, os atalhos de apps Android podem ser usados para implementar os mesmos comportamentos.
Exemplo
Confira o exemplo de atalhos de apps e a fonte dele (links em inglês).
Links úteis
- MDN (link em inglês)
- Especificações
- Exemplo de atalhos de apps | Fonte de exemplo de atalhos de apps
- Componente Blink:
UI>Browser>WebAppInstalls