Home Screen Quick Actions

Muita gente não conhece, mas tanto o iOS quanto o Android têm um recurso muito interessante que permite que o usuário acesse partes específicas de um aplicativo diretamente pelo ícone dele. Basta tocar e segurar o ícone de um aplicativo para que o sistema operacional mostre um menu de Quick Actions, permitindo ir direto para determinadas funcionalidades ou ações dentro do app.

As Home Screen Quick Actions foram introduzidas no iOS 9, em 2015, junto com o 3D Touch, enquanto o Android introduziu a API de App Shortcuts no Android 7.1, em 2016. Hoje, em ambas as plataformas, o usuário pode acessar essas ações tocando e segurando o ícone de um aplicativo.

Na minha opinião, prestar atenção nos pequenos detalhes é o que torna um produto digital realmente bom. Por isso, eu sempre fico feliz quando vejo desenvolvedores pensando na experiência do usuário como um todo, em vez de simplesmente fazer uma funcionalidade funcionar.

As Quick Actions são um ótimo exemplo disso. Elas podem tornar um aplicativo mais produtivo e muito mais fácil de usar, dando ao usuário uma forma rápida de acessar as ações que mais utiliza.

E em plataformas como o iPadOS, onde cada vez mais pessoas usam mouse ou trackpad, essas interações ficam ainda mais interessantes. Por exemplo, clicar com o botão direito no ícone de um aplicativo também pode exibir as Quick Actions disponíveis.

Veja alguns exemplos funcionando no iOS:

Esse é um ótimo exemplo de um pequeno detalhe que pode ter um impacto significativo na experiência do usuário. Se você ainda não implementou Quick Actions nos seus aplicativos nativos, recomendo dar uma olhada na documentação oficial do Android e da Apple.

Mas este post não é sobre a implementação nativa. Então, vamos ao que realmente interessa: implementar essa mesma ideia em uma Progressive Web App.

Quick Actions em uma PWA

Se Quick Actions já são um recurso que relativamente poucos desenvolvedores utilizam em aplicativos nativos, menos gente ainda sabe que é possível ter uma experiência parecida em uma Progressive Web App.

Em agosto de 2026, o membro shortcuts do Web App Manifest pode ser usado para definir atalhos para PWAs instaladas. No Android, o Chrome pode exibir esses atalhos quando o usuário interage com o ícone da PWA. O suporte ao membro shortcuts do manifest, no entanto, varia entre navegadores e plataformas.

Enquanto eu estava explorando as opções disponíveis no arquivo manifest de uma web app, descobri que é possível definir esses atalhos diretamente no manifest. Em tempo de execução, o navegador pode então exibi-los como ações associadas à sua PWA instalada.

Como você pode ver acima, eu implementei dois atalhos em um dos meus aplicativos web. O primeiro permite adicionar um vídeo, enquanto o segundo permite criar uma nova pasta.

Implementação

A implementação disso é surpreendentemente simples.

Na raiz do seu projeto web, você precisa ter um arquivo manifest.json. O Web App Manifest descreve a sua aplicação web e também é onde você define os atalhos que deseja disponibilizar para os usuários.

{
  "name": "QEFY",
  "short_name": "QEFY",
  "id": "/",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "display_override": ["standalone", "minimal-ui", "browser"],
  "shortcuts": [
    {
      "name": "Add Video",
      "short_name": "Add",
      "description": "Add a new video to your queue",
      "url": "/queue?action=add",
      "icons": [
        {
          "src": "icons/shortcut-add-96x96.png",
          "sizes": "96x96",
          "type": "image/png"
        }
      ]
    },
    {
      "name": "Add Folder",
      "short_name": "Folder",
      "description": "Create a new folder",
      "url": "/queue?action=folder",
      "icons": [
        {
          "src": "icons/shortcut-folder-96x96.png",
          "sizes": "96x96",
          "type": "image/png"
        }
      ]
    }
  ]
}

A parte importante aqui é a propriedade shortcuts. Cada atalho pode definir um name, um short_name, uma description, uma url e, opcionalmente, um ícone. A url é o endereço para o qual o navegador vai navegar quando o usuário ativar o atalho, e ela precisa estar dentro do scope da PWA.

E é isso. Depois que o seu manifest estiver configurado e a PWA instalada, o navegador e o sistema operacional poderão exibir esses atalhos por meio do ícone do aplicativo.

Como você pode observar no exemplo acima, eu adicionei um parâmetro de query chamado action na URL de cada atalho. No meu aplicativo, essas duas ações abrem um popup específico: uma para adicionar um vídeo e outra para criar uma pasta.

Por exemplo:

{
  "url": "/queue?action=add"
}

A partir daqui, a responsabilidade pelo que acontece com essa URL é totalmente da sua aplicação.

O navegador é responsável por abrir a URL associada ao atalho selecionado. A sua aplicação, então, é responsável por interpretar essa URL e decidir o que fazer.

No meu caso, quando o app recebe o parâmetro action=add, ele abre o popup para adicionar um vídeo:

Outro detalhe legal que o Android oferece é que o usuário também pode criar atalhos na Home Screen diretamente a partir desses atalhos da PWA.