Muita gente ainda não sabe, mas desde a versão 15.4 do iOS já é possível utilizar um web app manifest para definir as informações para instalação de um PWA na home screen de aparelho iOS. Mas primeiramente o que é o web app manifest?
Web App manifest
Web app manifest é um arquivo json, que define como a sua Progressive web App será tratada como um aplicativo instalado, inclui informações para definição de aparência e comportamento básico no sistema operacional. O arquivo de manifest pode incluir informações como ícones para exibição quando o aplicativo for instalado, descrições, screenshots e core de tema da aplicação.
Além disso, um ponto muito importante do web app manifest é que ele é um dos critérios para alguns sistemas operacionais sugerirem a instalação da nossa progressive web app. Cada PWA possui um único manifest por aplicativo sendo hospedado na raiz da nossa aplicação
Atualmente a sua extensão oficial é .webmanifest, então você pode criar um arquivo, por exemplo, app.webmanifest. Inicialmente o arquivo utilizar a extensão .json assim criando o arquivo manifest.json formato ainda suportado por alguns browsers mas o novo padrão é a extensão webmanifest.
Criando um web app manifest?
Agora vamos criar o nosso web app manifest, para isso vamos adicionar um arquivo app.webmanifest com o seguinte conteúdo:
{
"name": "Meu primeiro web app manifest"
}Code language: JSON / JSON with Comments (json)E no nosso arquivo HTML fazemos a chamada do web manifest app da seguinte forma:
<html lang="en">
<title>This is my first PWA</title>
<link rel="manifest" href="/app.webmanifest">Code language: HTML, XML (xml)Um vez que adicionado conferiremos no nosso device iOS, em navegadores como o Chrome e Firefox é possível use as ferramentas de desenvolvimento, já no iOS a maneira mais rápida é testar no próprio device. Outro ponto de atenção do iOS é caso tenha as meta informações no head se a sua página ela irão sobrescrever as informações do web app manifest.
Campos suportados pela plataforma iOS
As informações de passadas no web app manifest pode depender da plataforma, o ideal é passar as informações básicas para todas as plataformas, mas nesse post vamos focar nas opções suportadas pela plataforma iOS.
name: nome completo da aplicação, aparecerá junto ao ícone da tela inicialshort_name: propriedade opcional caso que escolher um nome curto para aparecer nahomescreendo seu aparelho, mantenha pelo menos 12 caracteresscope: esta propriedade define o escopo de navegação da sua aplicação. Ela pode restringir a visualição de URLs quando o web app manifest é aplicado. Quando o usuário navega por uma página fora do escopo, ele volta para aba normal de um navegador.icons: Lista de ícones com as propriedadessrc,type,sizese campos opcionais comopurpose, descrevendo quais imagens devem representar a PWAdisplay: essa propriedade descreve como o sistema operacional deve exibir a progressive web app, a plataforma iOS reconhece os valoresbrowserestandalone. Outras plataformas aceitamfullscreeneminimal-ui. Quando esses valores são definidos, o iOS faz um fallback para os modosstandaloneebrowser.start_url: O URL que o PWA deve carregar quando o usuário o iniciar a partir do ícone instalado. Um caminho absoluto é recomendado, portanto, a raiz do seu site podendo passar parâmetros no URL. Se você não fornecer essa informação, o URL salvo será o qual o app foi instalado.theme_color: propriedade espera uma cor para definir o tema da aplicação como cores de contorno e cores da barra de navegaçãoid(16.4): é uma string que identifica exclusivamente este PWA em relação a outras PWA instaladas na mesma origem. Se não estiver definido, start_url será utilizado como o valor de fallback, Lembre-se de que, ao alterar o start_url da sua aplicação você poderá estar a remover as referências que se app foi instalado por aquele browser.
Agora que sabemos mais um pouco sobre as propriedades do arquivo web app manifest vamos criar uma nova versão:
{
"name": "Meu primeiro web app manifest",
"short_name": "Fellyph app",
"display": "standalone",
"start_url": "/?utm_pwa=on",
"theme_color": "#FFFF00"
}Code language: JSON / JSON with Comments (json)Com o código acima o resultado será o seguinte:
Definindo Ícones com o web app manifest
Quando adicionamos o site na tela inicial do nosso aparelho, por conta que não adicionamos os ícones da nossa aplicação, o resultado será um print da página que o app foi instalado:
Para definir os ícones da nossa aplicação, incluímos o parâmetro icons no nosso web app manifest. Primeiramente o formato de imagem suportado pela plataforma iOS é PNG. Então certifique de ter várias versões da mesma imagens com tamanhos diferentes, Isso permite uma melhor experiência na instalação da sua aplicação de acordo com o sistema operacional.
Outro cuidado que você deve ter é não incluir transparência nas imagens dos seus ícones, fique atento as recomendações de cada plataforma. Caso sua imagem tenha alguma transparência. O sistema operacional pode preencher essa área com uma cor fora do seu controle.
Referente aos tamanhos das imagens, vamos trabalhar com as seguintes dimensões 192×192, 384×384, 512×512 e 1024×1024. Mas caso queira trabalhar com apenas um tamanho o recomendado é trabalhar com o 512×512.
{
"name": "Meu primeiro web app manifest",
"short_name": "Fellyph app",
"display": "standalone",
"start_url": "/?utm_pwa=on",
"theme_color": "#FFFF00",
"icons": [
{
"src": "icons/app_fellyph_512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icons/app_fellyph_1024.png",
"type": "image/png",
"sizes": "1024x1024"
}
]
}Code language: JSON / JSON with Comments (json)
Com isso temos todas as configurações principais de nossa PWA e finalizamos o nosso tutorial de como adicionar um web app manifest na plataforma iOS. Para mais posts sobre PWA confira os links a seguir:
Deixe um comentário