Como construir um aplicativo da Web progressivo

Mobile agora responde por mais da metade do tráfego da Web, e aplicativos da Web permitem que os usuários façam coisas no navegador que rivaliza de aplicativos nativos, mas há um problema: a qualidade das conexões e dispositivos varia maciçamente em todo o mundo.

Catering tanto para os usuários em conexões relâmpagas em Seul, e usuários na Índia rural em um telefone desatualizado, é o mais recente desafio de usabilidade, e aplicativos da Web progressivos são a solução.

O PWAs usam o aprimoramento progressivo para carregar o conteúdo mais importante primeiro, então adicione extras presentes e funcionais conforme necessário, o que significa que todos os usuários obtêm a mesma experiência central o mais rápido possível. Se você quer atingir o público mais amplo possível, os PWAs são o caminho a percorrer.

• 10 passos para uma experiência de usuário envolvente

Embora aplicativos da Web progressivos tragam muitos benefícios e funcionalidades para a Web, eles não precisam reescrever todo o seu aplicativo. Qualquer aplicativo pode ser convertido em um PWA adicionando algumas camadas extras a ele.

Para melhores resultados, você vai querer colocar uma forte ênfase no desempenho desde o início - mas isso é verdade de qualquer aplicativo da Web. Aqui, vamos percorrer os passos para tornar seu aplicativo progressivo.

Se você quiser criar um site de corrida suave, certifique-se de que você hospedagem na web. é local e usar um decente Construtor de sites .

01. Sirva sobre HTTPS

Vamos ser honestos: você deveria estar fazendo isso de qualquer maneira. O SSL adiciona uma camada extra de segurança à Web, ajudando seus usuários a se sentirem seguros usando seu site. Com Pwas, o HTTPS é essencial para o uso de trabalhadores de serviço e permitindo a instalação da tela inicial. Você pode comprar um certificado SSL do seu registrador de domínio a pouca despesa e, em seguida, configurá-lo através do seu serviço de hospedagem.

02. Crie uma concha de aplicativo

Sua concha do aplicativo é a primeira coisa que carrega - a primeira coisa que o usuário vê. Deve existir inteiramente em seu documento HTML de índice, com o INline CSS, para garantir que ele apareça o mais rápido possível e o usuário não está olhando para uma tela branca por mais tempo do que o necessário. O shell de aplicativo faz parte do padrão de aprimoramento progressivo. Seu aplicativo deve fornecer o conteúdo do usuário o mais rápido possível e, em seguida, aprimorá-lo progressivamente como mais dados (provável javascript) carrega.

O exemplo abaixo é retirado de uma aplicação react.js. O usuário é apresentado com um esboço do aplicativo e um indicador de carregamento no Index.html. Então, uma vez que o JavaScript carrega e reaja as botas, o aplicativo completo é renderizado dentro do shell.

 & lt;! - index.html - & gt;
& lt; corpo e gt;
& lt; div id = "root" & gt;
  & lt; div id = "contêiner" & gt;
  & lt; div classe = "recipiente interno" & gt;
  & lt; div id = "header" & gt;
  & lt; img src = "/ ativos / icon.png" alt = "logotipo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "carregamento-contenter" & gt;
  & lt; img src = "/ ativos / icon.png" alt = "logotipo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / corpo & gt;
// index.js.
Reattom.render (
& lt; app / & gt ;,
document.getelementbyid ('root')
);

03. Registre um trabalhador de serviço

Para explorar o espectro completo de Goodies PWA (notificações push, cache, prompts de instalação), você precisará de um trabalhador de serviço.

Felizmente, eles são bem fáceis de configurar. Abaixo, primeiro verificamos se o navegador do usuário suporta os trabalhadores do serviço. Então, se sim, podemos seguir em frente com o registro do arquivo do trabalhador do serviço, aqui chamado service-worker.js. . Note que você não precisa de nada especial dentro desse arquivo neste ponto - pode estar em branco.

No exemplo abaixo, no entanto, mostramos como explorar os três eventos de ciclo de vida dos três principais serviços de serviço. Estes são 'install', quando o usuário visita pela primeira vez a sua página; 'ativar', logo antes de o registro ser concluído; e 'buscar', quando o aplicativo faz uma solicitação de rede. O último é relevante para cache e capacidade offline.

