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:

Exemplo de app shortcuts nativos no iOS

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:

Resumo do app shortcuts

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:

Como podemos ver no screenshot no menu de opções temos os atalhos que definimos em nosso web app manifest.

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.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.