Definir atalhos do aplicativo (menus de pressionamento longo ou clique com o botão direito do mouse)

Os atalhos de aplicativos permitem que os usuários realizem tarefas comuns com mais rapidez e facilidade e podem aumentar seu envolvimento com um aplicativo.

Em dispositivos móveis, os atalhos geralmente podem ser acessados pressionando longamente um ícone de aplicativo. No Windows, os atalhos são integrados como Listas de Atalhos. As listas de atalhos definem menus pop-up que aparecem quando você clica com o botão direito do mouse em um bloco no menu Iniciar ou com o botão direito em um ícone na barra de tarefas.

Atalhos no Microsoft Edge, no iOS:

Atalhos no Microsoft Edge no iOS

Uma lista de atalhos (menu do botão direito) no aplicativo Webboard, no Windows:

Uma lista de atalhos no aplicativo Webboard no Windows

Os PWAs (Aplicativos Web Progressivos) também podem definir tarefas comuns como atalhos no manifesto do aplicativo Web. Consulte Expor ações comuns de aplicativos como atalhos no MDN > Referências > Aplicativos Web > progressivos Como fazer.

Definir atalhos

A definição de atalhos é feita usando o membro manifesto shortcuts . Esse membro é uma matriz que pode conter vários atalhos. Cada atalho é essencialmente um URL que é solicitado quando o atalho é usado e o aplicativo é iniciado.

{
    "shortcuts" : [
        {
            "name": "Today's agenda",
            "url": "/today",
            "description": "List of events planned for today"
        },
        {
            "name": "New event",
            "url": "/create/event"
        },
        {
            "name": "New reminder",
            "url": "/create/reminder"
        }
    ]
}

As seguintes propriedades podem ser usadas:

Propriedade Detalhes
name Uma cadeia de caracteres que é exibida para o usuário em Listas de atalhos ou no menu de contexto.
short_name Uma cadeia de caracteres que é exibida quando não há espaço suficiente para exibir o nome completo do atalho.
description Uma cadeia de caracteres que descreve a finalidade do atalho. A cadeia de caracteres pode ser acessada por tecnologia adaptativa.
url O URI no aplicativo Web que é aberto quando o atalho é ativado.
icons Um conjunto de ícones que representa o atalho.

Para saber mais, consulte atalhos no MDN.

Atalhos de depuração

Você pode testar se os atalhos estão configurados corretamente usando o painel Aplicativo do DevTools.

Para testar se os atalhos estão configurados corretamente:

  1. No Microsoft Edge, acesse seu aplicativo.

  2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

  3. No DevTools, na barra de ferramentas principal, selecione a guia Aplicativo . Se essa guia não estiver visível, clique no botão Mais guias (ícone Mais guias) ou no botão Mais Ferramentas (ícone Mais ferramentas).

  4. Na ferramenta Aplicativo , selecione Manifesto.

  5. Role para baixo para revelar a lista de atalhos.

    Os atalhos são listados no painel do aplicativo

Para saber mais sobre como usar o painel Aplicativo para depurar PWAs, consulte Depurar um PWA (Aplicativo Web Progressivo).

Confira também

  • Last updated on