You know those the little notification windows that pop up in the top right (Mac) or bottom right (Windows) corner when, for example, a new article on our favorite blog or a new video on YouTube was uploaded? Those are push notifications<\/em>. <\/p>\n

\n
Article Series:<\/h4>\n
\n
Setting Up & Firebase (You are here!)<\/li>\n
The Back End<\/a><\/li>\n<\/ol>\n<\/div>\n
$\"Notification$
Push notification on a Mac in Chrome<\/figcaption><\/figure>\n
A notification consists of the browser logo so the user knows from which software it comes from, a title, the website URL it was sent from, a short description, and a custom icon.<\/p>\n
We are going to explore how to implement push notifications. Since it relies on Service Workers, check out these starting points if you are not familiar with it or the general functionality of the Push API:<\/p>\n
\n
Google explains the basics of Push API<\/a><\/li>\n
CSS-Tricks on Service Workers<\/a><\/li>\n<\/ul>\n
What we are going to create<\/h3>\n
$\"\"$
Preview of the our push notification demo website<\/figcaption><\/figure>\n
To test out our notifications system, we are going to create a page with:<\/p>\n
\n
a subscribe button<\/li>\n
a form to add posts<\/li>\n
a list of all the previously published posts<\/li>\n<\/ul>\n
A repo on Github with the complete code can be found here<\/a> and a preview of the project:<\/p>\n
View Demo Site<\/a><\/p>\n
And a video of it working:<\/p>\n
Gathering all the tools<\/h3>\n
You are free to choose the back-end system which suits you best. I went with Firebase<\/a> since it offers a special API which makes implementing a push notification service relatively easy.<\/p>\n
We need:<\/p>\n
\n
A Service Worker (and therefore HTTPS)<\/li>\n
A manifest<\/li>\n
Firebase Realtime Database<\/a> to store our posts<\/li>\n
Firebase Cloud Messaging<\/a> which lets us “reliably deliver messages at no cost”<\/li>\n
Firebase Cloud Functions<\/a> which watches changes in our database and sends the notifications<\/li>\n<\/ul>\n
In this part, we’ll only focus on the front end, including the Service Worker and manifest, but to use Firebase, you will also need to register<\/a> and create a new project.<\/p>\n
Implementing Subscription Logic<\/h3>\n
HTML<\/h4>\n
We have a button to subscribe which gets enabled if 'serviceWorker' in navigator<\/code>. Below that, a simple form and a list of posts:<\/p>\n
<button id=\"push-button\" disabled>Subscribe<\/button>\r\n\r\n<form action=\"#\">\r\n <input id=\"input-title\">\r\n <label for=\"input-title\">Post Title<\/label>\r\n <button type=\"submit\" id=\"add-post\">Add Post<\/button>\r\n<\/form>\r\n\r\n<ul id=\"list\"><\/ul><\/code><\/pre>\nImplementing Firebase<\/h4>\nTo make use of Firebase, we need to implement some scripts.<\/p>\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.1.3\/firebase-app.js\"><\/script>\r\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.1.3\/firebase-database.js\"><\/script>\r\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.1.3\/firebase-messaging.js\"><\/script><\/code><\/pre>\nNow we can initialize Firebase using the credentials given under Project Settings \u2192 General<\/b>. The sender ID can be found under Project Settings \u2192 Cloud Messaging<\/b>. The settings are hidden behind the cog icon in the top left corner.<\/p>\nfirebase.initializeApp({\r\n apiKey: '<API KEY>',\r\n authDomain: '<PROJECT ID>.firebaseapp.com',\r\n databaseURL: 'https:\/\/<PROJECT ID>.firebaseio.com',\r\n projectId: '<PROJECT ID>',\r\n storageBucket: '<PROJECT ID>.appspot.com',\r\n messagingSenderId: '<SENDER ID>'\r\n})<\/code><\/pre>\nService Worker Registration<\/h4>\nFirebase offers its own service worker setup by creating a file called `firebase-messaging-sw.js` which holds all the functionality to handle push notifications. But usually, you need your Service Worker to do more than just that. So with the useServiceWorker<\/code> method we can tell Firebase to use our own `service-worker.js` file as well.<\/p>\n Now we can create a userToken<\/code> and a isSubscribed<\/code> variable which will be used later on.<\/p>\nconst messaging = firebase.messaging(),\r\n database = firebase.database(),\r\n pushBtn = document.getElementById('push-button')\r\n\r\nlet userToken = null,\r\n isSubscribed = false\r\n\r\nwindow.addEventListener('load', () => {\r\n\r\n if ('serviceWorker' in navigator) {\r\n\r\n navigator.serviceWorker.register('\/service-worker.js')\r\n .then(registration => {\r\n\r\n messaging.useServiceWorker(registration)\r\n\r\n initializePush()\r\n })\r\n .catch(err => console.log('Service Worker Error', err))\r\n\r\n } else {\r\n pushBtn.textContent = 'Push not supported.'\r\n }\r\n\r\n})<\/code><\/pre>\nInitialize Push Setup<\/h4>\nNotice the function initializePush()<\/code> after the Service Worker registration. It checks if the current user is already subscribed by looking up a token in localStorage<\/code>. If there is a token, it changes the button text and saves the token in a variable.<\/p>\n function initializePush() {\r\n\r\n userToken = localStorage.getItem('pushToken')\r\n\r\n isSubscribed = userToken !== null\r\n updateBtn()\r\n\r\n pushBtn.addEventListener('click', () => {\r\n pushBtn.disabled = true\r\n\r\n if (isSubscribed) return unsubscribeUser()\r\n\r\n return subscribeUser()\r\n })\r\n}<\/code><\/pre>\nHere we also handle the click event on the subscription button. We disable the button on click to avoid multiple triggers of it.<\/p>\n Update the Subscription Button<\/h4>\nTo reflect the current subscription state, we need to adjust the button’s text and style. We can also check if the user did not<\/em> allow push notifications when prompted.<\/p>\n function updateBtn() {\r\n\r\n if (Notification.permission === 'denied') {\r\n pushBtn.textContent = 'Subscription blocked'\r\n return\r\n }\r\n\r\n pushBtn.textContent = isSubscribed ? 'Unsubscribe' : 'Subscribe'\r\n pushBtn.disabled = false\r\n}<\/code><\/pre>\nSubscribe User<\/h4>\nLet’s say the user visits us for the first time in a modern browser, so he is not yet subscribed. Plus, Service Workers and Push API are<\/em> supported. When he clicks the button, the subscribeUser()<\/code> function is fired.<\/p>\n function subscribeUser() {\r\n\r\n messaging.requestPermission()\r\n .then(() => messaging.getToken())\r\n .then(token => {\r\n\r\n updateSubscriptionOnServer(token)\r\n isSubscribed = true\r\n userToken = token\r\n localStorage.setItem('pushToken', token)\r\n updateBtn()\r\n })\r\n .catch(err => console.log('Denied', err))\r\n\r\n}<\/code><\/pre>\nHere we ask permission to send push notifications to the user by writing messaging.requestPermission()<\/code>. <\/p>\n The browser asking permission to send push notifications.<\/figcaption><\/figure>\nIf the user blocks<\/em> this request, the button is adjusted the way we implemented it in the updateBtn()<\/code> function. If the user allows<\/em> this request, a new token is generated, saved in a variable as well as in localStorage<\/code>. The token is being saved in our database by updateSubscriptionOnServer()<\/code>.<\/p>\n Save Subscription in our Database<\/h4>\nIf the user was already subscribed, we target the right database reference where we saved the tokens (in this case device_ids<\/code>), look for the token the user already has provided before, and remove it.<\/p>\n Otherwise, we want to save the token. With .once('value')<\/code>, we receive the key values and can check if the token is already there. This serves as second protection to the lookup in localStorage<\/code> in initializePush()<\/code> since the token might get deleted from there due to various reasons. We don’t want the user to receive multiple notifications with the same content.<\/p>\n function updateSubscriptionOnServer(token) {\r\n\r\n if (isSubscribed) {\r\n return database.ref('device_ids')\r\n .equalTo(token)\r\n .on('child_added', snapshot => snapshot.ref.remove())\r\n }\r\n\r\n database.ref('device_ids').once('value')\r\n .then(snapshots => {\r\n let deviceExists = false\r\n\r\n snapshots.forEach(childSnapshot => {\r\n if (childSnapshot.val() === token) {\r\n deviceExists = true\r\n return console.log('Device already registered.');\r\n }\r\n\r\n })\r\n\r\n if (!deviceExists) {\r\n console.log('Device subscribed');\r\n return database.ref('device_ids').push(token)\r\n }\r\n })\r\n}<\/code><\/pre>\nUnsubscribe User<\/h4>\nIf the user clicks the button after subscribing again, their token gets deleted. We reset our userToken<\/code> and isSubscribed<\/code> variables as well as remove the token from localStorage<\/code> and update our button again.<\/p>\n function unsubscribeUser() {\r\n\r\n messaging.deleteToken(userToken)\r\n .then(() => {\r\n updateSubscriptionOnServer(userToken)\r\n isSubscribed = false\r\n userToken = null\r\n localStorage.removeItem('pushToken')\r\n updateBtn()\r\n })\r\n .catch(err => console.log('Error unsubscribing', err))\r\n}<\/code><\/pre>\nTo let the Service Worker know we use Firebase, we import the scripts into `service-worker.js` before anything else.<\/p>\n importScripts('https:\/\/www.gstatic.com\/firebasejs\/4.1.3\/firebase-app.js')\r\nimportScripts('https:\/\/www.gstatic.com\/firebasejs\/4.1.3\/firebase-database.js')\r\nimportScripts('https:\/\/www.gstatic.com\/firebasejs\/4.1.3\/firebase-messaging.js')<\/code><\/pre>\nWe need to initialize Firebase again since the Service Worker cannot access the data inside our `main.js` file.<\/p>\n firebase.initializeApp({\r\n apiKey: \"<API KEY>\",\r\n authDomain: \"<PROJECT ID>.firebaseapp.com\",\r\n databaseURL: \"https:\/\/<PROJECT ID>.firebaseio.com\",\r\n projectId: \"<PROJECT ID>\",\r\n storageBucket: \"<PROJECT ID>.appspot.com\",\r\n messagingSenderId: \"<SENDER ID>\"\r\n})<\/code><\/pre>\nBelow that we add all events around handling the notification window. In this example, we close the notification and open a website after clicking on it.<\/p>\n self.addEventListener('notificationclick', event => {\r\n event.notification.close()\r\n\r\n event.waitUntil(\r\n self.clients.openWindow('https:\/\/artofmyself.com')\r\n )\r\n})<\/code><\/pre>\nAnother example would be synchronizing data in the background. Read Google’s article<\/a> about that.<\/p>\n Show Messages when on Site<\/h3>\nWhen we are subscribed to notifications of new posts but are already visiting the blog at the same moment a new post is published, we don’t receive a notification.<\/p>\n A way to solve this is by showing a different kind of message on the site itself like a little snackbar at the bottom.<\/p>\n<\/figure>\nTo intercept the payload of the message, we call the onMessage<\/code> method on Firebase Messaging.<\/p>\nThe styling in this example uses Material Design Lite<\/a>.<\/p>\n <div id=\"snackbar\" class=\"mdl-js-snackbar mdl-snackbar\">\r\n <div class=\"mdl-snackbar__text\"><\/div>\r\n <button class=\"mdl-snackbar__action\" type=\"button\"><\/button>\r\n<\/div><\/code><\/pre>\nimport 'material-design-lite'\r\n\r\nmessaging.onMessage(payload => {\r\n\r\n const snackbarContainer = document.querySelector('#snackbar')\r\n\r\n let data = {\r\n message: payload.notification.title,\r\n timeout: 5000,\r\n actionHandler() {\r\n location.reload()\r\n },\r\n actionText: 'Reload'\r\n }\r\n snackbarContainer.MaterialSnackbar.showSnackbar(data)\r\n})<\/code><\/pre>\nAdding a Manifest<\/h3>\nThe last step for this part of the series is adding the Google Cloud Messaging Sender ID<\/strong> to the `manifest.json` file. This ID makes sure Firebase is allowed to send messages to our app. If you don’t already have a manifest, create one and add the following. Do not change the value.<\/strong> <\/p>\n{\r\n \"gcm_sender_id\": \"103953800507\"\r\n}<\/code><\/pre>\nNow we are all set up on the front end. What’s left is creating our actual database and the functions to watch database changes in the next article.<\/p>\n\nArticle Series:<\/h4>\n\nSetting Up & Firebase (You are here!)<\/li>\nThe Back End<\/a><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You know those the little notification windows that pop up in the top right (Mac) or bottom right (Windows) corner […]<\/p>\n","protected":false},"author":245128,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[575,1330],"class_list":["post-259344","post","type-post","status-publish","format-standard","hentry","category-articles","tag-firebase","tag-push-notifications"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":259352,"url":"https:\/\/css-tricks.com\/implementing-push-notifications-back-end\/","url_meta":{"origin":259344,"position":0},"title":"Implementing Push Notifications: The Back End","author":"Pascal Klau (@pascalaoms)","date":"August 23, 2017","format":false,"excerpt":"In the first part of this series we set up the front end with a Service Worker, a `manifest.json` file, and initialized Firebase. Now we need to create our database and watcher functions. Article Series: Setting Up & Firebase The Back End (You are here) Creating a Database Log into\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305691,"url":"https:\/\/css-tricks.com\/creating-scheduled-push-notifications\/","url_meta":{"origin":259344,"position":1},"title":"Creating Scheduled Push Notifications","author":"Nico Martin","date":"April 8, 2020","format":false,"excerpt":"Scheduled is the key word there \u2014 that\u2019s a fairly new thing! When a push notification is scheduled (i.e. \u201cTake your pill\u201d or \u201cYou\u2019ve got a flight in 3 hours\u201d) that means it can be shown to the user even if they\u2019ve gone offline. That's an improvement from the past\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/push-api-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/push-api-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/push-api-button.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/push-api-button.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/push-api-button.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":335185,"url":"https:\/\/css-tricks.com\/firebase-crash-course\/","url_meta":{"origin":259344,"position":2},"title":"Firebase Crash Course","author":"David East","date":"March 9, 2021","format":false,"excerpt":"This article is going to help you, dear front-end developer, understand all that is Firebase. We\u2019re going to cover lots of details about what Firebase is, why it can be useful to you, and show examples of how. But first, I think you\u2019ll enjoy a little story about how Firebase\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/firebase-logo-icon.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":305248,"url":"https:\/\/css-tricks.com\/building-a-real-time-chat-app-with-react-and-firebase\/","url_meta":{"origin":259344,"position":3},"title":"Building a Real-Time Chat App with React and Firebase","author":"Deven Rathore","date":"March 23, 2020","format":false,"excerpt":"In this article, we\u2019ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We\u2019ll integrate third-party auth providers (e.g. Google, Twitter and GitHub) and, once users are signed in, we\u2019ll learn how to store user chat data in the Firebase Realtime Database, where we can\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/react-firebase-chat.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":255231,"url":"https:\/\/css-tricks.com\/intro-firebase-react\/","url_meta":{"origin":259344,"position":4},"title":"Intro to Firebase and React","author":"Simon Bloom","date":"June 2, 2017","format":false,"excerpt":"Let's take a look at building something using Firebase and React. We'll be building something called Fun Food Friends, a web application for planning your next potluck, which hopefully feels like something rather \"real world\", in that you can imagine using these technologies in your own production projects. The big\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/reactfirebase.png?fit=1200%2C647&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":237855,"url":"https:\/\/css-tricks.com\/building-a-jekyll-site-part-3-of-3\/","url_meta":{"origin":259344,"position":5},"title":"Building a Jekyll Site \u2013 Part 3 of 3: Creating a Firebase-Backed Commenting System","author":"Mike Neumegen","date":"February 11, 2016","format":false,"excerpt":"The following is a guest post by Mike Neumegen from CloudCannon. This final post is about adding some functionality to a Jekyll site that isn't possible: comments. That's because Jekyll has no backend component in which to save comments. But, we don't even need that if we do it entirely\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/245128"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=259344"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259344\/revisions"}],"predecessor-version":[{"id":259786,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259344\/revisions\/259786"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=259344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=259344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=259344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}