Como integrar notificações push em seu PWA

Em nosso tutorial de hoje, estaremos integrando Push Notifications em um PWA usando Firebase, ou mais especificamente, usando o recurso Cloud Messaging dentro dele, que permite o envio de mensagens usando solicitações HTTPS.

Aplicativos da Web progressivos e notificações push

Como o Progressive Web App é um movimento em constante mudança, não é surpreendente ver que a própria tecnologia tornou-se no mesmo nível (em termos de função) com sua contraparte do aplicativo nativo.

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

Os acionadores de notificação dão aos desenvolvedores a capacidade de agendar notificações, mesmo se o dispositivo do usuário estiver no modo avião.

Jon Krafcik, Chrome Dev Summit 2019

Com todas essas mudanças radicais em vigor, seria um desperdício não aproveitá-las para gerar ainda mais receita para o seu PWA. E nem é algo muito complicado, pois você pode facilmente configurar uma função de notificação por push própria usando este tutorial.

 Leitura recomendada: 9 recursos obrigatórios de um aplicativo da Web progressivo (PWA) para comércio eletrônico

Como integrar notificações push em seu PWA

Em nosso tutorial de hoje, estaremos integrando Push Notifications em um PWA usando Firebase , especificamente o recurso Cloud Messaging que permite o envio de mensagens usando solicitações HTTPS.

Pré-requisitos

• Uma conta do Firebase (já que você criará um projeto no Firebase)
• Um aplicativo da Web progressivo. Para uma demonstração simplificada, usaremos um aplicativo create-react que é um PWA básico que pode ser criado usando um comando

Etapa 1 : criar um PWA básico

Já que estaremos criando um PWA básico usando create-react-app, vamos baixar o NodeJS primeiro. Após terminar de instalar o NodeJS, abra o prompt de comando do NodeJS e execute os comandos a seguir.

Para criar um aplicativo React simples em seu diretório especificado:

 npx create-react-app your-pwa-directory

Altere o diretório de trabalho atual para seu aplicativo React recém-criado:

 cd seu-diretório-pwa

Adicione a biblioteca JavaScript do Firebase ao projeto:

 npm instala firebase --save 

Etapa 2: crie seu push-notification.js

O próximo passo é criar o módulo que se encarregará de todos os seus processamentos de notificações. Em <your-pwa-directory>\src , crie um arquivo chamado push-notification.js .

Primeiro, vamos criar uma função que inicialize o Firebase e passe as chaves do seu projeto. Você pode encontrar as chaves do seu projeto acessando Firebase > Visão geral do projeto > Configurações do projeto e clique neste ícone:

Isso direcionará você para outra página que contém o SDK do Firebase para seu PWA:

Agora que temos as chaves do nosso projeto, vamos adicionar o seguinte código ao seu push-notification.js .

 importar o firebase de 'firebase';
export const inicializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    ID do projeto: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}

Com isso, você criou a função responsável por todo o processamento de suas notificações, agora você precisará importá-la e chamá-la. Edite seu index.js assim:

 importe React de 'react';
importe ReactDOM de 'react-dom';
import './index.css';
importar App de './App';
import * como serviceWorkerRegistration de './serviceWorkerRegistration';
importar reportWebVitals de './reportWebVitals';
importar o firebase de 'firebase';
import { initializeFirebase } from './push-notification';
ReactDOM.render(<App />, document.getElementById('root'));
inicializeFirebase();

Etapa 3: criar um service worker

Service Workers é o nome da tecnologia por trás de um Progressive Web App, que potencializa sua capacidade offline, notificações push e armazenamento em cache de recursos.

SimiCart, tudo o que você precisa saber sobre aplicativos da Web progressivos

É necessário um service worker para receber o evento onMessage e, consequentemente, permitir o envio de notificações para o dispositivo do usuário. Por padrão, o Firebase procura automaticamente um arquivo chamado firebase-messaging-sw.js .

Vamos adicionar firebase-messaging-sw.js ao diretório em que seus arquivos são veiculados. Como o nosso é um projeto create-react create-react-app , este firebase-messaging-sw.js estará em nossa pasta pública:

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    ID do projeto: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
});
const messaging = firebase.messaging();

Se você ainda não ouviu falar do PWA Service Worker, temos um artigo exclusivo para você aprender tudo sobre essa tecnologia incrível.

Etapa 4: solicitar permissões de usuário para enviar notificações

É a era da privacidade e você não quer incomodar seus usuários enviando notificações indesejadas e não autorizadas!

Para solicitar a permissão do seu usuário, basta adicionar isso ao seu push-notification.js :

 importar o firebase de 'firebase';
 
export const inicializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    ID do projeto: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}
 
export const askForPermissionToReceiveNotifications = assíncrono () => {
  tentar {
    const messaging = firebase.messaging();
    aguardar mensagens.requestPermission();
    const token = await messaging.getToken();
    console.log('Seu token é:', token);
    
    ficha de retorno;
  } pegar (erro) {
    console.error(erro);
  }
}

E como essa função precisará ser chamada de algum lugar, vamos adicioná-la com o clique de um botão. Edite o arquivo app.js em seu diretório /src/ assim:

 importar logotipo de './logo.svg';
import './App.css';
import { askForPermissionToReceiveNotifications } from './push-notification';

função App() {
  Retorna (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edite <code>src/App.js</code> e salve para recarregar.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          alvo="_blank"
          rel="noopener noreferrer"
        >
          Aprenda Reagir
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Clique para receber notificações
        </button>
      </header>
    </div>
  );
}

exportar aplicativo padrão;

Agora vamos iniciar nosso projeto e você deve ver um botão Clique para receber notificações assim:

Clique no botão e você deverá ver um pop-up pedindo sua permissão:

Clique em Permitir e verifique o console do seu navegador. Você deve ver uma mensagem notificando sobre seu token:

Agora salve esse token em outro lugar porque você precisará dele na próxima etapa.

Etapa 5: enviar notificações push com o Postman

Nas próximas etapas, usaremos o Postman para enviar notificações usando o serviço Cloud Messaging do Firebase.

No Postman, crie uma solicitação POST com as seguintes informações:

• URL de solicitação : https://fcm.googleapis.com/fcm/send

• Headers : Nos cabeçalhos da sua solicitação POST, você precisará ter as seguintes chaves:

Autorização: key= SERVER_KEY

Tipo de conteúdo : application/json

Observações : SERVER_KEY pode ser encontrado na guia Cloud Messaging nas configurações do Firebase

• Body : Preencha o corpo da sua solicitação POST com o seguinte código:

 {
    "notificação": {
        "title": "SimiCart",
        "body": "Testar notificação push",
        "click_action": "http://localhost:3000/",
        "icon": "https://i.imgur.com/5zO5cce.png"
    }
    "para": "USER_TOKEN"
}

Substitua USER_TOKEN pelo token que você obteve (clicando no botão Click to receive notifications ) na Etapa 4. Não esqueça de escolher Body type as raw e JSON .

Agora clique em Enviar e você deverá ver uma notificação aparecendo no canto inferior direito:

Observações : Essas notificações só aparecem quando o aplicativo está em segundo plano ou minimizado.

Parabéns! Seu PWA agora pode enviar notificações!

Conclusão

Esperamos que, após este guia, você possa configurar com confiança uma função de notificação por push própria. Sendo uma nova tecnologia, o Progressive Web Apps certamente é uma coisa complicada para usuários não experientes em tecnologia, e é por isso que existem provedores de soluções prontamente disponíveis, como o SimiCart, que podem cuidar de todas as suas necessidades com nossos anos de experiência em PWAs.