What is new in Chrome 74 DevTools

When you inspect a web element on the web page, and mouse hover a CSS property like “margin” or “padding” under the styles tab, all nodes affected by that declaration will be highlighted (Figure 1)…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Web Push Notification Full Stack Application With Node Js Restful API

Let me tell you first, why Web Push Notification is essential for any web application.

let me tell you how it’s works.

service worker is main key ingredient and knight of this feature which install in client browser and run independently as application after installing in browser as service worker which regularly a send a query to the provider server and ask for any new event happening and than respond to the client if any new event is happening in the server it popup a message like

click on allow button service worker start to install in client browser and send a promise request for subscriber with Public VAPID key and check on server for wheather user is already subscribe notification or not if it’s already subscribe it sent back request with false statement otherwise server sent a true request. and done that’s it.

Now let’s Comes to the Coding section and how to implement this feature in your application without using third party paid services and use as long as you.

Need Prequiest which are listed below if you don’t have in your System.
Prequests:

Now Let’s Begin with next Step

than add the all fields or skip as you want
and than run command again to install all the dependency with

and hit the Enter and wait for install all the dependency will install correctly in your project than run again run command for create new application running file

in same project folder by

and again need to create three folders in same project directory by commands as below

make config directory

create model directory

now all the essential folders and file are created and in this project we move to next coding parts in next step.

The file structure of this project is as below

now start with create database model for mongodb database. so now i am using Moongose ODM ORM library for MongoDB which is already installed in project

so now let’s come to the config file

and than open the keys.js file which is already created in this folder

by using this command

you will see a two keys are generated one is private and another one is public key which is show in below.

so now all the important application structure setting is done now start coding in server.js which is exist on top of the project folder

and now come to the folder router first start with subscribe.js which is already created by command. open this file in new tab and than paste this code in your subscribe.js file

save the changes and move to next file push.js and paste this code in your already created push.js file by command line

and save the changes in server.js file with above code in server.js file and run command hit this run command

please make sure you will see these messages after hitting this command.

press again close the application after checking your application is running correct. so now server side running application code is done.

Now Let’s Begin with next Step

create a new folder in with public name and create file with these commands as below

now let's begin the basic html code in index.html file

and now save the all files and start coding for a service worker let’s begin now

nad save the all code . YEAH..!! done. so now we have to check whether is it working or not. so again run command in your terminal

after click on allow you see message like in your browser console

and open postman with for send push message to subscribers.

push send example

Originally published by Saurabh Kashyap

What is new in Chrome 74 DevTools

Web Push Notification Full Stack Application With Node Js Restful API

Add a comment

Related posts:

HOW MINI PROGRAMS CAN HELP TRAVEL COMPANIES ON WECHAT?

Filtro por pessoas relacionadas

Business Models and Value Capture in Protocols