diff --git a/README.md b/README.md index 230613f..e30fe0c 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Bharat Saraswat
Bharat Saraswat

💻 🎨 🤔 🐛 👀 ⚠️ 🖋 🚧 Ananyo Maiti
Ananyo Maiti

💻 👀 🐛 🖋 🚇 🚧 aditya_369
aditya_369

💻 + Aarshad Devani
Aarshad Devani

💻 diff --git a/_includes/head.html b/_includes/head.html index 45e0a26..7a3ed53 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -54,6 +54,10 @@ + + + + + diff --git a/assets/js/notifications.js b/assets/js/notifications.js new file mode 100644 index 0000000..c7ac200 --- /dev/null +++ b/assets/js/notifications.js @@ -0,0 +1,173 @@ +const publicVapidKey = + "BAK9aUUilxzljIZVaKm8gjt6MWYsXQFbhluMMCFCddHbWug4_H48Q4XtbCwBSPZ9V3wcNUGr92twrEbmGMyABKU"; +const firebaseConfig = { + apiKey: "AIzaSyCZ8gbWs9FLlzw93BOj_OQzlWwd_F1N-IY", + authDomain: "pyconhyd.firebaseapp.com", + databaseURL: "https://pyconhyd.firebaseio.com", + projectId: "pyconhyd", + storageBucket: "pyconhyd.appspot.com", + messagingSenderId: "254977934750", + appId: "1:254977934750:web:9f1ad0357425e5718d828f" +}; +firebase.initializeApp(firebaseConfig); +const messaging = firebase.messaging(); +messaging.usePublicVapidKey(publicVapidKey); + +const tokenDivId = "token_div"; +const permissionDivId = "permission_div"; + +messaging.onTokenRefresh(() => { + messaging + .getToken() + .then(refreshedToken => { + console.log("Token refreshed."); + setTokenSentToServer(false); + sendTokenToServer(refreshedToken); + // Display new Instance ID token and clear UI of all previous messages. + resetUI(); + }) + .catch(err => { + console.log("Unable to retrieve refreshed token ", err); + showToken("Unable to retrieve refreshed token ", err); + }); +}); + +messaging.onMessage(payload => { + console.log("Message received. ", payload); + // Update the UI to include the received message. + appendMessage(payload); +}); + +function resetUI() { + clearMessages(); + showToken("loading..."); + messaging + .getToken() + .then(currentToken => { + if (currentToken) { + sendTokenToServer(currentToken); + updateUIForPushEnabled(currentToken); + } else { + // Show permission request. + console.log( + "No Instance ID token available. Request permission to generate one." + ); + // Show permission UI. + updateUIForPushPermissionRequired(); + setTokenSentToServer(false); + } + }) + .catch(err => { + console.log("An error occurred while retrieving token. ", err); + showToken("Error retrieving Instance ID token. ", err); + setTokenSentToServer(false); + }); +} + +// [TODO] - write code here to show on UI, this is not exactly notification handled +function showToken(currentToken) { + // Show token in console and UI. + const tokenElement = document.querySelector("#token"); + !!tokenElement && (tokenElement.textContent = currentToken); +} + +function sendTokenToServer(currentToken) { + if (!isTokenSentToServer()) { + console.log("Sending token to server..."); + // TODO(developer): Send the current token to your server. + setTokenSentToServer(true); + } else { + console.log( + "Token already sent to server so won't send it again " + + "unless it changes" + ); + } +} +function isTokenSentToServer() { + return window.localStorage.getItem("sentToServer") === "1"; +} + +function setTokenSentToServer(sent) { + window.localStorage.setItem("sentToServer", sent ? "1" : "0"); +} + +function showHideDiv(divId, show) { + const div = document.querySelector("#" + divId); + if (!!div) { + if (show) { + div.style = "display: visible"; + } else { + div.style = "display: none"; + } + } +} + +function requestPermission() { + console.log("Requesting permission..."); + Notification.requestPermission().then(permission => { + if (permission === "granted") { + console.log("Notification permission granted."); + resetUI(); + } else { + console.log("Unable to get permission to notify."); + } + }); +} + +function deleteToken() { + // Delete Instance ID token. + messaging + .getToken() + .then(currentToken => { + messaging + .deleteToken(currentToken) + .then(() => { + console.log("Token deleted."); + setTokenSentToServer(false); + // Once token is deleted update UI. + resetUI(); + }) + .catch(err => { + console.log("Unable to delete token. ", err); + }); + }) + .catch(err => { + console.log("Error retrieving Instance ID token. ", err); + showToken("Error retrieving Instance ID token. ", err); + }); +} + +// [TODO] - Write code to show custom UI Notification for website +function appendMessage(payload) { + // const messagesElement = document.querySelector("#messages"); + // const dataHeaderELement = document.createElement("h5"); + // const dataElement = document.createElement("pre"); + // dataElement.style = "overflow-x:hidden;"; + // dataHeaderELement.textContent = "Received message:"; + // dataElement.textContent = JSON.stringify(payload, null, 2); + // messagesElement.appendChild(dataHeaderELement); + // messagesElement.appendChild(dataElement); +} + +function clearMessages() { + const messagesElement = document.querySelector("#messages"); + if (!!messagesElement) { + while (messagesElement.hasChildNodes()) { + messagesElement.removeChild(messagesElement.lastChild); + } + } +} + +function updateUIForPushEnabled(currentToken) { + showHideDiv(tokenDivId, true); + showHideDiv(permissionDivId, false); + showToken(currentToken); +} + +function updateUIForPushPermissionRequired() { + showHideDiv(tokenDivId, false); + showHideDiv(permissionDivId, true); + requestPermission(); +} + +resetUI(); diff --git a/firebase-messaging-sw.js b/firebase-messaging-sw.js new file mode 100644 index 0000000..b4b0621 --- /dev/null +++ b/firebase-messaging-sw.js @@ -0,0 +1,31 @@ +importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"); +importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js"); + +const firebaseConfig = { + apiKey: "AIzaSyCZ8gbWs9FLlzw93BOj_OQzlWwd_F1N-IY", + authDomain: "pyconhyd.firebaseapp.com", + databaseURL: "https://pyconhyd.firebaseio.com", + projectId: "pyconhyd", + storageBucket: "pyconhyd.appspot.com", + messagingSenderId: "254977934750", + appId: "1:254977934750:web:9f1ad0357425e5718d828f" +}; +firebase.initializeApp(firebaseConfig); +const messaging = firebase.messaging(); +messaging.setBackgroundMessageHandler(function(payload) { + console.log( + "[firebase-messaging-sw.js] Received background message ", + payload + ); + // Customize notification here + const notificationTitle = payload.notification.title; + const notificationOptions = { + body: payload.notification.body, + icon: payload.notification.image || "/favion.ico" + }; + + return self.registration.showNotification( + notificationTitle, + notificationOptions + ); +});