Este codelab mostra em etapas como criar um servidor de notificações push. Ao final do codelab, você terá um servidor que:
- Monitora as inscrições de notificações push (por exemplo, o servidor cria uma um novo registro do banco de dados quando um cliente ativa as notificações push e exclui um registro de banco de dados existente quando um cliente faz a desativação)
- 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 aplicando falar muito sobre conceitos. Finalizar compra Como funcionam as notificações push? para saber mais sobre os conceitos de notificação push.
O código do cliente deste codelab já está concluído. Você só terá a implementação do servidor neste codelab. Para saber como implementar cliente de notificação push, confira Codelab: criar uma notificação push cliente.
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 e 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 e Safari
- iOS
Pilha de aplicativos
- O servidor é criado com base no Express.js.
- Biblioteca Node.js web-push lida com toda a lógica de notificações push.
- 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 de codelab confiável.
Configuração
Gerar uma cópia editável do código
O editor de código exibido à direita dessas instruções será chamado a interface do Glitch ao longo deste codelab.
- Clique em Remixar para editar para tornar o projeto editável.
Configurar a autenticação
Antes de ativar as notificações push, você precisa configurar servidor e cliente com chaves de autenticação. Consulte Assinar suas solicitações do protocolo de push da Web. para saber por quê.
- Abra o terminal do Glitch clicando em Tools e em Terminal.
- No terminal, execute
npx web-push generate-vapid-keys
. Copie a chave privada e chaves públicas. - Abra
.env
e atualizeVAPID_PUBLIC_KEY
eVAPID_PRIVATE_KEY
. DefinirVAPID_SUBJECT
paramailto:test@test.test
. Todos esses valores precisam ser unidos entre aspas duplas. Depois das atualizações, o arquivo.env
terá esta aparência: semelhante a:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- Feche o terminal do Glitch.
- Abra
public/index.js
. - 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. O principal o que seu servidor precisa fazer é salvar novas inscrições em notificações push e excluir assinaturas antigas. É com essas assinaturas que você pode enviar mensagens para clientes no futuro. Consulte Inscrever o cliente para receber 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, deve ver uma mensagem semelhante a esta:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
- Na guia do app, clique em Inscrever-se para push. É provável que seu navegador ou sistema operacional perguntar se quer permitir que o site envie notificações push. Clique em Permitir (ou no frase equivalente usada pelo seu navegador/SO). Na caixa de status, você verá uma mensagem semelhante para isso:
Service worker subscribed to push. Endpoint: https://fcm.googleapis.com/fcm/send/…
- Volte ao código clicando em Ver código-fonte na interface do Glitch.
- Abra os registros do Glitch clicando em Tools e em Logs. Você
verá
/add-subscription
, seguido por alguns dados./add-subscription
é e o URL que o cliente envia PÓS receber uma solicitação quando quiser se inscrever nas notificações push. Os dados que Veja a seguir as informações de assinatura do cliente que você precisa salvar. - Abra
server.js
. - 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);
});
Excluir informações de assinaturas antigas
- Volte para a guia do app.
- Clique em Cancelar inscrição por push.
- Olhe os registros de falha de novo. Você verá
/remove-subscription
seguido pelas informações de inscrição do cliente. - 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
Como explicado em Enviar uma mensagem push, seu servidor não envia as mensagens push diretamente para os clientes. Em vez disso, ele depende de um serviço de push para fazer isso. Seu servidor basicamente inicia o processo de envio de mensagens para os clientes, tornando as mensagens da Web Solicitações de serviço (solicitações de protocolo de push da Web) para um serviço Web (o serviço de push) de propriedade do fornecedor do navegador que seu usuário usa.
- 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);
});
- 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 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);
}
});
- Volte para a guia do app.
- Clique em Cancelar inscrição de push e depois em Inscrever-se para envio novamente. Isso só é necessário porque, como mencionado anteriormente, o Glitch reinicia o projeto toda vez que você editar o código e o projeto estiver 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 deve
será
Hello, Notifications!
e o corpo seráID: <ID>
, em que<ID>
é um um número aleatório. - Abra o app em outros navegadores ou dispositivos e inscreva-os para receber notificações push e no botão Notificar tudo. Você vai receber a mesma notificação 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 os conceitos de como as notificações push funcionam.
- Confira o Codelab: criar um cliente de notificações push para aprender a criar um cliente que solicita permissão de notificação, o dispositivo para receber notificações push e usa um service worker para receber e as exibe como notificações.