Web Push notifications in Angular Applications
Published: 2023-09-02 10:48:55

In this tutorial, I am going to create a demo in which we will how to  easily add browser push notifications to our Angular 2 applications.

Web Push notifications are a way to make you application more interactive and automatically push well tailored dynamic content to the target user. Earlier the push notification was possible to send on mobile only but now browsers have moved in to natively support this feature allowing web developers to integrate them with their web applications.

So lets start to create the demo

### Installation angular2-notifications module

So for installing the module type the below command over terminal when a basic app is created by **ng new web-push-app** and app is browsable over link **http://localhost:4200** after typing **ng serve** over terminal after app creation.

``````npm install --save angular2-notifications``````

Now lets have  a look on app.module.ts, We need to import the module and add it to the imports of our AppModule

``````import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PushNotificationsModule } from 'angular2-notifications'; //import the module
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    PushNotificationsModule //add it to the imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }``````

Configuring **app.component.ts**

In our **AppComponent,** we first import the PushNotificationsService. This service provides us with two useful methods.
requestPermission() – This method requests for permission from the user to show push notifications. The create() method which actually creates a notification and displays on the window.

We would usually require asking for permission when our web app initially loads. So we will just invoke the requestPermission()inside the constructor.

``````import { Component } from '@angular/core';
import { PushNotificationsService } from 'angular2-notifications'; //import the service
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Web push Notifications!';
 
  constructor(private _pushNotifications: PushNotificationsService){
    _pushNotifications.requestPermission(); // request for permission as soon as component loads
  }
 
  notify(){ //our function to be called on click
    let options = { //set options
      body: "The truth is, I'am Iron Man!",
      icon: "assets/images/ironman.png" //adding an icon
    }
    let notify = this._pushNotifications.create('Iron Man', options).subscribe( //creates a notification
        res =&gt; console.log(res),
        err =&gt; console.log(err)
    );
  }
}``````

Now we will make changes in app.component.html page, We will add a button into our app.component.html which will create notifications.

```
 <h1>
   {{title}}
 </h1>
 <button (click)="notify()">Show Notiication</button>
```
We have added a function notify(), which calls the **create**()method. The create method on **PushNotificationsService** takes in two parameters, the **title** and a **set of options.**

The following options are supported

``````{
body: string
icon: string
tag: string
renotify: boolean
silent: boolean
sound: string
noscreen: boolean
sticky: boolean
dir: 'auto' | 'ltr' | 'rtl'
lang: string
vibrate: number[]
}``````

Options correspond to the Notification interface of the Notification API: [Mozilla developer network.](https://jsonworld.com/demo/browser-push-notifications-in-angular-applications)

### Run The App
type the below command over terminal

``````ng serve``````

When app will load first over the browser then it will ask for the permission. Click allow to get the push from the created angular application. Click on show notification button. You should be able to see notifications popping up on the right-bottom or right-top corner of your screen.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj4cd9shop9luvzfroeh.png)

This article is originally posted over [jsonworld](jsonworld.com)