Novidades no Web app manifest: app shortcuts

Já anunciado nos eventos MSbuild e Web.dev live web app manifest tem algumas novas funcionalidades. Nas versões 84 do Chrome Mobile e 85 para desktop agora temos a possibilidade de adicionar app shortcuts em outras palavras atalhos dentro das nossas aplicações com manifest.json.

Esse recurso para você usuário Apple, já era comum em apps nativos quando o usuário pressionava e segurava o ícone do aplicativo opções na aplicação eram exibidas.

Como na imagem a seguir:

Para quem é o recurso de APP Shortcuts?

O recurso é ideal quando você deseja redirecionar usuários para funcionalidades-chave da sua aplicação, navegação principal, buscas ou atividade de entrada de dados. Atualmente esse recurso pode ser implementado em Progressive Web apps em dispositivos Android e Windows desktop com Chrome e Edge o esse recurso em inglês é chamado de app shortcuts e conseguimos adicionar essa funcionalidade através da propriedade shortcuts.

Como implementar o APP shortcuts?

Para adicionar app shortcuts na nossa PWA precisamos adicionar a seguinte propriedade shortcuts no nosso manifest.json:

"shortcuts": [
  {
    "name": "Abrir Contatos",
    "short_name": "Contatos",
    "description": "Visualize a lista de contatos cadastrados",
    "url": "/contatos",
    "icons": [
      { "src": "//contatos.png", "sizes": "192x192" }
    ]
  },
]Code language: JavaScript (javascript)

Shortcuts espera um array de atalhos com as seguintes propriedades:

• name: nome mais descritivo
• short_name(opcional): nome alternativo para ser usado em áreas de espaço limitado.
• description(opcional): descrição do app pode ser utilizado pelo OS e tecnologias assistivas no futuro.
• url: O URL a qual a App irá abrir. Esse URL precisa estar no escopo do manifest.json para isso precisa ser um URL relativa.
• icons: um array de ícones para o atalho com as propriedades: src, sizes e type(opcional).

SVG não são suportados para ícones utilize para esse caso PNG. Os tamanhos esperados são 36×36 48×48, 72×72, 96×96, 144×144 e 192×192 pixels.

Como testar o recurso?

Caso queira testa os suas apps shortcuts eles estarão visíveis no devtools do chrome ou edge, para isso acesse as ferramentas para desenvolvedores ou clicando com o botão direito na tela da sua aplicação, ou com a tecla de atalho control + alt + i, dai procure a aba de aplicação e dentro de aplicação procure a sessão do manifest, como podemos ver na imagem a seguir:

Boas práticas

Agora que sabemos como implementar atalhos na nossa aplicação web progressiva vamos falar sobre algumas boas práticas:

• Ordene os app shortcuts por prioridades
• Utiliza nomes distintos para os seus atalhos
• Mesure o uso dos atalhos via Google Analytics exemplo “/contatos?utm_source=homescreen”

Para finalizar vamos dar uma olhada no nosso código do manifest.json completo:

{
  "name": "Tutoriais Fellyph Web APIs",
  "display": "standalone",
  "start_url": "/",
  "short_name": "Web APIs",
  "theme_color": "#DA2461",
  "description": "Essa é uma aplicação de teste",
  "orientation": "any",
  "background_color": "#DA2461",
  "icons": [
    {
      "src": "assets/icons/icon_512.png",
      "sizes": "512x512"
    },
    {
      "src": "assets/icons/icon_192.png",
      "sizes": "192x192"
    }
  ],
  "shortcuts": [
    {
      "name": "Geo Location API",
      "short_name": "Geo API",
      "description": "Acesse exemplos de geo localiização",
      "url": "/01_geolocation/01-example-geolocation-final.html",
      "icons": [
        { "src": "//icons/gelocalizacao.png", "sizes": "192x192" }
      ]
    },
    {
      "name": "Fetch API",
      "short_name": "Fecth API",
      "description": "Acesse exemplos utilizando a fetch api",
      "url": "/02_fetch_api/01-example-xmlhttp-request-final.html",
      "icons": [
        { "src": "//icons/fetch.png", "sizes": "192x192" }
      ]
    },
    {
      "name": "IndexedDB API",
      "short_name": "IndexedDB",
      "description": "Acesse exemplos utilizando IndexedDB",
      "url": "/03_indexedDB/01-indexedDB-events.html",
      "icons": [
        { "src": "//icons/indexed.png", "sizes": "192x192" }
      ]
    }
  ]
}Code language: JSON / JSON with Comments (json)

Fiz um pequeno teste com a aplicação que estamos desenvolvendo no curso de Progressive web apps e no Windows o resultado será o seguinte:

Publiquei um post recentemente sobre o recurso no meu canal do YouTube:

Então é isso pessoal o recurso novo nem todos os sistemas operacionais, Windows e Android já adicionaram o suporte agora só falta o suporte no iOS e MacOS. Para ler mais posts sobre PWA acesse a página da categoria PWA e até o próximo post.