Using FCM (Firebase Cloud Message) for push notification
Create your project at https://console.firebase.google.com
Add firebase to website
= javascript_include_tag "https://www.gstatic.com/firebasejs/5.9.1/firebase.js" = javascript_include_tag "https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js" = javascript_include_tag "https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"
javascript: var config = { apiKey: "AIzaSyArddRenApWUiRzXO1BaF5jq0cweA1PGiU", authDomain: "scry-e2646.firebaseapp.com", databaseURL: "https://scry-e2646.firebaseio.com", projectId: "scry-e2646", storageBucket: "scry-e2646.appspot.com", messagingSenderId: "552404090729" //"552404090729" }; firebase.initializeApp(config);
Add service worker
A service worker is a script that your browser runs in the background, separate from the web page, enabling features that do not require a web page or user interaction. By default, when you start Firebase, it looks for a file called firebase-messaging-sw.js
- Create public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/3.5.0/firebase-app.js') importScripts('https://www.gstatic.com/firebasejs/3.5.0/firebase-messaging.js') firebase.initializeApp({ 'messagingSenderId': 'YOUR_SENDER_ID' }) const messaging = firebase.messaging() messaging.setBackgroundMessageHandler(function(payload) { console.log('[firebase-messaging-sw.js] Received background message ', payload); // Customize notification here const notificationTitle = 'Background Message Title'; const notificationOptions = { body: 'Background Message body.', icon: '/firebase-logo.png' }; return self.registration.showNotification(notificationTitle, notificationOptions); });
Generate key pair
- Access https://console.firebase.google.com/project/_/settings/cloudmessaging/
- Scroll to the Web configuration section
- Generate key pair
Add gcm id
Add this to public/manifest.json (do not change the number)
{ "gcm_sender_id": "103953800507" }
Script to request permission & browser token
const messaging = firebase.messaging(); messaging.usePublicVapidKey('GENERATED_KEY_PAIR') messaging.requestPermission().then(function() { console.log('Notification permission granted.'); messaging.getToken().then(function(currentToken) { if (currentToken) { console.log('currentToken:', currentToken) } else { console.log('No Instance ID token available.'); } }).catch(function(err) { console.log('An error occurred while retrieving token. ', err); }); }).catch(function(err) { console.log('Unable to get permission to notify.', err); });
Allow notification
Get browser's token
Send notification
You can only see push notification message if your website is not focus or in background (minimize)
curl -X POST -H "Authorization: key=YOUR_API_KEY" -H "Content-Type: application/json" -d '{"notification": {"title": "My title", "body": "Firebase Cloud Messaging for Web using JavaScript", "icon": "alarm.png", "click_action": "https://google.com"}, "to": "BROWSER_TOKEN"}' "https://fcm.googleapis.com/fcm/send"
Check https://firebase.google.com/docs/cloud-messaging/ for more information