E aí, galera!

Estava precisando fazer um push notificações com o Quasar framework, mas em minhas buscas não achei nada que me fosse realmente útil.

Depois tirar um pedacinho de cada artigo que achei, consegui, e deixarei aqui uma solução que funcionou pra mim.

Vamos lá!

Dependências

Instalar cli do quasar:

npm install -g @quasar/cli

Instalar cli do vuejs:

npm install -g @vue/cli

Para cria um app do zero você pode utilizar o comando abaixo:

quasar create <app-name>

Ou você pode usar um template base que disponibilizei no meu GitHub (é o que eu vou usar neste artigo).

Iniciando

Clone o projeto na sua máquina com o comando a seguir:

git clone https://github.com/niltonslf/quasar-app-template.git

Instale as dependências do projeto:

npm i

Pelo terminal, navegue até a pasta do projeto e rode o comando abaixo para que o Quasar crie a pasta src-cordova com os arquivos do app.

npm run dev:android

Esse comando é um npm script que deixei já configurado no meu template. Se você não tiver clonado meu projeto, digite o seguinte comando:

quasar dev -m cordova -T android -t mat -p 9090

Dentro da pasta src-cordova, utilize o comando abaixo para instalar o plugin responsável por fazer a comunicação do Firebase com o app.

cordova plugin add cordova-plugin-fcm-with-dependecy-updated

Depois de finalizar a instalação, pode ser que você receba um erro semelhante ao que está abaixo. Isso porque você precisa adicionar ao seu projeto um arquivo google-services.json (já faremos isso).

Error: cordova-plugin-fcm: You have installed platform android but file 
'google-services.json' was not found in your Cordova project root folder.

Configurando Firebase

Com todos os plugins devidamente instalados no seu app, você vai precisar criar um projeto no Firebase.

Acesse seu console do Firebase, procure o botão Add project, preencha o modal com as informações do seu app, marque as caixas de seleção e clique em Create project.

Acesse o painel de configurações do projeto que você criou e adicione um app no projeto.

Neste artigo farei as configurações para um app Android, mas você também consegue fazer para iOS (só não sei como).

O android package name é o id do seu projeto (podemos encontrá-lo no arquivo package.json). App nickname é o nome do app. Em Debug signing certificate SHA-1 não precisa preencher nada. Depois de preenchido, clique em register app.

Na tela a baixo, faça o download do arquivo google-services.json.

Clique em next até chegar na tela abaixo. Depois, clique em skip this step.

Configurando o app

Agora que já temos o google-services.json, faça uma cópia dele dentro da pasta src-cordova.

Em seguida, edite o arquivo <appname>-FCMPlugin.gradle dentro de src-cordova/platforms/cordova-plugin-fcm-with-dependecy-updated adicionando a seguinte linha de código:

classpath 'com.android.tools.build:gradle:2.3.+'
classpath 'com.google.gms:google-services:4.0.1'

Dentro de src-cordova/platforms/android/project.properties altere as duas linhas a seguir:

cordova.system.library.1=com.google.firebase:firebase-core:16.0.8
cordova.system.library.2=com.google.firebase:firebase-messaging:17.5.0

Pronto. Todas as configurações necessárias foram realizadas! Agora precisamos preparar a lógica para exibir as notificações no app.

Lógica das notificações

Crie um arquivo FCMPushNotifications.js dentro de src/plugins e adicione o código abaixo. Estou deixando uma lógica bem genérica. Você pode – e deve – usar esse arquivo para programar de acordo com a sua necessidade.

export default ({ router }) => {
// Recebe notificações vindas do firebase cloud message
function onNotificationCallback (data) {
    alert('Notificações recebida', JSON.stringify(data))
}
// mensagem de sucesso
function success (msg) {
    alert('Sucesso', JSON.stringify(msg))
}
// mensagem de erro
function error (msg) {
    alert('error', msg)
}
setTimeout(() => {
    // Listener do evento de notificação
    window.FCMPlugin.onNotification(onNotificationCallback, success, error)
    }, 200)
}

Com o arquivo criado, adicione-o na lista de plugins do Quasar. Abra o arquivo quasar.config.js e adicione FCMPushNotifications no array de plugins do Quasar.

Fazendo isso esse arquivo será carregado pelo Quasar antes mesmo que a instância do vue seja inciada, ou seja, temos esse plugin que criamos funcionando globalmente no app.

Tendo feito isso, o app estará configurado para receber as notificações. O que estará faltando é só um gatilho para as notificação do app.

O gatilho pode ser uma aplicação que você construiu, uma página criada em um site, ou qualquer coisa.

No meu caso, eu tinha alguns dados sendo carregados no app através de um site em WordPress.

Por isso, sempre que uma página fosse adicionada nele, o app deveria receber uma notificação de que essa página foi criada. Mostrarei a solução para o meu caso.

Antes, para garantir que tudo está certo, é possível testar se todas as configurações feitas até aqui estão funcionando. O link abaixo é de uma página que você pode utilizar para testar os push notifications:

• cordova-plugin-fcm tester

Testando se funciona

Antes de tudo foram feitas várias alterações no código do app, porém, para que o Quasar gere um versão do seu app com essas modificações, é necessário rodar um dos comandos abaixo:

npm run dev:android (se tiver clonado meu repositório)

// SE NÃO

quasar dev -m cordova -T android -t mat -p 9090

Nessa página será solicitado sua api key. Você pode achá-la dentro do Firebase, nas configurações do projeto, indo em Cloud Messaging.

Com o projeto rodando do celular, preencha os dados de teste e clique em Send. Se tudo der certo será exibido um alert no seu celular.

Integrando com WordPress

A integração com o WordPress é bem simples. Para fazê-la, você precisará instalar o plugin Firebase push notification no WordPress, adicionar sua key do Firebase, e pronto!

Com o plugin instalado você precisará informar sua API KEY (lembra dela? Mostrei como achá-la um pouco antes) do Firebase e definir o tópico que o WordPress deve enviar a notificação.

No meu caso, colocando all já resolveu. O plugin também disponibiliza opções de quando você deseja que o WordPress envie as notificações.

Quase me esqueci: o plugin tem uma opção para disparar notificações de teste. Para isso, basta clicar no link Test notification logo abaixo do botão de salvar alterações

Pronto! Agora, sim, está tudo finalizado! Nas imagens abaixo ilustro como as notificações chegarão no celular que tem o app instalado.

Essas notificações serão disparadas para o app toda vez que tiver uma página criada, editada, dependendo do que você escolheu, no WordPress.

Espero que esse artigo tenha te ajudado de alguma forma. Tentei deixar o mais explicativo possível, mas se não conseguir alcançar esse objetivo, me envie uma mensagem para que eu possa melhorar em artigos futuros.

Link para o projeto com tudo já configurado:

• Quasar App with push notifications