Chrome Extension + Push Browser com OneSignal

Hoje, vamos falar da implementação do OneSignal para Push Browser em extensões do Google Chrome, implementação realizada na nova ferramenta do It’simple, o Radar de Ofertas, disponível para download aqui.

Ainda não sabe o que é Push Browser? Então:

• https://brjs.com.br/post/browser-push-notification
• https://brjs.com.br/post/browser-push-dinamico
• https://brjs.com.br/post/onesignal-push-service

Criando projeto

As informações para criação de projeto no Google Console está disponível na postagem sobre OneSignal Push Service. O processo é o mesmo, caso ainda não tenha sido realizado. E ao término, serão necessários o ProjectID e a API Server para configuração do OneSignal. A documentação completa do processo está neste link.

Configurando extensão

Agora, vamo configurar a extensão, como foi falado aqui. As extensões para Chrome possuem três níveis de acesso/ segurança, logo, os únicos scripts que possuem acesso ao window são os scripts de background ou via injection. Logo vamos criar o background.js e adicionar no manifest.json, junto com a SDK javascript da OneSignal, disponível para download neste link.

"background": {
    "persistent": false,
    "scripts": ["OneSignal.js", "background.js"]
},

no arquivo background.js, adicione a seguinte linha:

OneSignal.init({appId: "SEU ID ONESIGNAL", googleProjectNumber: "ID DO SEU PROJETO NO GOOGLE CONSOLE"});

Agora, será necessário solicitar permissão no manifest.json para uso do GCM:

"permissions": [
    "gcm",
    "notifications",
    "storage",
    "identity"       
]

E está configurado o OneSignal na sua extensão para Google Chrome. Diferentemente da implementação via Service Worker, quando o usuário instala sua extensão automaticamente, ele já está aceitando o Push Browser, portanto, não será solicitado autorização via popup. O processo de envio de mensagem é o mesmo, via backend da OneSignal ou via API.