Codelab: criar um servidor de notificações push

Kate Jeffreys

Kayce Basques

Para acompanhar este codelab, abra este Glitch em uma segunda guia.

Este codelab mostra, passo a passo, como criar um servidor de notificações push. Ao final do codelab, você terá um servidor que:

• Faz o acompanhamento das assinaturas de notificações push (ou seja, o servidor cria um novo registro de banco de dados quando um cliente ativa as notificações push e exclui um registro de banco de dados quando um cliente desativa)
• Envia uma notificação push para um único cliente
• Envia uma notificação push para todos os clientes inscritos

Este codelab tem como foco ajudar você a aprender fazendo e não fala muito sobre conceitos. Confira Como funcionam as notificações push? para saber mais sobre os conceitos de notificações push.

O código do cliente deste codelab já foi concluído. Você só vai implementar o servidor neste codelab. Para saber como implementar um cliente de notificação push, consulte Codelab: criar um cliente de notificação push.

Confira push-notifications-server-codelab-complete (fonte) para conferir o código completo.

Compatibilidade com navegadores

Este codelab funciona com as seguintes combinações de sistema operacional e navegador:

• Windows: Chrome, Edge
• macOS: Chrome, Firefox
• Android: Chrome, Firefox

Este codelab não funciona com os seguintes sistemas operacionais (ou combinações de sistema operacional e navegador):

• macOS: Brave, Edge, Safari
• iOS

Pilha de aplicativos

• O servidor é criado com base no Express.js.
• A biblioteca Node.js web-push processa toda a lógica de notificação push.
• Os dados de assinatura são gravados em um arquivo JSON usando lowdb.

Não é necessário usar nenhuma dessas tecnologias para implementar notificações push. Escolhemos essas tecnologias porque elas oferecem uma experiência confiável de codelab.

Configuração

Receber uma cópia editável do código

O editor de código à direita dessas instruções será chamado de Glitch UI ao longo deste codelab.

1. Clique em Remix to Edit para tornar o projeto editável.

Configurar a autenticação

Antes de fazer as notificações por push funcionarem, você precisa configurar o servidor e o cliente com chaves de autenticação. Consulte Assinar suas solicitações de protocolo push da Web para saber o motivo.

1. Abra o terminal do Glitch clicando em Tools e depois em Terminal.
2. No terminal, execute npx web-push generate-vapid-keys. Copie os valores da chave privada e da chave pública.
3. Abra .env e atualize VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Defina VAPID_SUBJECT como mailto:[e-mail]. Todos esses valores precisam estar entre aspas duplas. Depois de fazer as atualizações, o arquivo .env vai ficar parecido com este:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Feche o terminal do Glitch.

Os valores das variáveis de ambiente (o conteúdo em .env) são exclusivos de um único projeto do Glitch. Se você remixar seu projeto, os valores em .env não serão copiados.

1. Abra public/index.js.
2. Substitua VAPID_PUBLIC_KEY_VALUE_HERE pelo valor da chave pública.

Gerenciar assinaturas

Seu cliente lida com a maior parte do processo de assinatura. As principais coisas que seu servidor precisa fazer são salvar novas assinaturas de notificação push e excluir assinaturas antigas. Essas assinaturas permitem que você envie mensagens aos clientes no futuro. Consulte Inscrever o cliente para receber notificações push para mais contexto sobre o processo de assinatura.

Salvar novas informações de assinatura

1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .

Termo-chave : vamos chamar a guia que você acabou de abrir de guia do app.

1. Clique em Registrar service worker na guia do app. Na caixa de status, você verá uma mensagem semelhante a esta:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

1. Na guia do app, clique em Assinar para receber notificações push. Seu navegador ou sistema operacional provavelmente vai perguntar se você quer permitir que o site envie notificações push. Clique em Permitir (ou qualquer frase equivalente usada pelo navegador/SO). Na caixa de status, você vai encontrar uma mensagem semelhante a esta:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

Observação : o URL do endpoint muda de acordo com o navegador que você está usando. Por exemplo, no Firefox, o URL começa com https://updates.push.services.mozilla.com/….

1. Para voltar ao código, clique em View Source na interface do Glitch.
2. Abra os registros de falhas clicando em Ferramentas e depois em Registros. Você vai encontrar /add-subscription seguido de alguns dados. /add-subscription é o URL para o qual o cliente envia uma solicitação POST quando quer se inscrever em notificações push. Os dados que seguem são as informações de assinatura do cliente que você precisa salvar.
3. Abra server.js.
4. Atualize a lógica do gerenciador de rotas /add-subscription com o seguinte código:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Observação : o banco de dados grava em .data/db.json. Para inspecionar esse arquivo no Glitch, clique em Tools, depois em Terminal e execute cat .data/db.json no terminal. O .data/db.json é excluído toda vez que você edita o app. Isso acontece porque o Glitch executa o script start em package.json toda vez que você edita o app, e esse script inclui uma chamada para rm .data/db.json.

Excluir informações antigas da assinatura

1. Volte para a guia do app.
2. Clique em Cancelar inscrição em notificações push.
3. Confira os registros de falhas novamente. Você vai encontrar /remove-subscription seguido das informações de assinatura do cliente.
4. Atualize a lógica do gerenciador de rotas /remove-subscription com o seguinte código:

app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Envie notificações

Conforme explicado em Enviar uma mensagem push, seu servidor não envia as mensagens push diretamente aos clientes. Em vez disso, ele depende de um serviço push para fazer isso. O servidor basicamente inicia o processo de envio de mensagens para os clientes fazendo solicitações de serviço da Web (solicitações de protocolo de push da Web) para um serviço da Web (o serviço de push) pertencente ao fornecedor do navegador que o usuário usa.

1. Atualize a lógica do gerenciador de rotas /notify-me com o seguinte código:

app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

1. Atualize a função sendNotifications() com este código:

function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

1. Atualize a lógica do gerenciador de rotas /notify-all com o seguinte código:

app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

1. Volte para a guia do app.
2. Clique em Cancelar inscrição em notificações push e, em seguida, em Receber notificações push novamente. Isso é necessário apenas porque, como mencionado anteriormente, o Glitch reinicia o projeto sempre que você edita o código e o projeto é configurado para excluir o banco de dados na inicialização.
3. Clique em Notificar. Você vai receber uma notificação push. O título precisa ser Hello, Notifications! e o corpo precisa ser ID: <ID>, em que <ID> é um número aleatório.
4. Abra o app em outros navegadores ou dispositivos e tente se inscrever para receber notificações push clicando no botão Notificar todos. Você vai receber a mesma notificação em todos os dispositivos inscritos (ou seja, o ID no corpo da notificação push precisa ser o mesmo).

Próximas etapas

• Leia Visão geral das notificações push para entender melhor como as notificações push funcionam.
• Confira o Codelab: Criar um cliente de notificação por push para saber como criar um cliente que solicita permissão de notificação, inscreve o dispositivo para receber notificações por push e usa um worker de serviço para receber mensagens por push e exibir as mensagens como notificações.