Adding FCM Notifications #133
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
|
Member
There was a problem hiding this comment. Is this line required ? As per my understanding "sentToServer" should be 1 and it gets set when
Author
There was a problem hiding this comment. We are resetting the variable in storage... once the permission will be received the it is set back again... this is evident in
Member
There was a problem hiding this comment. Shouldn't this line appear before |
||
| } | ||
| }) | ||
| .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); | ||
|
Member
There was a problem hiding this comment. Is the double
Author
There was a problem hiding this comment. converting to boolean value using !! to ensure that token exists.. This can be removed but becomes handy when debugging might be required
Member
There was a problem hiding this comment. Ah so for that shouldn't you be storing !tokenElement in a separate variable and then use it here ? That's how you can debug the variable value for boolean. |
||
| } | ||
|
|
||
| function sendTokenToServer(currentToken) { | ||
| if (!isTokenSentToServer()) { | ||
| console.log("Sending token to server..."); | ||
| // TODO(developer): Send the current token to your server. | ||
| setTokenSentToServer(true); | ||
|
Member
There was a problem hiding this comment. So we are assuming here token is already sent to server ?
Author
There was a problem hiding this comment. token can be sent to server from here.. This will be great way to send targeted notifications rather sending to everyone
Member
There was a problem hiding this comment. Thanks for the clarification. Can you mention same in the comment ? |
||
| } 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) { | ||
aarshad-devani marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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(); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = { | ||
|
Member
There was a problem hiding this comment. This is duplicate code. Can you move it to a separate script and import the messaging variable from there ?
Author
There was a problem hiding this comment. This is needed for Firebase-messaging-sw which is basically a background listener all the messages coming in
Member
There was a problem hiding this comment. What I meant is lines 4-14 in this file and line 3-32 in notification.js is duplicte. Please move these lines to separate script and import the messaging variable in both places. |
||
| 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 | ||
| ); | ||
| }); | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.