In questo articolo vedremo come integrare in un progetto web Firebase Cloud messaging (FCM) per inviare notifiche agli utenti (che le richiedono) quando l'applicazione è in background, partendo da un progetto base.
Le pagine di riferimento sono:
FCM funziona solo su protocolli https, pertanto assicurarsi prima che sul dominio sia presente una connessione sicura.
Per poter integrare FCM innanzitutto bisogna creare un nuovo progetto nella Firebase Console:
per poter accedere bisogna avere un account Google.
Nella schermata principale del progetto appena creato cliccare su Settings in alto a sinistra:
e poi su Impostazioni progetto, nella nuova schermata che si aprirà ci sono diverse schede disponibili.
Nella scheda Generali ci sono le informazioni relative al progetto, come Nome progetto, ID progetto, ect., nella parte bassa c'è la sezione 'Le tue app' in cui bisogna scegliere una piattaforma per iniziare,
quelle disponibili sono Android, IOS e Web, nel nostro caso scegliamo quest'ultima
aggiungere un Nickname app e cliccare su Registra app.
Nella scheda Cloud Messaging delle Impostazioni del progetto prendiamo nota della Chiave server nella sezione Credenziali di progetto
e infine nella sezione Configurazione web generiamo una coppia di chiavi
e prendiamo nota delle due chiavi generate.
A questo punto possiamo iniziare a comporre il nostro progetto partendo da uno di base, per fare ciò scarichiamo la repository quickstart-js, all'interno di questa repository ci sono diverse cartelle, quella di cui abbiamo bisogno per creare il nostro progetto base è messaging, i file presenti in questa cartella sono:
- .eslintrc.json
- README.md
- firebase-logo.png
- firebase-messaging-sw.js
- firebase.json
- index.html
- main.css
- manifest.json
Nella stessa cartella messaging (o nella root del progetto) creamo un file init-firebase.js con la configurazione del nostro progetto creato in precedenza in Firebase Console:
init-firebase.js
var firebaseConfig=
{
apiKey:"<Api-Key>",
authDomain:"<ID-Progetto>.firebaseapp.com",
databaseURL:"https://<ID-Progetto>.firebaseio.com",
projectId:"<ID-Progetto>",
storageBucket:"<ID-Progetto>.appspot.com",
messagingSenderId:"<Id-Mittente>",
appId:"<App-Id>",
measurementId:"<Measurement-Id>"
};
firebase.initializeApp(firebaseConfig);questo codice è disponibile nella sezione le tue app della scheda Generali in Impostazioni del progetto.
Modifichiamo il file index.html sostituendo
<script src="/__/firebase/7.4.0/firebase-app.js"></script>
<script src="/__/firebase/7.4.0/firebase-messaging.js"></script>
<script src="/__/firebase/init.js"></script>con
<script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.4.0/firebase-messaging.js"></script>
<script src="init-firebase.js"></script>e scriviamo la nostra chiave publica (non privata) generata prima in
messaging.usePublicVapidKey( <Chiave Publica> );modifichiamo messaging.onMessage() in modo che le notifiche vengano visualizzate anche quando l'applicazione non è in backgraund
messaging.onMessage(function(payload)
{
const notificationTitle=payload.notification.title;
const notificationOptions=
{
body: payload.notification.body,
icon: payload.notification.icon,
click_action: payload.notification.click_action
};
if(!("Notification" in window))
{
console.log("This browser does not support system notifications");
}
else if(Notification.permission==="granted")
{
var notification=new Notification(notificationTitle,notificationOptions);
notification.onclick=function(event)
{
event.preventDefault();
window.open(payload.notification.click_action,'_blank');
notification.close();
}
}
});Modifichiamo il file firebase-messaging-sw.js sostituendo
importScripts('/__/firebase/7.4.0/firebase-app.js');
importScripts('/__/firebase/7.4.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');con
importScripts('https://www.gstatic.com/firebasejs/7.4.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.4.0/firebase-messaging.js');
importScripts('init-firebase.js');le ultime versioni disponibili di firebasejs in questo caso sono la versione 7.4.0.
Modifichiamo il file manifest.json inserendo il nostro ID mittente
{
"//_comment1": "Some browsers will use this to enable push notifications.",
"//_comment2": "It is the same for all projects, this is not your project's sender ID",
"gcm_sender_id": "<qui ID mittente>"
}l' ID mittente è disponibile nella sezione Credenziali di progetto della scheda Cloud Messaging in Impostazioni del progetto.
Adesso che abbiamo un progetto configurato correttamente, proviamo ad aprire nel browser Chrome il file index.html, visualizzeremo una pagina con un bottone 'REQUEST PERMISSION'
cliccando su questo bottone arancione apparirà l'alert 'Mostrare le notifiche', con due opzioni 'Consenti' e 'Blocca', cliccando su Consenti verrà generato un token che comparirà sotto al bottone REQUEST PERMISSION, prendiamo nota di questo token perchè ci servirà per invire le notifiche.
A questo punto non ci resta altro da fare che scrivere l'applicazione php per inviare le notifiche:
Codice PHP
<?php
define('SERVER_API_KEY','<Scrivi qui la Chiave Server>');
$tokens='<Scrivi qui il token generato>';
$header=['Authorization:key='.SERVER_API_KEY,'Content-Type:Application/json'];
/* Notifica da inviare >> */
$notification = [
'title'=>'il blog di un programmatore ha un nuovo articolo',
'body'=>'React JS, impostare l\'ambiente di lavoro',
'icon'=>'https://www.ilblogdiunprogrammatore.it/image/favicon.ico',
'click_action'=>'https://www.ilblogdiunprogrammatore.it/39825-react-js-impostare-l-ambiente-di-lavoro.html'
];
/* << Notifica da inviare */
$payload=['notification'=>$notification,'to'=>$tokens];
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL=>"https://fcm.googleapis.com/fcm/send",
CURLOPT_RETURNTRANSFER=>true,
CURLOPT_CUSTOMREQUEST=>"POST",
CURLOPT_POSTFIELDS=>json_encode($payload),
CURLOPT_HTTPHEADER=>$header
));
$response=curl_exec($curl);
$err=curl_error($curl);
curl_close($curl);
if ($err){
echo "cURL Error #:".$err;
}else{
echo $response;
}
?>