Criando uma tela inicial de PWA personalizada

Conforme declarado anteriormente em nosso tutorial de manifesto do PWA, você pode criar uma tela inicial exclusiva para seu PWA com apenas algumas linhas de código dentro de seu manifest.json . O processo não é muito complicado como seria de esperar, e você pode fazer tudo em pouco tempo. Vamos direto ao assunto, vamos:

O caso das telas iniciais em PWAs

Quando desconfigurado, os usuários que abrem seu PWA são recebidos por padrão com uma tela branca em branco. Isso deve funcionar por conta própria, pois em dispositivos modernos, o tempo para abrir aplicativos é quase instantâneo. No entanto, em dispositivos mais lentos, isso pode ser um problema, pois prejudica a percepção inicial do usuário sobre seu aplicativo. Juntamente com o fato de que os dispositivos com especificações mais baixas com 1 GB de RAM ainda são os mais comuns, uma tela inicial exclusiva que representa sua marca é obrigatória.

Como criar sua própria tela inicial

No Android, o processo é tão rápido quanto inserir três linhas de código. Para iOS, no entanto, é uma história diferente, pois você teria que criar diferentes tamanhos de imagem inicial para diferentes tamanhos de tela.

Para Android

Fazendo manualmente

Em seu arquivo manifest.json , certifique-se de que estas três propriedades: name , background_color e icons estejam configuradas corretamente:

• name : O nome do seu PWA
• background_color : A cor de fundo da tela inicial. Somente valores de cor CSS válidos são reconhecidos.
• icons : Um ícone .png com um tamanho mínimo de 192×192 px.

Por exemplo, veja como deve ser um manifest.json configurado corretamente. Observe como a propriedade icons tem quatro tamanhos diferentes — esses ícones de tamanhos diferentes são fornecidos para fornecer a melhor compatibilidade para diferentes dispositivos.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "tela cheia",
    "alcance": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Soluções de comércio eletrônico de próxima geração para Magento",
    "ícones": [
        {
            "src": "/icon-192x192.png",
            "tamanhos": "192x",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-256x256.png",
            "tamanhos": "256x",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-384x384.png",
            "tamanhos": "384x",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-512x512.png",
            "tamanhos": "512x",
            "tipo": "imagem/png"
        }
    ]
}

Depois de terminar de configurar as propriedades (e seu arquivo manifest.json ), os navegadores que suportam PWA (normalmente Chrome) irão gerar automaticamente diferentes tamanhos de ícone para sua tela inicial e exibi-los de acordo.

Bem sem esforço, não é? Se você nos perguntar, achamos que é assim que a experiência de desenvolvimento deve ser.

 Leitura recomendada: Manifesto PWA: Criando seu manifesto de aplicativo da Web da maneira mais fácil

Usando um gerador de manifesto

Você pode automatizar esse processo sem esforço usando nosso Gerador de Manifesto . Basta inserir as informações necessárias e nosso gerador gerará para você um .zip que conterá todas as informações que você precisa.

Para iOS

A Apple certamente não quer facilitar esse processo para os desenvolvedores. No momento em que escrevo isso, o status do suporte ao Web App Manifest ainda está listado como Parcialmente Suportado — inalterado dois anos após sua primeira aparição. Isso significa que os PWAs não recebem suporte para icons , minimal-ui , fullscreen , theme-color e orientation .

Felizmente, ainda há uma maneira de contornar isso, que é usar a metatag <apple-touch-startup-image> . Não é uma solução ideal – mas funciona.

 <!-- Tela inicial para iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) e (device-height: 812px) e (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

Ao usar a metatag <apple-touch-startup-image> , você pode especificar uma imagem de resolução fixa para a tela inicial do seu PWA (ou seja startup-image ). Essa tela inicial personalizada é compatível apenas com um tamanho de tela, e você precisará de muito mais tamanhos de imagem diferentes para acomodar os diferentes tamanhos de tela dos produtos Apple no mercado.

O que isso significa é que você precisará criar duas telas iniciais para cada tamanho de tela, uma para cada orientação (paisagem e retrato). É assim que nosso código deve ficar quando cobrimos alguns dos dispositivos da lista:

 <!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) e (device-height: 812px) e (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) e (device-height: 667px) e (-webkit-device-pixel-ratio: 2)" href="/apple -launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) e (device-height: 736px) e (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) e (device-height: 568px) e (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) e (device-height: 1024px) e (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png">
<!-- iPad Pro 10,5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) e (device-height: 1112px) e (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- iPad Pro 12,9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) e (device-height: 1366px) e (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">

Vincule este código no <head> do seu index.html e não se esqueça de inserir a tag <meta> abaixo para habilitar o comportamento do PWA, caso contrário nossa tela inicial não funcionará.

 <meta name="apple-mobile-web-app-capable" content="yes">

Com isso, você deve estar tudo pronto. Inicie seu PWA iOS e você poderá ver sua tela inicial.

Usando um gerador de tela inicial do iOS

Claro, existem maneiras melhores de automatizar esse processo, que é usando o iOS Splash Screen Generator. Com sua imagem como fonte, o gerador irá gerar para você imagens de tamanhos diferentes junto com o código HTML necessário para ser inserido em seu index.html .

Conclusão

Embora não seja exatamente uma parte da experiência de integração, a tela inicial ainda desempenha um papel importante na criação de uma percepção positiva de sua marca - é o fruto mais fácil que pode trazer resultados que você não esperaria.

Esperamos que este tutorial resolva seu problema exato. Implementar e personalizar o PWA pode ser uma dor de cabeça se você e sua equipe não tiverem muita experiência com isso. Uma solução profissional de desenvolvimento de PWA como o SimiCart pode ajudar a tornar isso muito mais fácil.