How To Add Notifications To Your PWA
Tags: pwa, javascript, webdev
Published: 2020-01-21 17:08:57

---
title: How To Add Notifications To Your PWA
published: true 
date: 2020-01-21 15:40:04 UTC
tags: pwa, javascript, webdev
canonical_url: https://labs.thisdot.co/how-to-add-notifications-to-your-pwa
series: pwa
---

Have you ever wondered how to add those annoying (but useful) notifications to your progressive web app?

Well in this tutorial, I'm going to show you how!

## What are we building?

![pwa-sc1](//images.ctfassets.net/zojzzdop0fzx/4gBJgiCgeh8VQy3lk9EbPi/5e68d9d05e3ae78cc1443883f3410d25/pwa-sc1.png)

![pwa-sc2](//images.ctfassets.net/zojzzdop0fzx/5DK8mWdqfb8L1aCoFfeUIf/3e946dfafc1fd2c4768ec95a9d230581/pwa-sc2.png)

## Live Demo
https://pwa-notification-td.firebaseapp.com/

## Before We Start
__We will make use of the Notification API__

__Notification API__: The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. These notifications' appearances and specific functionalities vary across platforms but generally provide a way to asynchronously provide information to the user.

__*Note: *__The notification API is not the same as the Push API.

## Time To Get Your Hands Dirty

1) Clone this repo:
https://github.com/devpato/pwa-notifications

2) You will see 3 folders. The ones that matter are the START and the FINAL folder. In the FINAL folder, you can see the final code but for the purpose of this tutorial, and for you to learn, just focus on the START folder.

3) Navigate to the main.js file inside of the scripts folder

4) Add the following code:

``` javscript
const notificationButton = document.getElementById('enableNotifications');
let swRegistration = null;
```

The __notificationButton__ is the button that will trigger the notification in our app. If you go to the index.html, you will see the button there that I've already created for you.

The __swRegistration__ is just a global variable that will store our service worker.

**Note:** Notice the sw.js file is in the root folder. That's where service workers go, in the root.

5) Now let's create a function called __initializeApp__. This function will handle everything that needs to be triggered when the app first loads.

```javascript
//First, we check if having service workers and notifications are //supported.
function initializeApp() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    console.log('Service Worker and Push is supported');

    //Register the service worker
    navigator.serviceWorker
      .register('../../sw.js')
      .then(swReg => {
        console.log('Service Worker is registered', swReg);
        // We are storing the service worker, globally
        swRegistration = swReg;
      })
      .catch(error => {
        console.error('Service Worker Error', error);
      });
  } else {
    console.warn('Push messaging is not supported');
    notificationButton.textContent = 'Push Not Supported';
  }
}
```
To learn more about the PushManger, visit : https://developer.mozilla.org/en-US/docs/Web/API/PushManager

6)  When the app first loads, we need to call the __initializeApp()__ function. To accomplish this - add the call before the declaration of the function itself.

7) Now we need to create a new function called __initializeUi__. This function will look as followed:

```javascript
function initializeUi() {
  notificationButton.addEventListener('click', () => {
    //Do something here
  });
}
```

The only purpose of this function is to attach a click event to the __notificationButton__. So when the user clicks on the button, something will happen.

8) Now inside of the initializeApp() (function we previously created), we invoke the __initializeUi();__, right after the __swRegistration = swReg;__ expression:

```javascript
function initializeApp() {
 ...
    navigator.serviceWorker
      .register('../../sw.js')
      .then(swReg => {
        ....
        // We are storing the service worker, globally
        swRegistration = swReg; 
        initializeUi();
      })
 ...
}
```

By doing this, we will initialize the UI once the registration of the service worker has been successful.

9) Time to create a new function called __displayNotification__. The function will look like this:

```javascript
function displayNotification() {
  //Ask user if we show notifications
  if (window.Notification && Notification.permission === 'granted') {
    //notification();
    // We will create this function in a further step.
  }
  // If the user hasn't told whether he wants to be notified or not
  // Note: because of Chrome, we cannot be sure the permission property
  // is set, therefore it's unsafe to check for the "default" value.
  else if (window.Notification && Notification.permission !== 'denied') {
    Notification.requestPermission(status => {
      if (status === 'granted') {
        //notification();
      } else {
        alert('You denied or dismissed permissions to notifications.');
      }
    });
  } else {
    // If the user refuses to get notified
    alert(
      'You denied permissions to notifications. Please go to your browser or phone setting to allow notifications.'
    );
  }
}
```

10) Go back to the initializeUi() inside of the __click__ callback, where it says "Do something here". Replace that line with:

```javascript
  displayNotification();
```

Your code will look like this:

```javascript
function initializeUi() {
  notificationButton.addEventListener('click', () => {
    displayNotification();
  });
}
```

11) Finally, we are going to create a __notification__ function that will contain the information we want to display in our notification.

```javascript
function notification() {
  const options = {
    body: 'Testing Our Notification',
    icon: './bell.png'
  };
  swRegistration.showNotification('PWA Notification!', options);
}
```

12) Inside of your __displayNotification()__ function, you will see that we are calling the __notification()__, but it's commented out. Simply uncomment it so the code can be triggered.

13) The final code will look like this:
https://github.com/devpato/pwa-notifications/blob/master/final/scripts/main.js

14) Test the notification in your browser. If you want to test it on a real device, you need to deploy it and make sure that the deployed app gets served using __https__. You can you use __firebase hosting__ for this.

<a href="https://dev.to/thisdotmedia/web-app-deployment-with-firebase-in-2-minutes-4bo8" />Web Deployment with Firebase</a>

As you might have noticed that we registered a service worker but we didn't add any code to it because it wasn't necessary. In the the next tutorial, we will actually be doing more with the service worker. In that tutorial, I will show you how to send push notifications from the server using __Firebase Cloud Messaging__. So, wait a bit and we'll explore much more about Service Worker features ;)

<a href="https://dev.to/thisdotmedia/pwa-push-notifications-with-firebase-cloud-messaging-pt1-10ak">PWA Push Notifications with Firebase (Cloud Messaging)-pt1</a>