Esta página foi traduzida pela API Cloud Translation.

Codelab: criar um servidor de notificações push

Kate Jeffreys

Kayce Basques

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

Monitora as assinaturas de notificações push, ou seja, o servidor cria um novo registro de banco de dados quando um cliente aceita as notificações push e exclui um registro de banco de dados existente quando um cliente desativa esse registro.
Envia uma notificação push para um único cliente
Envia uma notificação push para todos os clientes inscritos

O foco deste codelab é ajudar você a aprender fazendo, e não fala muito sobre conceitos. Confira Como as notificações push funcionam? para saber mais sobre os conceitos dessa notificação.

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

Confira push-notifications-server-codelab-complete (fonte) para ver 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

Sabe-se que este codelab não funciona com os sistemas operacionais a seguir (ou combinações de sistema operacional e navegador):

macOS: Brave, Edge e Safari
iOS

Pilha de aplicativos

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

Você não precisa usar nenhuma dessas tecnologias para implementar as notificações push. Escolhemos essas tecnologias porque elas oferecem uma experiência confiável no codelab.

Instalação

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

O editor de código que você vê à direita destas instruções será chamado de interface Glitch ao longo deste codelab.

Clique em Remixar para editar para tornar o projeto editável.

Configurar a autenticação

Para que as notificações push funcionem, configure o servidor e o cliente com chaves de autenticação. Consulte Assinar suas solicitações de protocolo de push da Web para saber o motivo.

Abra o terminal Glitch clicando em Tools e em Terminal.
No terminal, execute npx web-push generate-vapid-keys. Copie os valores da chave privada e da chave pública.
Abra .env e atualize VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Defina VAPID_SUBJECT como mailto:test@test.test. Todos esses valores devem ser colocados entre aspas duplas. Depois de fazer as atualizações, o arquivo .env ficará semelhante a este:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Feche o terminal Glitch.

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

Abra o public/index.js.
Substitua VAPID_PUBLIC_KEY_VALUE_HERE pelo valor da sua chave pública.

Gerenciar assinaturas

Seu cliente cuida da maior parte do processo de assinatura. As principais coisas que seu servidor precisa fazer são salvar novas assinaturas de notificações push e excluir assinaturas antigas. Essas assinaturas permitem enviar mensagens para clientes no futuro. Consulte Inscrever o cliente nas notificações push para mais contexto sobre o processo de assinatura.

Salvar informações da nova assinatura

Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .

Clique em Registrar service worker na guia do app. Na caixa de status, uma mensagem semelhante a esta vai aparecer:

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

Na guia do app, clique em Inscrever-se para enviar por push. Seu navegador ou sistema operacional provavelmente perguntará se você quer permitir que o site envie notificações push. Clique em Permitir (ou qualquer frase equivalente que seu navegador/SO use). Na caixa de status, você verá 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/….

Volte ao código clicando em View Source na interface do Glitch.
Clique em Tools e em Logs para abrir os registros do Glitch. Você verá /add-subscription seguido por alguns dados. /add-subscription é o URL para o qual o cliente envia uma solicitação POST quando quer se inscrever para receber notificações push. Os dados a seguir são as informações de assinatura do cliente que você precisa salvar.
Abra o server.js.
Atualize a lógica do gerenciador de rota /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 sempre que você edita o app. Isso ocorre porque o Glitch executa o script start em package.json sempre que você edita o app, e esse script inclui uma chamada para rm .data/db.json.

Excluir informações de assinaturas antigas

Volte para a guia do app.
Clique em Cancelar inscrição no push.
Confira os registros do Glitch de novo. Você verá /remove-subscription seguido pelas informações de assinatura do cliente.
Atualize a lógica do gerenciador de rota /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. Basicamente, o servidor inicia o processo de envio de mensagens aos 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) de propriedade do fornecedor do navegador que seu usuário usa.

Atualize a lógica do gerenciador de rota /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);
});

Atualize a função sendNotifications() com o seguinte 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} `);
      });
  });
}

Atualize a lógica do gerenciador de rota /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);
  }
});

Volte para a guia do app.
Clique em Cancelar inscrição no push e depois em Inscrever-se para push novamente. Isso só é necessário porque, como mencionado anteriormente, o Glitch reinicia o projeto sempre que você edita o código e ele é configurado para excluir o banco de dados na inicialização.
Clique em Receber notificação. 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.
Abra seu app em outros navegadores ou dispositivos, inscreva-os nas notificações push e clique no botão Notificar tudo. Você receberá a mesma notificação em todos os dispositivos inscritos, ou seja, o ID no corpo da notificação push deve ser o mesmo.

Próximas etapas

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