Já anunciado nos eventos MSbuild e Web.dev live web app manifest tem algumas novas funcionalidades. Já nas versões 84 do Chrome Mobile e 85 para desktop agora temos a possibilidade de adicionar atalhos dentro de nossa aplicações com manifest.json.
Esse recursos para você usuário Apple, já era comum em apps nativos quando o usuário pressionava e segurava o ícone do aplicativo opções dentro do app eram exibidas. Como na imagem a seguir:
O recursos é ideal quando você deseja redirecionar usuários para funcionalidades chave de 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.
Implementação
Para adicionar app shortcuts em nossa PWA precisamos adicionar a seguinte propriedade “shortcuts” em 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" }
]
},
]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: a url a qual o App irá abrir. Essa URL precisa estar no escopo do manifest.json para isso precisa ser uma 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.
Caso queira testa os seus apps shortcuts eles estarão visíveis no devtools do chrome ou edge na aba de aplicação dentro da seção do manifest, como podemos ver na imagem a seguir:
Boas práticas
Agora que sabemos como implementar atalhos em nossa pwa vamos falar sobre algumas boas práticas:
- Ordene os app shortcuts por prioridades
- Utiliza nomes distintos para seus atalhos
- Mesure o uso dos atalhos via google analytics exemplo “/contatos?utm_source=homescreen”
Para finalizar vamos dar uma olhada em 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" }
]
}
]
}Fiz um pequeno texto com a aplicação que estamos desenvolvendo no curso de PWA e no windows o resultado será o seguinte:
Publiquei um post recentemente sobre o recurso em 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.