Utilizando web app manifest no iOS

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.

Blog fellyph cintra - como instalar um pwa no iOS
Para fazer a instalação de uma PWA temos que acessar o menu do safari e ir em Adicionar na tela inicial.
Com as primeiras informações adicionadas num web app manifest já podemos ver o nome do nosso PWA como título do nosso app.
Com as primeiras informações adicionadas num web app manifest já podemos ver o nome do nosso PWA como título do nosso app.

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 inicial
  • short_name: propriedade opcional caso que escolher um nome curto para aparecer na homescreen do seu aparelho, mantenha pelo menos 12 caracteres
  • scope: 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 propriedades src, type, sizes e campos opcionais como purpose, descrevendo quais imagens devem representar a PWA
  • display: essa propriedade descreve como o sistema operacional deve exibir a progressive web app, a plataforma iOS reconhece os valores browser e standalone. Outras plataformas aceitam fullscreen e minimal-ui. Quando esses valores são definidos, o iOS faz um fallback para os modos standalone e browser.
  • 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ção
  • id(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:

Agora nas descrições da nossa PWA carregamos o short_name onde o tamanho recomendada é 12 caracteres.
Agora nas descrições da nossa PWA carregamos o short_name onde o tamanho recomendada é 12 caracteres.
Quando a app é instalada temos a exclusão da barra de endereço, e ao topo do nosso site temos a cor amarela definida pela theme_color
Quando a app é instalada temos a exclusão da barra de endereço, e ao topo do nosso site temos a cor amarela definida pela theme_color

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:

PWA instalada sem as definições de ícones no web app manifest
PWA instalada sem as definições de ícones no web app manifest

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)
Blog fellyph cintra - pwa instalado com icone definido pelo web app manifest
Apos definir os ícones no web app manifest temos a exibição do ícone na nossa tela inicial.

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:


Publicado

em

,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *