Tutorial de Progressive Web App: Crie seu primeiro PWA

Publicados: 2020-06-23

Índice

Feito pelo próprio Google e atualmente sendo empurrado para plataformas populares como o Windows 10, o PWA pode fazer muitas das coisas que antes eram exclusivas de aplicativos nativos, incluindo recursos como notificações por push, interface de aplicativo envolvente, recursos offline, instalações de aplicativos… .

E é por isso que o surgimento do PWA não está mais definido para ser momentâneo, pois agora é um movimento em grande escala que pode mudar fundamentalmente a Web como a conhecemos. Para os recém-chegados, não é tarde demais para conhecer essa tecnologia emergente, pois o processo de construção de um PWA agora é muito mais simplificado do que antes, adequado para leigos interessados como você.

Para seu melhor aprendizado, hoje vamos criar um PWA totalmente funcional usando React, Node.js e Firebase.

Pré-requisitos

Versão do Node.js >= 8.10
versão npm >= 5.6

Notas : a versão npm não deve ser um problema, pois sua instalação do Node.js sempre vem com a versão mais recente do gerenciador de pacotes npm .

1. Crie um SPA com `create-react-app`

Primeiro, precisamos de algo sólido para trabalhar, e create-react-app é a ferramenta perfeita para esse propósito.

 npx create-react-app my-PWA
cd meu-pwa
npm início

Os comandos acima ajudarão a criar um ambiente de aprendizado baseado em React para você trabalhar.

Diretório PWA — Nosso diretório `my-pwa`

Servir por HTTPS

HTTPS é o novo padrão para a web e com a chegada do PWA, ele só se tornou mais popular. Normalmente, um PWA deve ser servido por HTTPS, pois os próprios service workers não podem trabalhar sem ele; mas como estamos trabalhando em um ambiente localhost, não é necessário.

2. Faça funcionar offline

Por padrão, os service workers do create-react-app devem ser pré-configurados para lidar com o cache offline e o carregamento de conteúdo quando o usuário não tiver conexão ou em visitas subsequentes.

Um service worker é, simplesmente, um script JavaScript que é executado em um thread separado da página e, por causa disso, não tem acesso à estrutura DOM. Essa nova abordagem dá origem a recursos mais progressivos e de aprimoramento de desempenho, pois os service workers agora não apenas lidam com todos os recursos típicos de um PWA (capacidades offline, notificações push, etc.), mas também desempenham um papel importante no alívio dos cálculos pesados do seu site em um tópico separado.

Para instalar service workers em seu PWA, dê uma olhada em /src/index.js .

Em index.js , procure esta linha

 serviceWorker.unregister()

Altere unregister() para register() e seus service workers serão registrados automaticamente quando você executar seu my-pwa no modo de produção . Não é recomendado habilitar service workers no modo de desenvolvimento, pois isso pode levar a casos em que o PWA carrega apenas ativos em cache e não inclui as alterações locais mais recentes.

Para executar seu my-pwa no modo de produção:

 npm executar compilação
compilação de serviço npx

Depois disso, abra o Chrome e vá para localhost:5000 , inspecione-o e agora você verá os service workers funcionando corretamente na guia Application .

E na categoria Armazenamento em cache é onde você deseja verificar se o conteúdo offline do seu site está sendo armazenado em cache corretamente.

Observações : Existe uma solução alternativa para registrar seus service workers no modo de não produção. Isso é obtido removendo a linha process.env.NODE_ENV === 'production' de src/serviceWorker.js .

Se você quiser se aprofundar mais nisso e criar seus próprios service workers do zero e não depender das configurações pré-configuradas do React, nós temos você. Neste tutorial, mostramos como criar um Progressive Web App offline a partir de um aplicativo Web simples.

3. Configure adicionar à tela inicial

Se tudo foi feito corretamente até agora, você deverá ver um pequeno ícone de instalação (+) ao iniciar a compilação de produção do seu my-pwa .

Instalar PWA — Instalando o PWA em vários dispositivos com o Magento PWA do SimiCart

Como tudo está sendo feito automaticamente para você, você provavelmente está se perguntando como tudo isso foi possível. Não se preocupe, é por isso que estamos aqui.

Para deixar seu PWA pronto para A2HS (Adicionar à tela inicial), precisamos de um manifest.json . O manifest.json que acompanha seu create-react-app é um arquivo JSON muito básico que determina como os ícones do seu app aparecem para o usuário e define a aparência da tela inicial. Para personalizá-los, altere o arquivo existente em /public/manifest.json .

 {
  "short_name": "Meu primeiro PWA",
  "name": "Criar um PWA simples",
  "ícones": [
    {
      "src": "favicon.ico",
      "tamanhos": "64x64 32x32 24x24 16x16",
      "type": "imagem/ícone x"
    },
    {
      "src": "logo192.png",
      "tipo": "imagem/png",
      "tamanhos": "192x192"
    },
    {
      "src": "logo512.png",
      "tipo": "imagem/png",
      "tamanhos": "512x512"
    }
  ],
  "start_url": ".",
  "display": "autônomo",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

A maioria das coisas aqui são bastante autoexplicativas, mas se você quiser se aprofundar mais no manifest.json e nos eventos que levam a uma instalação do PWA, escrevemos um artigo sobre isso. Não deixe de conferir.

Observações : Para que o manifest.json funcione, você precisará incluí-lo em index.html . Por padrão, create-react-app já deve ter feito isso para você.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Quando você tiver seu PWA registrado com service workers e um manifest.json adequado, um beforeinstallpromt será acionado assim que o usuário iniciar seu aplicativo, solicitando permissão para instalar seu PWA na tela inicial do usuário.

No entanto, você deve notar que estamos apenas arranhando a superfície do processo A2HS (Adicionar à tela inicial), e ainda há muito mais a aprender. A melhor maneira, acreditamos, de aprender qualquer coisa é construindo-a desde o início, e é por isso que preparamos para você um pequeno guia sobre esse recurso específico do PWA. O guia o guiará por várias partes importantes nos eventos de instalação de um PWA.

Alternativamente, se você estiver se sentindo preguiçoso e desmotivado, também estamos aqui para ajudá-lo. Nosso Gerador de Manifesto foi feito para automatizar todo esse processo para você.

4. Configure notificações push

Os navegadores percorreram um longo caminho no suporte a notificações push. Recentemente, o Chrome até introduziu acionadores de notificação para permitir a exibição de notificações no modo avião. Isso é um grande passo em frente para notificações push.

Acionadores de notificação do Chrome — *Novidade no Chrome 80, os **acionadores** de notificação permitem notificações mesmo no modo avião*

E agora, você deve estar se perguntando onde está aquela parte que usa o Firebase neste tutorial. Bem, é isso. Nesta parte, você aprenderá sobre o processo de integração de notificações por push em um PWA usando o Firebase, especificamente o recurso Cloud Messaging que permite o envio de mensagens usando solicitações HTTPS.

Mas como todo o processo é um pouco longo e também para ajudá-lo a acompanhar melhor tudo, preparamos para você nosso próprio tutorial de integração de notificações por push. Com este tutorial, você não deve ter problemas ao tentar enviar notificações push para um token de usuário ou para um grupo de usuários.

Conclusão

E é isso para um PWA completo. Sinta-se à vontade para nos enviar qualquer pergunta se você se sentir preso em qualquer parte do tutorial e tentaremos o nosso melhor para respondê-la!

Consulte Mais informação:
Como integrar o PWA no Magento 2