Realize tarefas rapidamente com os atalhos de apps

Os atalhos de apps oferecem acesso rápido a algumas ações comuns que os usuários precisam com frequência.

François Beaufort

Jungkee Song

Para melhorar a experiência do usuário produtividade e facilitar o reengajamento com tarefas-chave, plataforma da web agora oferece suporte a atalhos de aplicativos. Elas permitem que os desenvolvedores da Web forneç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 apps ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas no seu app da Web. O fácil acesso a essas tarefas em qualquer lugar onde o ícone do aplicativo é exibido melhorar a experiência dos usuários produtividade, bem como aumentar seu envolvimento com a Web app.

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 dock (macOS) na área de trabalho do usuário, ou as funções segurando ícone na tela de início no Android.

O menu de atalhos é exibido somente para Progressive Web Apps que sejam instalado no computador ou dispositivo móvel do usuário. Confira Instalação em nosso "Learn PWA" para saber mais sobre os requisitos de instalação.

Cada atalho de app expressa uma intent do usuário, e cada uma delas está associada a uma 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 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 ao navegador sobre seu aplicativo da web e como ele deve se comportar ao instalado no computador ou dispositivo móvel do usuário. Mais especificamente, eles são declarado 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 ao usuário.

short_name (opcional)

O rótulo legível usado quando o espaço é limitado. É recomendado que você os forneça, mesmo que seja opcional.

description (opcional)

A finalidade legível do atalho do app. Não é usado no momento da redação deste texto, mas pode ser exposto a tecnologia assistiva no futuro.

url

O URL aberto quando um usuário ativa o app atalho. 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 Inclua as propriedades src e sizes. Ao contrário dos ícones de manifesto de app da Web, a type da imagem é opcional. Arquivos SVG não são aceitos no momento em que este artigo foi escrito. Use PNG.

Se quiser ícones de pixel perfeitos, forneça-os em incrementos de 48 dp (ou seja, 36 x 36, ícones de 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 pixels). Caso contrário, é recomendável use um único ícone de 192 x 192 pixels.

Como medida de qualidade, os ícones precisam ter pelo menos metade do tamanho ideal do dispositivo em Android, que é de 48 dp. Por exemplo, para exibir em uma tela xxhdpi, o ícone precisa ter pelo menos 72 por 72 pixels. Isso é derivado da fórmula para conversão de unidades de 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 na Painel Application do DevTools.

Esse painel oferece uma versão legível por humanos de muitos dos propriedades, incluindo atalhos de apps. Assim, fica fácil verificar se todos ícones de atalho, se fornecidos, estão sendo carregados corretamente.

Os atalhos de aplicativos podem não estar disponíveis imediatamente para todos os usuários porque a versão As atualizações de apps da Web são limitadas a uma vez por dia. Saiba mais sobre como o Chrome lida com 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. Encorajamos você a ordenar os atalhos de apps por prioridade, porque o limite na o número de atalhos de apps mostrados varia de acordo com a plataforma. Chrome e Edge ativados O Windows, por exemplo, limita o número de atalhos de aplicativos a 10, enquanto o Chrome para A tela do Android é a 3. Antes do Chrome 92 para Android 7, quatro eram permitidos. Google Chrome 92 adicionou um atalho para as configurações do site, usando um dos atalhos disponíveis para o app.

Usar nomes diferentes para os atalhos de apps

Não dependa dos ícones para diferenciar atalhos de apps, porque eles podem não ser fiquem sempre visíveis. Por exemplo, o macOS não oferece suporte a ícones na base no menu de atalhos de teclado. 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

Bolha, a ferramenta recomendada para criar apps Android que usam Web confiável Activity, lê atalhos de apps do manifesto do app da Web e automaticamente gera a configuração correspondente para o app Android. Observe que os ícones para atalhos de apps são obrigatórios e precisam ter pelo menos 96 x 96 pixels Bolha

PWABuilder, uma ótima ferramenta para transformar facilmente um Progressive Web App em um A Atividade na Web, oferece suporte a atalhos de apps com algumas advertências.

Para desenvolvedores que integram a Atividade Confiável na Web manualmente ao Android aplicativo, os atalhos de apps Android podem ser usados para implementar a mesma o comportamento dos modelos.

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