Como criar notificações Desktop para usar em web-extensões (Firefox, Chrome e etc) e também gostaria de saber se existe alguma diferença entre Chrome, Opera e Firefox?
Nota: isto é uma pergunta tutorial, leia mais em:
Como criar notificações Desktop para usar em web-extensões (Firefox, Chrome e etc) e também gostaria de saber se existe alguma diferença entre Chrome, Opera e Firefox?
Nota: isto é uma pergunta tutorial, leia mais em:
existe alguma diferença entre Chrome, Opera e Firefox?
Atualmente existem sim algumas diferenças, mas são muitos especificas, no caso vou citar apenas sobre o objeto chrome.
, no Firefox ele é suportado, no entanto o padrão dele é o objeto browser.
e então talvez no futuro chrome.
possa ser removido, no entanto para garantir uma retro-compatibilidade você pode criar algo assim:
var chrome = chrome||browser;
Ou então isolar o escopo com IIFE
(function (chrome) {
//seu codigo vai aqui
})(chrome||browser);
Outra situação especifica das notificações Desktop que muda entre os navegadores é o requireInteraction
, que não é suportado pelo Firefox e Opera, apenas pelo Chrome, no proximo exemplo abaixo tem uma maneira de contornar a exception causada no Firefox, mas infelizmente não é possivel forçar que o usuário interaja, já que ainda é uma deficiência dos demais navegadores.
As notificações tem as seguintes propriedades básicas:
type
: tipo da notificação, a maior parte dos navegadores só suporta o basic
title
titulo da notificaçãomessage
: mensagem da notificaçãorequireInteraction
: se definido como true a notificação não irá fechar sozinha, será necessário usar chrome.notifications.clear(<id>);
Para usar será necessário adicionar no seu manifest.json
a permissão notifications
:
"permissions": [
"notifications"
]
Um exemplo simples é seria algo como:
function notificar(id, titulo, texto, imagem)
{
var props = {
"type": "basic",
"title": titulo,
"message": texto,
"requireInteraction": true //Só fecha a notificação quando a pessoa clicar
};
if (imagem) {
//Pega a imagem dentro do add-in com getURL
props.iconUrl = browser.extension.getURL(imagem);
}
try {
chrome.notifications.create(id, props, function() {});
} catch (ee) {
//Firefox não suporta requireInteraction e causa uma exception então o código abaixo é para tentar novamente
//Deleta o requireInteraction se não suportado
delete props.requireInteraction;
//Gera a notificação sem requireInteraction
chrome.notifications.create(id, props, function() {});
}
}
E para detectar o click no popup-notification gerado use:
//Quando clicar em qualquer notificação vai disparar este evento e pelo parametro "id" poderá detectar qual notificação você fechou
chrome.notifications.onClicked.addListener(function(id, byUser) {
//Fecha/remove a notificação após o clique
chrome.notifications.clear(id);
});
O uso ficará assim:
notificar(1, "foo bar", "Olá mundo");
notificar(2, "foo bar", "Olá mundo");
notificar(3, "foo bar", "Olá mundo", "icones/image.png");
O código poderia ser aplicado para testes assim no background.js
:
(function (chrome) {
function notificar(id, titulo, texto, imagem)
{
var props = {
"type": "basic",
"title": titulo,
"message": texto,
"requireInteraction": true
};
if (imagem) {
props.iconUrl = browser.extension.getURL(imagem);
}
try {
chrome.notifications.create(id, props, function() {});
} catch (ee) {
//Firefox não suporta requireInteraction e causa uma exception então o código abaixo é para tentar novamente
delete props.requireInteraction;
chrome.notifications.create(id, props, function() {});
}
}
chrome.notifications.onClicked.addListener(function(id, byUser) {
chrome.notifications.clear(id); //Fecha/remove
});
//Gerar uma notificação aleatória a cada 5 segundos
setTimeout(function () {
notificar(
Date.now(), //Gera uma ID por tempo, a ID pode ser qualquer coisa, só não pode ser repetida
'Titulo', // Titulo da notificação
'Foo Bar', // Texto na notificação
'icones/icone1.png' //Ícone opcional
);
}, 5000);
})(chrome||browser); //Talvez no futuro o Firefox só suporte pelo "browser." isso fará ser retrocompativel
É importante notar que as notificações não se mantem se fechar e abrir novamente o navegador, para poder restaurar elas será necessário usar algo como localStorage
para salvar os dados e toda vez que reabrir o navegador gerar a partir de um localStorage
e ao disparar o evento chrome.notifications.onClicked.addListener
deverá remover os dados das notificações do localStorage
também.