Como integrar Adicionar à tela inicial ao seu PWA

Publicados: 2021-05-13

Índice

Adicionar à tela inicial (A2HS para abreviar) é fundamental para a experiência do Progressive Web Apps, pois permite uma experiência completa de aplicativo nativo, que inclui o lançamento de aplicativos da tela inicial do usuário.

 Leitura recomendada: PWA vs Native: Qual combina melhor com você?

Sendo um recurso tão vital para o seu PWA, certamente você não pode não tê-lo integrado, e é por isso que hoje no tutorial do SimiCart PWA, abordaremos as razões pelas quais o A2HS é necessário, como ele é usado e como fazer um PWA Pronto para A2HS, tanto no celular quanto no desktop.

Navegadores compatíveis

A2HS está muito perto de ser um recurso universal entre navegadores. Atualmente, é suportado pelo Mobile Chrome/Android Webview (a partir da versão 31), Opera para Android (a partir da versão 32) e Firefox para Android (a partir da versão 58). Para uma visão mais detalhada, confira o site CanIUse.

PWA Adicionar à tela inicial em ação

Ao se deparar com um site com PWA Add to Home screen habilitado (A2HS-Enabled), um banner notificando que o site pode ser adicionado à sua tela inicial pode ser visto na parte inferior da interface do usuário:

Harlow Bros - Adicionar PWA à tela inicial — *Harlow Bros - um trabalho orgulhoso de SimiCart*

Esta é a promoção de instalação padrão fornecida pelo navegador , que ocorre quando determinados critérios instaláveis são atendidos. A notificação em si será exibida na primeira vez que um usuário visitar seu site e novamente após aproximadamente 90 dias.

Como tornar seu aplicativo da Web habilitado para A2HS no celular

Critérios instaláveis

Para que seu aplicativo da Web seja instalável, ele deve:

ainda não estar instalado
atende a uma heurística de engajamento do usuário (o usuário deve interagir com a página por pelo menos 30s)
ser servido a partir de uma conexão segura (HTTPS)
ter um trabalhador de serviço registrado
tem um arquivo de manifesto configurado corretamente
E o mais importante, o navegador em uso deve suportar o evento beforeinstallprompt . Para obter uma lista completa de navegadores que suportam o evento beforeinstallprompt , consulte CanIUse.

Começando

Para fins de demonstração, neste artigo, usaremos o projeto create-react-app como base para criar um PWA instalável. create-react-app é um comando React simples para criar um aplicativo de página única.

Nota : create-react-app requer pelo menos node >= 10.16 e npm >= 5.6

Abra o prompt de comando do Node.js e execute os seguintes comandos:

 npx create-react-app pwa-a2hs
cd pwa-a2hs
início do fio

Criar demonstração do aplicativo de reação — Nosso aplicativo web básico depois de executar os comandos

Criar um arquivo de manifesto

Geralmente localizado na pasta raiz de um aplicativo da Web, seu manifesto da Web é um arquivo que contém todas as informações necessárias do seu site, como o título do aplicativo, caminhos para ícones diferentes, cor de fundo etc. em um formato JSON. Um arquivo de manifesto da Web é crucial para um aplicativo Web funcional, pois permite a apresentação adequada do aplicativo Web em vários estágios da experiência do usuário.

Recomendamos usar um Gerador de Manifesto para gerar o arquivo automaticamente, juntamente com ícones de tamanho otimizado para seu aplicativo.

Configuração ideal para o gerador de manifesto do aplicativo Web

Usando o gerador de manifesto, você pode ter um arquivo manifest.zip com o conteúdo assim:

E seu manifest.webmanifest deve ficar assim:

 {
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "autônomo",
    "alcance": "/",
    "start_url": ".",
    "nome": "PWA-A2HS",
    "short_name": "PWA",
    "description": "Demo PWA para recurso A2HS",
    "ícones": [
        {
            "src": "/icon-192x192.png",
            "tamanhos": "192x192",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-256x256.png",
            "tamanhos": "256x256",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-384x384.png",
            "tamanhos": "384x384",
            "tipo": "imagem/png"
        },
        {
            "src": "/icon-512x512.png",
            "tamanhos": "512x512",
            "tipo": "imagem/png"
        }
    ]
}

Agora copie o conteúdo de seus arquivos de manifesto gerados para a pasta /public/ , exclua o arquivo manifest.json padrão nesta pasta e vá para a próxima etapa.

Vincular o HTML ao manifesto

Quando terminar de configurar seu arquivo de manifesto, salve-o no diretório raiz do seu site para que possa ser chamado mais tarde com um caminho relativo, ou seja, /manifest.webmanifest .Para terminar de configurar seu arquivo de manifesto, faça referência a ele em seu cabeçalho HTML ( \pwa-a2hs\public\index.html ), assim:

 <cabeça>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      nome="descrição"
      content="Web site criado usando create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </head>

Configure o fluxo de instalação

Um manifesto de aplicativo Web não é tudo o que é necessário para tornar seu aplicativo Web instalável. Há algumas configurações adicionais que você precisará fazer para tornar seu aplicativo da Web instalável e, assim, torná-lo um passo mais próximo de um PWA.

Criar um trabalhador de serviço

O service worker intercepta suas solicitações de rede e habilita vários recursos semelhantes a aplicativos pelos quais o PWA é famoso. Crie um arquivo service-worker.js em pwa-a2hs\public e preencha-o com o seguinte conteúdo:

 self.addEventListener('buscar', function(evento) {
  event.respondWith(
      caches.match(event.request).then(function(response) {
          resposta de retorno || buscar(evento.solicitação);
      })
  );
});

Aqui, precisaremos ouvir o evento de fetch , pois é crucial para sua experiência de adição à tela inicial, sem ele, seu aplicativo React não poderá atender aos requisitos de instalação.

Registre seus service workers

E para que nosso service-worker.js funcione, teremos que registrá-lo inserindo este código no final do <body> do nosso index.html :

 //index.html
<script>
    if ('serviceWorker' no navegador) {
      // Registra um service worker hospedado na raiz do
      // site usando o escopo padrão.
      navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        console.log('Registro do trabalhador de serviço bem-sucedido:', registro);
      }, /*catch*/ function(erro) {
        console.log('Falha no registro do service worker:', error);
      });
    } senão {
      console.log('Service workers não são suportados.');
    }
  </script>

Hora de testar!

Seu PWA agora deve ser instalável. Atualize seu frontend e você verá um botão de instalação na barra de tarefas (desktop) ou um pequeno banner de notificação (mobile).

Botão de instalação do PWA na barra do navegador

Clicar em Instalar resultará em um atalho do PWA como na sua área de trabalho/tela inicial:

Ícone do PWA na área de trabalho/tela inicial

Há mais na experiência A2HS

O acima é apenas uma adição básica à experiência da tela inicial usando a promoção de instalação fornecida pelo navegador. Para aumentar ainda mais, você também pode salvar o evento beforeinstallprompt para acionar manualmente o fluxo de instalação com vários padrões para promover a instalação do PWA.

Botão Instalar na página de inscrição — Mostrar o botão **Instalar** na página de inscrição

Com um botão de instalação personalizado, você pode evitar interromper a jornada do usuário segmentando os usuários específicos que se beneficiarão da instalação de um aplicativo. E ao considerar onde e onde colocar a interface do usuário da promoção, seu PWA provavelmente se sairá melhor do que seus concorrentes e obterá taxas de conversão de aplicativos muito melhores como resultado.