Se você perguntar a uma sala de desenvolvedores quais recursos de dispositivos móveis estão faltando no da Web, as notificações push estão sempre no topo da lista.
As notificações push permitem que seus usuários ativem as atualizações oportunas dos sites que eles e permitem que você reengaja-os com conteúdo personalizado e envolvente.
A partir do Chrome versão 42, a API Push e A API Notification está disponível desenvolvedores de aplicativos.
A API Push no Google Chrome depende de algumas tecnologias diferentes, incluindo: Manifestos de apps da Web e Service Workers. Nesta postagem, analisaremos cada uma dessas tecnologias, mas apenas o mínimo para começar a usar as mensagens push. Para entender melhor alguns dos os outros recursos dos manifestos e os recursos off-line dos service workers, confira os links acima.
Também veremos o que será adicionado à API em versões futuras do Chrome, e, por fim, temos as perguntas frequentes.
Implementar mensagens push para o Chrome
Esta seção descreve cada etapa que você precisa concluir para dar suporte a push mensagens em seu aplicativo da web.
Registrar um Service Worker
É necessário ter um service worker para implementar mensagens push para na Web. Isso porque, quando uma mensagem push é recebida, navegador pode iniciar um service worker, que é executado em segundo plano sem uma página sendo aberta e despache um evento para que você possa decidir como lidar com isso mensagem push.
Confira abaixo um exemplo de como registrar um service worker no seu app da Web. Quando da conclusão do registro, chamamos initialiseState(), que que abordaremos em breve.
var isPushEnabled = false;
…
window.addEventListener('load', function() {
var pushButton = document.querySelector('.js-push-button');
pushButton.addEventListener('click', function() {
if (isPushEnabled) {
unsubscribe();
} else {
subscribe();
}
});
// Check that service workers are supported, if so, progressively
// enhance and add push messaging support, otherwise continue without it.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(initialiseState);
} else {
console.warn('Service workers aren\'t supported in this browser.');
}
});
O gerenciador de cliques no botão inscreve ou cancela a inscrição do usuário para mensagens push. isPushEnabled é uma variável global que simplesmente rastreia se as notificações push a mensagem está inscrita ou não. Elas serão usadas como referência ao longo os snippets de código.
Em seguida, verificamos se há suporte para service workers antes de registrar o service-worker.js
que tem a lógica para lidar com uma mensagem push. Aqui, nós
apenas informam ao navegador que o arquivo JavaScript é o service worker
para nosso site.
Configurar o estado inicial
Depois que o service worker é registrado, precisamos configurar o estado da nossa interface.
Os usuários esperam uma interface simples para ativar ou desativar mensagens push no site, e eles esperam que ele se mantenha atualizado com as mudanças que ocorrerem. Em outras palavras, se elas ativarem as mensagens push para seu site, saiam e voltem uma semana depois, a interface deve destacar que as mensagens push já estão ativadas.
Você pode encontrar algumas diretrizes de UX neste documento, Neste artigo, vamos nos concentrar nos aspectos técnicos.
Neste ponto, você pode estar pensando que há apenas dois estados para lidar, ativado ou desativado. No entanto, há outros estados notificações que você precisa considerar.
Há várias APIs que precisamos verificar antes de ativar nosso botão. Se tudo for suportado, poderemos ativar nossa interface e definir o estado inicial como indicam se as mensagens push são inscritas ou não.
Como a maioria dessas verificações resulta na desativação da interface, recomendamos defina o estado inicial como desativado. Isso também evita qualquer confusão caso haja ser um problema com o JavaScript da página, por exemplo, o arquivo JS não pode ser baixado ou o usuário desativou o JavaScript.
<button class="js-push-button" disabled>
Enable Push Messages
</button>
Com esse estado inicial, podemos realizar as verificações descritas acima na
Método initialiseState(), ou seja, depois que nosso service worker é registrado.
// Once the service worker is registered set the initial state
function initialiseState() {
// Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
console.warn('Notifications aren\'t supported.');
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
console.warn('The user has blocked notifications.');
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn\'t supported.');
return;
}
// We need the service worker registration to check for a subscription
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Do we already have a push message subscription?
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
// Enable any UI which subscribes / unsubscribes from
// push messages.
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = false;
if (!subscription) {
// We aren't subscribed to push, so set UI
// to allow the user to enable push
return;
}
// Keep your server in sync with the latest subscriptionId
sendSubscriptionToServer(subscription);
// Set your UI to show they have subscribed for
// push messages
pushButton.textContent = 'Disable Push Messages';
isPushEnabled = true;
})
.catch(function(err) {
console.warn('Error during getSubscription()', err);
});
});
}
Uma breve visão geral dessas etapas:
- Verificamos se
showNotificationestá disponível no ServiceWorkerRegistration protótipo. Sem ela, não será possível mostrar uma notificação do nosso service worker. quando uma mensagem push é recebida. - Verificamos qual é o
Notification.permissionatual para garantir que ele não"denied". Uma permissão negada significa que você não pode mostrar notificações até que o usuário altere manualmente a permissão no navegador. - Para saber se as mensagens push são compatíveis, confira se
PushManageré disponível no objeto da janela. - Por fim, usamos
pushManager.getSubscription()para verificar se já ou não. Se isso acontecer, vamos enviar os detalhes da assinatura para o para garantir que temos as informações corretas e definir a interface para indicar se as mensagens push já estão ativadas ou não. Veremos quais detalhes existem no objeto de assinatura mais adiante neste artigo.
Aguardamos até que navigator.serviceWorker.ready seja resolvido para verificar se há
assinatura e ativar o botão, porque ele só ocorre depois que o serviço
está ativo e é possível se inscrever em mensagens push.
A próxima etapa é lidar com quando o usuário quiser ativar as mensagens push, mas antes de fazer isso, precisamos configurar um projeto do Google Developer Console e adicionar alguns parâmetros ao nosso manifesto para usar o Firebase Cloud Messaging (FCM); anteriormente conhecido como Google Cloud Messaging (GCM).
Criar um projeto no Firebase Developer Console
O Chrome usa o FCM para gerenciar o envio e a entrega de mensagens push. No entanto, para usar a API do FCM, será necessário configurar um projeto no Firebase Developer Console.
As etapas a seguir são específicas para o Chrome, Opera para Android e Samsung. navegador, eles usam o FCM. Discutiremos como isso funciona em outros navegadores posteriormente neste artigo.
Criar um novo projeto de desenvolvedor do Firebase
Para começar, você precisa criar um novo projeto em https://console.firebase.google.com/ clicando em "Criar novo projeto".
Adicione um nome de projeto e crie o projeto para acessá-lo painel de controle:
Neste painel, clique no ícone de engrenagem ao lado do nome do projeto na parte de cima no canto esquerdo e clique em "Configurações do projeto".
Na página de configurações, clique em "Cloud Messaging" .
Esta página contém a chave de API para mensagens push, que será usada mais tarde, e o ID do remetente, que precisamos colocar no manifesto do app da Web na próxima nesta seção.
Adicionar um manifesto de app da Web
Para push, precisamos adicionar um arquivo de manifesto com um campo gcm_sender_id. para que a assinatura push funcione. Esse parâmetro só é exigido pelo Chrome, Opera para Android e Samsung Browser para que possam usar FCM / GCM.
O gcm_sender_id é usado por esses navegadores ao inscrever um usuário do dispositivo com o FCM. Isso significa que o FCM pode identificar o dispositivo do usuário e verifique se o seu ID de remetente corresponde à chave de API correspondente e se o usuário permitiu que seu servidor enviasse mensagens push para eles.
Confira abaixo um arquivo de manifesto bem simples:
{
"name": "Push Demo",
"short_name": "Push Demo",
"icons": [{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"gcm_sender_id": "<Your Sender ID Here>"
}
Você precisa definir o valor gcm_sender_id como o ID do remetente da seu projeto do Firebase.
Depois de salvar o arquivo de manifesto no projeto (manifest.json é uma boa nome), referencie-o no HTML com a seguinte tag no cabeçalho da tag página.
<link rel="manifest" href="/manifest.json">
Se você não adicionar um manifesto da Web com esses parâmetros, uma exceção será gerada
quando você tenta inscrever o usuário para enviar mensagens por push, com o erro
"Registration failed - no sender id provided" ou "Registration failed -
permission denied".
Inscrever-se em mensagens push
Agora que você configurou um manifesto, pode voltar ao JavaScript dos seus sites.
Para fazer a inscrição, é necessário chamar o método subscribe() no objeto PushManager, que você acessa pela ServiceWorkerRegistration.
Isso solicitará que o usuário dê à sua origem permissão para enviar push. notificações. Sem essa permissão, você não poderá se inscrever.
Se a promessa retornou pelo método subscribe() resolver, você receberá um PushSubscription que vai conter um endpoint.
O endpoint deve ser salvo no seu servidor para cada usuário, pois você precisará que ele envie mensagens push mais tarde.
O código a seguir inscreve o usuário para mensagens push:
function subscribe() {
// Disable the button so it can't be changed while
// we process the permission request
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe()
.then(function(subscription) {
// The subscription was successful
isPushEnabled = true;
pushButton.textContent = 'Disable Push Messages';
pushButton.disabled = false;
// TODO: Send the subscription.endpoint to your server
// and save it to send a push message at a later date
return sendSubscriptionToServer(subscription);
})
.catch(function(e) {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
console.warn('Permission for Notifications was denied');
pushButton.disabled = true;
} else {
// A problem occurred with the subscription; common reasons
// include network errors, and lacking gcm_sender_id and/or
// gcm_user_visible_only in the manifest.
console.error('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
}
});
});
}
Neste ponto, seu aplicativo da web está pronto para receber uma mensagem push, mas nada acontecerá até adicionarmos um listener de eventos push ao nosso arquivo do service worker.
Listener de eventos de push do Service Worker
Quando uma mensagem push é recebida (abordaremos como enviar na próxima seção), um evento de push serão despachadas no seu service worker, e nesse ponto você precisará para exibir uma notificação.
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
Esse código registra um listener de eventos push e exibe uma notificação com um
título predefinido, corpo do texto, ícone e tag de notificação.
Uma sutileza a ser destacada com este exemplo é a event.waitUntil()
. Esse método recebe uma
promessa e estende a
de um manipulador de eventos (ou pode ser considerado como manter o serviço
worker ativo), até que a promessa
resolvido;
Neste caso, a promessa passada para event.waitUntil é a promessa retornada
de showNotification().
A tag de notificação age como uma identificador exclusivo para notificações exclusivas. Se enviarmos duas mensagens push para o mesmo endpoint do Google Cloud, com um pequeno atraso entre eles, e exibir notificações com a mesma tag, o navegador exibirá a primeira notificação e a substituirá por a segunda notificação quando a mensagem push for recebida.
Para mostrar várias notificações de uma só vez, use outra tag ou sem nenhuma tag. Vejamos um exemplo mais completo de exibição de uma notificação mais adiante neste postagem. Por enquanto, vamos simplificar e conferir se o envio de uma mensagem push mostra esta notificação.
Como enviar uma mensagem push
Nós nos inscrevemos para mensagens push, e nosso service worker está pronto para mostrar uma é hora de enviar uma mensagem push pelo FCM.
Isso se aplica apenas aos navegadores que usam o FCM.
Quando você envia a variável PushSubscription.endpoint ao servidor, o
endpoint do FCM é especial. Há um parâmetro no final do URL que
é um registration_id.
Um exemplo de endpoint seria:
https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
O URL do FCM é:
https://fcm.googleapis.com/fcm/send
O registration_id seria:
APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
Isso é específico para navegadores que usam o FCM. Em um navegador normal, apenas receber um endpoint, e você chamaria esse endpoint de maneira padrão e funciona independentemente do URL.
Isso significa que, no seu servidor, você precisará verificar se o endpoint é para o FCM. Se for, extraia o register_id. Para fazer isso em Python, pode fazer algo como:
if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
endpointParts = endpoint.split('/')
registrationId = endpointParts[len(endpointParts) - 1]
endpoint = 'https://fcm.googleapis.com/fcm/send'
Quando você tiver o ID de registro, poderá fazer uma chamada para a API FCM. Você encontre os documentos de referência sobre a API FCM aqui.
Os principais aspectos a serem lembrados ao chamar o FCM são:
- Um cabeçalho Authorization com um valor de
key=<YOUR_API_KEY>precisa ser definido quando você chama a API, em que<YOUR_API_KEY>é o Chave de API do projeto do Firebase.- A chave de API é usada pelo FCM para encontrar o ID de remetente apropriado, verifique se o usuário deu permissão para seu projeto e, por fim, garantindo que o endereço IP do servidor esteja na lista de permissões desse projeto.
- Um cabeçalho
Content-Typeapropriado deapplication/jsonouapplication/x-www-form-urlencoded;charset=UTF-8, dependendo se você envie os dados no formato JSON ou de formulário. - Uma matriz de
registration_ids. São os IDs de registro que você extrair dos endpoints dos usuários.
Confira a documentação. sobre como enviar mensagens push do seu servidor, mas, para uma verificação rápida do seu service worker, você pode usar cURL para enviar uma mensagem push ao seu navegador.
Trocar <YOUR_API_KEY> e <YOUR_REGISTRATION_ID>
neste comando cURL com o seu e o execute em um terminal.
Você verá uma notificação incrível:
curl --header "Authorization: key=<YOUR_API_KEY>" --header
"Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
"{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
Ao desenvolver sua lógica de back-end, lembre-se de que o cabeçalho Authorization e do corpo POST são específicos para o ponto de extremidade do FCM, portanto detecte quando o é para o FCM e adicione condicionalmente o cabeçalho e formate o corpo POST. Para outros navegadores (e esperamos que o Chrome no futuro), será necessário implementar o protocolo de push da Web.
Uma desvantagem da implementação atual da API Push no Google Chrome é que você não pode enviar dados com uma mensagem push. Nada. A razão para isso é que, em uma implementação futura, os dados de carga útil deverão ser criptografados em seu servidor antes de enviá-lo para um endpoint de mensagens push. Dessa forma, o endpoint, qualquer provedor de push que seja, não conseguirá visualizar facilmente o conteúdo dos mensagem push. Isso também protege contra outras vulnerabilidades, como de certificados HTTPS e ataques "man-in-the-middle" entre e o provedor de push. Essa criptografia ainda não tem suporte, então Enquanto isso, você terá que realizar uma busca para obter as informações necessárias para preencher uma notificação.
Um exemplo mais completo de evento de push
A notificação que vimos até agora é bem básica. No que diz respeito aos exemplos, é muito ruim cobrir um caso de uso real.
Na realidade, a maioria das pessoas quer obter algumas informações do servidor antes de exibir a notificação. Podem ser dados para preencher o título da notificação e a mensagem com algo específico ou ir além e armazenar em cache algumas páginas ou dados para que, quando o usuário clicar na notificação, tudo fica disponível imediatamente quando o navegador é aberto, mesmo se o não está disponível naquele momento.
No código a seguir, buscamos alguns dados de uma API, convertemos a resposta em uma e usá-lo para preencher a notificação.
self.addEventListener('push', function(event) {
// Since there is no payload data with the first version
// of push messages, we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(SOME_API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
var notificationTag = data.notification.tag;
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = URL_TO_DEFAULT_ICON;
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
});
Vale a pena destacar, mais uma vez, que event.waitUntil() aceita uma promessa
o que resulta na promessa retornada por showNotification(), ou seja,
que nosso listener de eventos não será encerrado até que a chamada assíncrona fetch() seja concluída, e
a notificação é exibida.
Você vai perceber que mostramos uma notificação mesmo quando há um erro. Isso é porque, se não fizermos isso, o Chrome mostrará sua própria notificação genérica.
Abrir um URL quando o usuário clica em uma notificação
Quando o usuário clica em uma notificação, um evento notificationclick é enviado.
no service worker. Dentro do seu gerenciador, você pode tomar a ação apropriada,
como focar uma guia ou abrir uma janela com um URL específico:
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWindow('/');
}
})
);
});
Este exemplo abre o navegador na raiz da origem do site, focando uma guia de mesma origem, se houver. Caso contrário, abre uma nova.
Há uma postagem dedicada a algumas das coisas que você pode fazer com a API Notification (em inglês).
Cancelar inscrição no dispositivo de um usuário
Você inscreveu o dispositivo de um usuário e ele está recebendo mensagens push, mas como você pode cancelar a inscrição deles?
O principal requisito para cancelar a inscrição do dispositivo de um usuário é chamar o
unsubscribe() no
PushSubscription
e remover o endpoint dos seus servidores (só para que você não
enviar mensagens push que você sabe que não serão recebidas). O código abaixo
exatamente isto:
function unsubscribe() {
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// To unsubscribe from push messaging, you need get the
// subscription object, which you can call unsubscribe() on.
serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) {
// Check we have a subscription to unsubscribe
if (!pushSubscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
isPushEnabled = false;
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
return;
}
var subscriptionId = pushSubscription.subscriptionId;
// TODO: Make a request to your server to remove
// the subscriptionId from your data store so you
// don't attempt to send them push messages anymore
// We have a subscription, so call unsubscribe on it
pushSubscription.unsubscribe().then(function(successful) {
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
isPushEnabled = false;
}).catch(function(e) {
// We failed to unsubscribe, this can lead to
// an unusual state, so may be best to remove
// the users data from your data store and
// inform the user that you have done so
console.log('Unsubscription error: ', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
});
}).catch(function(e) {
console.error('Error thrown while unsubscribing from push messaging.', e);
});
});
}
Como manter a assinatura atualizada
As assinaturas podem ficar fora de sincronia entre o FCM e seu servidor. Confirme se
o servidor analisa o corpo da resposta do POST de envio da API FCM, procurando
Resultados de error:NotRegistered e canonical_id, conforme explicado na documentação do FCM.
As assinaturas também podem ficar fora de sincronia entre o service worker e seu
servidor. Por exemplo, depois de assinar/cancelar a inscrição, um erro
conexão de rede pode impedir que você atualize seu servidor; ou um usuário pode
revogar a permissão de notificações, o que aciona o cancelamento automático do cancelamento. Identificador
nesses casos, verificando o resultado
serviceWorkerRegistration.pushManager.getSubscription() periodicamente (por exemplo,
no carregamento da página) e sincronizá-la com o servidor. Você também pode querer
faça uma nova assinatura automaticamente se não tiver mais uma assinatura e
Notification.permission == 'granted'.
Em sendSubscriptionToServer(), você terá que considerar como lida com
falha nas solicitações de rede ao atualizar endpoint. Uma solução é
para acompanhar o estado de endpoint em um cookie
para determinar se o servidor precisa
dos detalhes mais recentes ou não.
Todas as etapas acima resultam em uma implementação completa de mensagens push na Web no Chrome 46. Ainda há recursos específicos que tornarão tudo mais fácil (como uma API padrão para acionar mensagens push), mas essa versão permite que você comece a criar mensagens push nos seus aplicativos da Web hoje mesmo.
Como depurar seu app da Web
Ao implementar mensagens push, os bugs ficarão em um de dois lugares: sua página ou o service worker.
Os bugs da página podem ser depurados usando DevTools. Depurar o service worker problemas, você tem duas opções:
- Acesse chrome://inspect > Service Workers Essa visualização não fornece muitas informações além dos service workers em execução no momento.
- Acesse chrome://serviceworker-internals para ver estado dos service workers e ver os erros, se houver algum. Esta página é temporária até que o DevTools tenha um conjunto de recursos semelhante.
Uma das melhores dicas que posso dar para quem é novo nos service workers é use a caixa de seleção "Abrir a janela do DevTools e pausar a execução do JavaScript" na inicialização do service worker para depuração". Esta caixa de seleção adicionará um ponto de interrupção em o início do service worker e pausar a execução, isso permite ou navegue pelo script do seu service worker e veja se algum para solucionar problemas fáceis e de produção.
Se houver um problema entre o FCM e o evento push do service worker, então não há muito que você possa fazer para depurar o problema, pois não há maneira de para ver se o Chrome recebeu algo. O principal item do FCM é bem-sucedida quando o servidor faz uma chamada de API. Ele terá a aparência algo como:
{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}
Observe a resposta "success": 1. Se você vir uma falha,
sugere que há algo de errado com o ID de registro do FCM e o envio
não está sendo enviada ao Chrome.
Depuração de service workers no Google Chrome para Android
No momento, a depuração de service workers no Google Chrome para Android não é óbvia. Acesse chrome://inspect, encontre o seu dispositivo e procure item da lista com o nome "Worker pid:....". que tem o URL do serviço worker.
UX para notificações push
A equipe do Chrome está elaborando um documento de práticas recomendadas para UX com notificações push, bem como um documento que aborda alguns dos casos extremos ao trabalhar com notificações push.
- Práticas recomendadas para UX de permissões de notificações push
- Casos e mitigações de notificações push
O futuro das mensagens push no Chrome e na Web aberta
Esta seção entrará em detalhes sobre algumas configurações do Chrome partes específicas desta implementação das quais você deve estar ciente e como ela será diferente de outras implementações de navegador.
Protocolo de push da Web e endpoints
A beleza do padrão da API Push é que você deve poder pegar o endpoint, transmita-os ao servidor e envie implementando o protocolo de push da Web.
O protocolo Web push é um novo padrão que os provedores de push podem implementar, Assim, os desenvolvedores não precisam se preocupar com o provedor de push. A Com isso, você evita a necessidade de se inscrever para chaves de API e enviar dados formatados, como acontece com o FCM.
O Chrome foi o primeiro navegador a implementar a API Push e o FCM não
são compatíveis com o protocolo Web push, e é por isso que o Chrome exige
gcm_sender_id e você precisa usar a API RESTful para o FCM.
O objetivo final do Chrome é adotar o Web Push Protocol com o Chrome e o FCM.
Até lá, é preciso detectar o endpoint "https://fcm.googleapis.com/fcm/send" e processá-lo separadamente de outros endpoints, ou seja, formatar os dados de payload em um maneira específica e adicione a chave de autorização.
Como implementar o protocolo de push na Web?
O Firefox Nightly está trabalhando atualmente no push e provavelmente será o primeiro navegador para implementar o protocolo Web push.
Perguntas frequentes
Onde estão as especificações?
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/
Posso evitar notificações duplicadas se minha presença na Web tiver várias origens ou se eu tiver uma presença nativa e na Web?
Não há uma solução para isso no momento, mas você pode acompanhar o progresso no Chromium.
O cenário ideal seria ter algum tipo de ID para o dispositivo de um usuário e no lado do servidor, corresponda os IDs de assinatura do app nativo e da Web, e decide para qual deles a mensagem push será enviada. Você pode fazer isso pelo tamanho da tela, do dispositivo, compartilhando uma chave gerada entre o aplicativo da Web e o aplicativo nativo, mas cada abordagem tem seus prós e contras.
Por que preciso de um gcm_sender_id?
Isso é necessário para que o Google Chrome, o Opera para Android e o navegador Samsung possam usar a API Firebase Cloud Messaging (FCM). O objetivo é usar Web Push Protocol quando o padrão estiver finalizado e o FCM puder oferecer suporte a ele.
Por que não usar soquetes da Web ou eventos enviados pelo servidor (EventSource)?
A vantagem de usar mensagens push é que, mesmo se a página estiver fechada, o O service worker será ativado e poderá mostrar uma notificação. Soquetes da Web e EventSource encerram a conexão quando a página ou o navegador são fechados.
E se eu não precisar da entrega de eventos em segundo plano?
Se você não precisa de entrega em segundo plano, os Web Sockets são uma ótima opção.
Quando posso usar o recurso "Push" sem mostrar notificações (por exemplo, com o envio silencioso em segundo plano)?
Ainda não temos uma previsão de quando ele estará disponível, mas há intenção de implementar a sincronização em segundo plano e, embora não seja decidido nem especificado, há alguma discussão sobre como viabilizar push silencioso com sincronização em segundo plano.
Por que requer HTTPS? Como posso contornar isso durante o desenvolvimento?
Os service workers exigem origens seguras para garantir que o script do service worker vem da origem pretendida e não vem de um intermediário, ataque Atualmente, isso significa usar HTTPS em sites ativos, embora o localhost a trabalhar durante o desenvolvimento.
Como é a compatibilidade com navegadores?
O Chrome é compatível em sua versão estável e o Mozilla está trabalhando no Firefox Nightly. Consulte o bug Como implementar a API Push para mais informações Acompanhe a implementação das notificações neste link.
Posso remover uma notificação depois de um determinado período?
No momento, isso não é possível, mas estamos planejando adicionar suporte para obter um lista de notificações visíveis no momento. Se você tiver um caso de uso para definir a expiração da notificação depois que ela é criada, gostaríamos de saber Adicione um comentário e ele será encaminhado para a equipe do Chrome.
Se você só precisar impedir que uma notificação push seja enviada ao usuário depois de um determinado período, e não importa por quanto tempo a notificação permanece visível, você pode usar o parâmetro time to live (ttl) do FCM, Saiba mais aqui.
Quais são as limitações das mensagens push no Chrome?
Há algumas limitações descritas nesta postagem:
- O uso do CCM pelo Chrome como um serviço push cria vários sites e cumprimento de requisitos regulatórios. Estamos trabalhando juntos para ver se algum deles pode ser removido no futuro.
- Você precisa mostrar uma notificação ao receber uma mensagem push.
- O Chrome para computador tem a ressalva de que, se ele não estiver em execução, enviar mensagens não serão recebidas. Isso é diferente do ChromeOS e do Android, em que as mensagens push sempre serão recebidas.
Não deveríamos usar a API Permissions?
A A API Permission foi implementada no Chrome, mas não necessariamente estará disponível em todos os navegadores. Saiba mais neste link.
Por que o Chrome não abre a guia anterior quando clico em uma notificação?
Esse problema só afeta as páginas que não são controladas por um serviço no momento worker. Saiba mais nesta postagem.
E se uma notificação estiver desatualizada no momento em que o dispositivo do usuário recebeu o push?
Sempre é necessário mostrar uma notificação ao receber uma mensagem push. Nos casos em que você quer enviar uma notificação, mas é útil apenas por um determinado período, é possível usar o atributo 'time_to_live' na CCM para que o FCM não envie a mensagem de push caso ela passe do tempo de expiração.
O que acontece se eu enviar 10 mensagens push, mas quiser que o dispositivo receba apenas uma?
O FCM tem uma propriedade que pode ser usado para instruir o FCM a substituir que tenha a mesma 'colapso_key', com a nova mensagem.