& lt; script & gt;
  if ('serviceworker' no navegador) {
  janela.addeventlistener ('carregar', função () {
  navegador.servichewer.register ('service-worker.js'). Então (Função (Registro) {
  // Registro foi bem sucedido
  console.log ('' registrado! ');
  }, função (err) {
  // registração falhou :(
  console.log ('Registro do Serviceworker falhou:', err);
  }). Catch (função (err) {
  console.log (err);
  });
  });
  } outro {
  console.log ('trabalhador de serviço não é suportado');
  }
  & lt; / script & gt;
// service-worker.js
self.addeventlistener ('install', função () {
  console.log ('install!');
});
self.addeventlistener ("ativar", evento = & gt; {
  console.log ('ativar!');
});
self.addeventlistener ('fetch', função (evento) {
  console.log ('buscar!', event.request);
}); 

04. Adicionar notificações push

Trabalhadores de serviços permitem que seus usuários recebam notificações push pela API push da Web. Para acessá-lo, você pode tocar em self.regration.pushmanager. de dentro do seu arquivo de trabalhador de serviço. Como o envio de notificações push depende muito da sua configuração de back-end, não mergulharemos aqui.

Se você estiver iniciando um aplicativo do zero, o serviço Firebase do Google vem com a Firebase Cloud Messaging para notificações push relativamente dolorosas (lembre-se: Certifique-se de manter seus arquivos de design seguros em armazenamento na núvem) . O código abaixo mostra como se registrar para notificações push através da API Push.

 navigator.servicheworker.ready.then (função (registro) {
  if (! Registration.PushManager) {
    alerta ('sem suporte de notificações push's);
    retorna falso;
  }
  // Para assinar a "notificação push" do Push Manager
  Registration.PushManager.Subscribe ({
  Uservisibleonly: Verdadeiro // Sempre mostra a notificação quando recebida
  })
  .then (função (assinatura) {
  console.log ('subscrito');
  })
  .catch (função (erro) {
  console.log ('erro de assinatura:', erro);
  });
}) 

05. Adicione um manifesto de aplicativo da Web

Para tornar sua inscrição instalável, você precisa incluir um manifest.json. no diretório raiz do aplicativo. Você pode pensar nisso como uma descrição do seu aplicativo, semelhante ao que você pode enviar para a App Store. Inclui ícones, uma tela inicial, um nome e uma descrição.

Há também alguma configuração de como seu aplicativo aparece quando é iniciado na tela inicial do usuário: você deseja mostrar a barra de endereços no navegador ou não? Qual cor você quer que a barra de status seja? E assim por diante. Note que um adequado manifest.json. deve incluir um espectro completo de tamanhos de ícones para vários dispositivos. O código abaixo é uma prévia de algumas das propriedades que seu manifesto pode incluir.

 {
  "Short_name": "Chat",
  "Nome": "Chat",
  "Ícones": [
  {
  "SRC": "/ ativos / icon.png",
  "Tamanhos": "192x192",
  "Tipo": "Image / PNG"
  }
  ],
  "start_url": "/? utm_source = homescreen",
  "Background_Color": "# E05A47",
  "TEME_COLOR": "# E05A47",
  "Display": "Standalone"
} 

06. Configure o prompt de instalação

Quando um usuário visita um PWA com um trabalhador de serviço e manifesto, o Chrome os solicitará automaticamente a instalá-lo em sua tela inicial, dado o seguinte: O usuário deve visitar o site duas vezes, com cinco minutos entre as visitas.

A ideia aqui é esperar até que o usuário demonstre interesse em sua inscrição e peça-lhes que façam uma fixação de seu dispositivo (isso é um forte contraste com a abordagem de aplicativos nativos, que pede esse investimento em frente).

Mas pode haver casos em que você deseja mostrar o prompt de instalação em diferentes situações, como após o usuário ter uma ação útil específica. Fazer isso, interceptamos o antes de imprimir Evento e salvá-lo para mais tarde, em seguida, implementar o prompt quando vemos em forma.

 janela.addeventlistener ('beforiinstallprompto', e = & gt; {
  console.log ('AnsieinstallPrompt Event disparado');
  e.preventdefault ();
  // esconder o evento para que possa ser acionado mais tarde.
  este.DeferredprompT = E;
  retorna falso;
  });
// Quando você deseja acionar o prompt:
este.DeferredprompT.Prompt ();
  este.defredprompT.Userchoice.then (escolha = & gt; {
  console.log (escolha);
  });
este.DeferredprompT = null; 

07. Analise o desempenho do seu aplicativo

O desempenho é o coração e a alma do PWAs. Seu aplicativo deve ser rápido para usuários em todas as condições de rede. Cache e capacidade offline ajuda muito, mas no final do dia, sua inscrição deve ser rápida, mesmo que o usuário não tenha o navegador para apoiar a tecnologia de trabalhador de serviço. Esta é a definição de aprimoramento progressivo - fornece uma ótima experiência para todos, independentemente da modernidade do dispositivo ou condições de rede.

Para fazer isso, um conjunto útil de métricas é o sistema ferroviário. Trilho é o que o Google chama um 'modelo de desempenho centrado no usuário' - um conjunto de diretrizes para medir o desempenho do nosso aplicativo.

O acrônimo significa resposta (quanto tempo leva para o seu aplicativo responder às ações do usuário), animação (mantendo a velocidade de animação em 60fps), ocioso (usando o tempo em que seu aplicativo não está fazendo mais nada para carregar e cache ativos adicionais) e Carga (carregando seu aplicativo em um segundo ou menos).

Aqui está uma tabela de benchmarks significativos para o carregamento de aplicativos, conforme fornecido pelo Meggin Kearney, escritor de tecnologia em Fundamentos da Web do Google. .

08. auditar seu aplicativo com farol

O Google é o maior campeão empurrando aplicativos da Web progressiva como o futuro da web. Como tal, forneceu uma ferramenta útil para orientar seu desenvolvimento da PWA.

Anteriormente chamado Farol e fornecido como uma extensão cromada, a partir do Chrome 60, é uma parte dos DevTools Chrome, sob a guia "Auditorias". Que farol faz é executar sua inscrição sob condições diferentes e medir sua resposta e sucesso de acordo com as diretrizes da PWA. Em seguida, você oferece uma pontuação de 100. Também pode marcar seu aplicativo nas melhores práticas da web ao mesmo tempo.

O texto a seguir é uma lista do farol dos valores medidos. Em uso também mostra descrições.

• Registra um trabalhador de serviço
• Responde com um 200 quando offline
• Contém algum conteúdo quando JavaScript não está disponível
• Usa https.
• Redireciona o tráfego HTTP para https
• A carga da página é rápida o suficiente em 3G
• O usuário pode ser solicitado a instalar o aplicativo da web
• Configurado para uma tela splash personalizada
• Barra de endereços corresponde às cores da marca
• Tem um & lt; meta nome = "viewport" & gt; tag com largura ou escala inicial
• O conteúdo é dimensionado corretamente para a viewport

Este artigo originalmente apareceu no Web Designer; Inscreva-se aqui .

Artigos relacionados:

• Pwas: Bem-vindo à Revolução Móvel
• Como usar animação em aplicativos móveis
• 9 segredos de pwa incríveis