Push notifications are a compelling way to engage users.
Push technology, or server push, is a style of Internet-based communication where the request for a given transaction is initiated by the publisher or central server. - Wikipedia
In this article, we will learn how to quickly add push notification in our Angular application with Service Worker.
Service Worker đˇââď¸
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.
Angular Service Worker
Prerequisites đ
Basic knowledge of Angular & Node JS
So, If you are ready, Let's get started đđđ
Letâs Begin đ
Step 1 : Create a server
Let's create a server directory inside our root directory.
.
ââââserver
Inside /server
, run below command to initialize npm.
npm init -y
A package.json
file will be generated for you.
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Now let's install web-push
by running following command.
npm i web-push
Updated package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"web-push": "^3.4.5"
}
}
Amazing đđđ
Let's create our server file server/index.js
server
ââââindex.js
ââââpackage-lock.json
ââââpackage.json
âââânode_modules
Import web-push
as below
const webpush = require('web-push'); // new
To subscribe push messages, we need to pass VAPID keys.
We can generate VAPID keys as below.
const webpush = require('web-push');
console.log(webpush.generateVAPIDKeys()); // new
Learn more about web push protocol here.
Let's run our server. It will print our keys in the console.
node .
Output
{
publicKey: '<YOUR_PUBLIC_KEY>',
privateKey: '<YOUR_PRIVATE_KEY>'
}
Now copy and put these keys in a variable. And remove console.log
for generating keys.
const webpush = require('web-push');
const vapidKeys = { // new
publicKey: '<YOUR_PUBLIC_KEY>', // new
privateKey: '<YOUR_PRIVATE_KEY>' // new
}; // new
Then create a variable called subscription as below.
// get client subscription config from db
const subscription = {
endpoint: '',
expirationTime: null,
keys: {
auth: '',
p256dh: '',
},
};
endpoint: This contains a unique URL to a messaging server endpoint. This url is a public but unguessable endpoint to the Browser Push Service used by the application server to send push notifications to this subscription.
expirationTime: Some messages are time sensitive and don't need to be sent if a certain time interval has passed. This is useful in certain cases. For example, a message might contain an authentication code that expires after 1 minute.
p256dh: This is an encryption key that our server will use to encrypt the message, before sending it to the Push Service.
auth: This is an authentication secret, which is one of the inputs of the message content encryption process.
We'll get the subscription details from client. You can store that subscription config in DB and fetch the details here.
Now let's create payload for the notification.
const payload = {
notification: {
title: 'Title',
body: 'This is my body',
icon: 'assets/icons/icon-384x384.png',
actions: [
{ action: 'bar', title: 'Focus last' },
{ action: 'baz', title: 'Navigate last' },
],
data: {
onActionClick: {
default: { operation: 'openWindow' },
bar: {
operation: 'focusLastFocusedOrOpen',
url: '/signin',
},
baz: {
operation: 'navigateLastFocusedOrOpen',
url: '/signin',
},
},
},
},
};
The Angular service worker supports the following operations:
openWindow : Opens a new tab at the specified URL, which is resolved relative to the service worker scope.
focusLastFocusedOrOpen : Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL, which is resolved relative to the service worker scope.
navigateLastFocusedOrOpen : Focuses the last focused client and navigates it to the specified URL, which is resolved relative to the service worker scope. If there is no client open, then it opens a new tab at the specified URL.
Check different payloads here.
You can play with different types of notification here.
Now add our third variable options.
const options = {
vapidDetails: {
subject: 'mailto:example_email@example.com',
publicKey: vapidKeys.publicKey,
privateKey: vapidKeys.privateKey,
},
TTL: 60,
};
At last call sendNotification()
method to send notification as below.
// send notification
webpush.sendNotification(subscription, JSON.stringify(payload), options)
.then((_) => {
console.log('SENT!!!');
console.log(_);
})
.catch((_) => {
console.log(_);
});
Here is our final code looks like.
const webpush = require('web-push');
const vapidKeys = {
publicKey: '<YOUR_PUBLIC_KEY>',
privateKey: '<YOUR_PRIVATE_KEY>'
};
// get client subscription config from db
const subscription = {
endpoint: '',
expirationTime: null,
keys: {
auth: '',
p256dh: '',
},
};
const payload = {
notification: {
title: 'Title',
body: 'This is my body',
icon: 'assets/icons/icon-384x384.png',
actions: [
{ action: 'bar', title: 'Focus last' },
{ action: 'baz', title: 'Navigate last' },
],
data: {
onActionClick: {
default: { operation: 'openWindow' },
bar: {
operation: 'focusLastFocusedOrOpen',
url: '/signin',
},
baz: {
operation: 'navigateLastFocusedOrOpen',
url: '/signin',
},
},
},
},
};
const options = {
vapidDetails: {
subject: 'mailto:example_email@example.com',
publicKey: vapidKeys.publicKey,
privateKey: vapidKeys.privateKey,
},
TTL: 60,
};
// send notification
webpush.sendNotification(subscription, JSON.stringify(payload), options)
.then((_) => {
console.log('SENT!!!');
console.log(_);
})
.catch((_) => {
console.log(_);
});
Great work so far đŞđŞđŞ
Keep this server code as it is for now.
Let's create our fronted.
Step 2 : Create the client
Let's come back to our root directory and run below command to create an angular project client
.
ng new client
Now inside client
, run the below command to add all the necessary configurations for PWA in our app.
ng add @angular/pwa
Go to app.component.ts
and add ngOnInit()
method as below.
export class AppComponent implements OnInit {
title = 'client';
ngOnInit() {}
}
Import SwPush
from @angular/service-worker
and add to the constructor.
import { SwPush } from "@angular/service-worker";
export class AppComponent implements OnInit{
title = 'client';
constructor(private _swPush: SwPush) {}
ngOnInit() {}
}
Then create a method requestSubscription()
which will request for notification permission and will give us the subscription object.
requestSubscription = () => {
if (!this._swPush.isEnabled) {
console.log("Notification is not enabled.");
return;
}
this._swPush.requestSubscription({
serverPublicKey: '<VAPID_PUBLIC_KEY_FROM_BACKEND>'
}).then((_) => {
console.log(JSON.stringify(_));
}).catch((_) => console.log);
};
Call requestSubscription()
method in ngOnInit()
ngOnInit() {
this.requestSubscription();
}
Let's build our app to run our application with the Service Worker.
ng build
After build complete, go to dist/client
, you will find a file named ngsw-worker.js
. That's our service worker.
Now install http-server
globally in your machine.
npm i -g http-server
After that go to dist/client
in your terminal and run
http-server -p 8000
Now our project is running at localhost:8000
.
When we'll open our app, it will ask us for the notification permission.
Isn't this amazing? đ¤Šđ¤Šđ¤Š
And if we allow, then in console we will get the subscription object.
Now you can call your own api to save this details in DB.
But here we will copy the subscription object generated in our client, and replace the subscription value in our server.
const subscription = {
endpoint:
'<CLIENT_ENDPOINT>',
expirationTime: null,
keys: {
p256dh: '<CLIENT_P256DH>',
auth: '<CLIENT_AUTH>',
},
};
Now in separate terminal go to /server
directory and run
node .
You will immediately get your notification.
Now you can play with the click events by clicking the action buttons and the notification itself.
Conclusion đ
Checkout web-push implementation for different backend technologies -
https://github.com/web-push-libs
Here is my GitHub link for this project - https://github.com/devsmranjan/web-push-notification-demo
Thank you for reading my article đ . I hope you have learned something here.
Happy coding đ¨âđťđŠâđť
Thanks! Don't forget to give a âĽď¸ and follow :)
Top comments (10)
github.com/web-push-libs is great, but it's missing the Ruby library.
You can find a Ruby library for web push here:
github.com/pushpad/web-push
We use it for pushpad.xyz , so it's always up-to-date and widely tested.
Hi, You don't use "swPush.notificationClicks" to handle click?
Yes you can use. Here I'm sending data with some default operations which are there in service worker file after you build your angular app.
You can but when the webpage is open.
If the webpage isn't open you need to modify your service worker and add this (this only works for angular ngsw-worker.js file)
// line 1914
this.scope.addEventListener('notificationclick', (event) => {
event.notification.close();
// Get all the Window clients
event.waitUntil(clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(clientsArr => {
// If a Window tab matching the targeted URL already exists, focus that;
const hadWindowToFocus = clientsArr.some(windowClient => { windowClient.url === event.notification.data[event.action].url ? (windowClient.focus(), true) : false });
// Otherwise, open a new tab to the applicable URL and focus it.
if (!hadWindowToFocus) {
clients.openWindow(event.notification.data[event.action].url).then(windowClient => {
if (windowClient) {
windowClient.focus();
console.log('[Service Worker] - Notification click Received.', event);
}
});
}
}));
this.onClick(event);
});
sorry if i post code in comments, this is my first comment :)
Thank you for this example! Everything works for me perfectly when using a text payload!
But.. When I try to use the JSON.stringify(payload) with the payload example for a link and onActionClick.. the message comes through as json_encoded.
How do you fix this? I can't seem to get a link to come through so the push message is clickable.
Is the payload object for web-push documented somewhere?
As far as i know, it should be handled on the client side, care to clarify?
the Payload is sent to the mail in the options right? and without the angular front end, does it still work?
No, its sent througth endpoint using the encryption keys and auth.
And yes it works, Web push works in differents workarounds, the only thing that you should be caring of is about registering the service worker. (see developer.mozilla.org/en-US/docs/W... for more information)
how to send notification to specific user