How to send notifications to the browser (wep push) using Node.js and Service Workers by jfdesousa7

View this thread on steempeak.com
· @jfdesousa7 ·
$2.04
How to send notifications to the browser (wep push) using Node.js and Service Workers
<div id = "contentMain">

 <div>
 <center>
 <img src = "https://res.cloudinary.com/dzemqknqv/image/upload/v1614008869/11_irslix.png" class = "img-fluid" />
 </center> <br/> <br/>
 </div>



 <table>
 <tr>
 <td> Today I will teach you how to create web notifications from our Node - Express.js server to an HTML web application, the notifications will be created from the API provided by the browser, we will use a module called web push (<a  target = "_ blank" href = "https://www.npmjs.com/package/web-push"> web-push </a>) that will help us create them, additionally we will use what is called Service workers (  processes that are kept running from the browser)
 </td>
 </tr>
 </table>



 <h1 style = "color: red"> NODE.js </h1>



 <p> We will start by creating a folder on our desktop <code> web-notification-app-node / </code> and activating the console of our favorite code editor, and we will install the following dependencies: </p>

 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> <b class = "token function"> npm </b> init --yes
 </code>
 </pre>
 </div>
And
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> <b class = "token function"> npm </b> i express morgan dotenv web-push
 </code>
 </pre>
 </div>


 <p> We will create a file called .env where we will place our public and private keys provided by the web-push module </p>
 <div> <b> .env </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> PUBLIC_KEY = tu_public_key_here
 PRIVATE_KEY = you_private_key_here
 </code>
 </pre>
 </div>
 <br/> <br/>


 <p> Once our environment variables file is created, we proceed to generate these keys, for this we will write the following in the console </p>

 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> npx web-push generate-vapid-keys
 </code>
 </pre>
 </div>


 <p> This will return something like </p>
 <div>
 <center>
 <img src = "https://res.cloudinary.com/dzemqknqv/image/upload/v1614009767/4_uyqboq.jpg" class = "img-fluid" />
 </center> <br/> <br/>
 </div>

 <blockquote> Those keys are the ones that we will place in the .env file </blockquote>


 <p> We will create a file called <code> webpush.js </code> with the following <b> configuration</b> </p>
 <div> <b> src / webpush.js </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> const webpush = require ('web-push')
 webpush.setVapidDetails (
     `mailto: $ {process.env.EMAIL}`,
     process.env.PUBLIC_KEY,
     process.env.PRIVATE_KEY
   );
 module.exports = webpush
 </code>
 </pre>
 </div>
 <br/> <br/>

 <p> </p>
 <div> <b> src / index.js </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> require ('dotenv'). config ()
 const express = require ('express')
 const morgan = require ('morgan')
 const path = require ('path')
 const app = express ()
 // MIDDLEWARES
 app.use (morgan ('dev'))
 app.use (express.urlencoded ({extended: false}))
 app.use (express.json ())
 // ROUTES
 app.use (require ('./ routes /'))
 // STATICS FILES
 app.use (express.static (path.join (__ dirname, 'public')))
 app.listen (process.env.PORT || 3000, () => console.log ('Server on port', process.env.PORT || 3000))
 </code>
 </pre>
 </div>
 <br/> <br/>


 <div> <b> We create a folder <code>routes/</code> </b> and inside an index.js file with our 2 routes <br/> <br/> </div>
 <div> <b> routes / index.js </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> const {Router} = require ('express')
 const router = Router ()
 const webpush = require ('../ webpush')
 let pushSubscripton;
 router.post ('/ subscribeUser', async (req, res) => {
     pushSubscripton = req.body;
     res.status (200) .json ();
 })
 router.post ('/ new-msg', async (req, res) => {
     const {title, message} = req.body;
     const payload = JSON.stringify ({
         title,
         message
       });
       res.status (200) .json ();
       try {
         await webpush.sendNotification (pushSubscripton, payload);
       } catch (error) {
         console.log (error);
       }
 })
 module.exports = router
 </code>
 </pre>
 </div>
 <br/> <br/>




 <div> We will create a <code> public / </code> folder and inside a file index.html, main.js and serviceWorker.js <br/> <br/> </div>
 <div> <b> public / index.html </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> &lt;! DOCTYPE html>
 &lt;html lang = "en">
 &lt;head>
     &lt;meta charset = "UTF-8">
     &lt;meta http-equiv = "X-UA-Compatible" content = "IE = edge">
     &lt;meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
     &lt;title> How to send notifications to the browser (wep push) using Node.js and Service Workers &lt;/title>
     &lt;link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel = "stylesheet"
         integrity = "sha384-BmbxuPwQa2lc / FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH / Ev + nYRRuWlolflfl" crossorigin = "anonymous">
 &lt;/head>
 &lt;body>
     &lt;div class = "container mt-5 mb-2">
         &lt;h2> How to send notifications to the browser (wep push) using Node.js and Service Workers - &lt;code> &lt;a href="https://hive.blog/@jfdesousa7"> Jfdesousa7 &lt;/a> &lt;/code> &lt;/h2>
         &lt;div class = "col-md-4 mt-5 mx-auto">
             &lt;div class = "card">
                 &lt;div class = "card-body">
                     &lt;form id = "form">
                         &lt;div class = "mb-4">
                             &lt;input type = "text" id = "title" placeholder = "Enter the title of the message"
                                 class = "form-control" autofocus>
                         &lt;/div>
                         &lt;div class = "mb-4">
                             &lt;textarea class = "form-control" id = "message" rows = "2"
                                 placeholder = "Enter the message"> &lt;/textarea>
                         &lt;/div>
                         &lt;div class = "mb-4>
                             &lt;button type = "submit" class = "btn btn-primary"> Send notification &lt;/button>
                         &lt;/div>
                     &lt;/form>
                 &lt;/div>
             &lt;/div>
         &lt;/div>
     &lt;/div>
     &lt;script src = "./ main.js"> &lt;/script>
 &lt;/body>
 &lt;/html>
 </code>
 </pre>
 </div>
 <br/> <br/>


 <div> <b> public / main.js </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> const PUBLIC_KEY = "BPU1qVu0bNbIFdC15E4EooVBhjuOV8w40rk5NO3xR-UtF_3I7l5h5EQxeT2yXvEBS4ArrUfE7-YfKEPoLAYVi9k";
 async function subscribeUser () {
   const register = await navigator.serviceWorker.register ("/ serviceWorker.js", {
     scope: "/",
   });
   const subscribe = await register.pushManager.subscribe ({
     userVisibleOnly: true,
     applicationServerKey: urlBase64ToUint8Array (PUBLIC_KEY),
   });
   await fetch ("/ subscribeUser", {
     method: "POST",
     body: JSON.stringify (subscribe),
     headers: {
       "Content-Type": "application / json",
     },
   });
   console.log ("Subscribed!");
 }
 function urlBase64ToUint8Array (base64String) {
     const padding = "=". repeat ((4 - (base64String.length% 4))% 4);
     const base64 = (base64String + padding) .replace (/ - / g, "+"). replace (/ _ / g, "/");
     const rawData = window.atob (base64);
     const outputArray = new Uint8Array (rawData.length);
     for (let i = 0; i <rawData.length; ++ i) {
       outputArray [i] = rawData.charCodeAt (i);
     }
     return outputArray;
   };
   const form = document.querySelector ('# form')
   const title = document.querySelector ('# title')
   const message = document.querySelector ('# message')
   form.addEventListener ('submit', async (e) => {
       e.preventDefault ()
      await fetch ('/ new-msg', {
           method: "POST",
           body: JSON.stringify ({
               title: title.value,
               message: message.value
           }),
           headers: {
               "Content-Type": "application / json"
           }
       })
       form.reset ()
   })
   subscribeUser ();
 </code>
 </pre>
 </div>
 <br/> <br/>



 <div> <b> public / serviceWorker.js </b> <br/> <br/> </div>
 <div class = "gatsby-highlight">
 <pre class = "gatsby-code">
 <code class = "gatsby-code"> self.addEventListener ("push", (e) => {
   const data = e.data.json ();
   self.registration.showNotification (data.title, {
     body: data.message,
     icon: "./images/jfdesousa7.png",
   });
 });
 </code>
 </pre>
 </div>
 <br/> <br/>

 <p> Once we run our example with <code> node src / index.js </code> we must <b> allow </b> the browser to send notifications
 <br/>
 <div>
 <center>
 <img src = "https://res.cloudinary.com/dzemqknqv/image/upload/v1614008872/1_xlcqjh.jpg" class = "img-fluid" />
 </center> <br/> <br/>
 </div>

 <div>
 <center>
 <img src = "https://res.cloudinary.com/dzemqknqv/image/upload/v1614008873/2_x0iprv.png" class = "img-fluid" />
 </center> <br/> <br/>
 </div>


 


 <table>
 <tr><td> <h3> And with those friends we reached the end of the tutorial, I hope you enjoyed it and until next time!  </h3> </td>
 </tr>
 </table>
 <br/>



 <h2> Visit my official website for budges and much more </h2>

 <center> <a href="https://tupaginaonline.net" target="_blank"> <b> TupaginaOnline.net </b> </a> </center>


 </div>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 87 others
properties (23)
post_id90,261,681
authorjfdesousa7
permlinkhow-to-send-notifications-to-the-browser-wep-push-using-node-js-and-service-workers
categoryhive-133716
json_metadata{"tags":["srilanka","venezuela","steemvenezuela","devs","programming","nodejs","javascript"],"image":["https:\/\/res.cloudinary.com\/dzemqknqv\/image\/upload\/v1614008869\/11_irslix.png","https:\/\/res.cloudinary.com\/dzemqknqv\/image\/upload\/v1614009767\/4_uyqboq.jpg","https:\/\/res.cloudinary.com\/dzemqknqv\/image\/upload\/v1614008872\/1_xlcqjh.jpg","https:\/\/res.cloudinary.com\/dzemqknqv\/image\/upload\/v1614008873\/2_x0iprv.png"],"links":["https:\/\/www.npmjs.com\/package\/web-push","https:\/\/tupaginaonline.net"],"app":"steemit\/0.2","format":"markdown"}
created2021-04-07 12:57:09
last_update2021-04-07 12:57:09
depth0
children1
net_rshares1,302,153,825,786
last_payout2021-04-14 12:57:09
cashout_time1969-12-31 23:59:59
total_payout_value1.037 SBD
curator_payout_value1.004 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length9,674
author_reputation281,838,293,126
root_title"How to send notifications to the browser (wep push) using Node.js and Service Workers"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (151)
@steem-sri.lanka ·
<center><img src="https://i.imgur.com/FpXHRfS.png" title="source: imgur.com" />

<center><sub>Your post has been upvoted by <a href="https://steemit.com/created/hive-133716">Steem Sri Lanka</a> Community Curation Trail.</sub></center>
[Steem Sri Lanka Discord Channel](https://discord.gg/BWvp9h5YSF)

✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵✵

<div>Join With<div class="phishy"> steem-sri.lanka</div> Curation Trail For Better Curation Rewards</div>
properties (22)
post_id90,266,035
authorsteem-sri.lanka
permlinkqr7d9c
categoryhive-133716
json_metadata{"image":["https:\/\/i.imgur.com\/FpXHRfS.png"],"links":["https:\/\/steemit.com\/created\/hive-133716","https:\/\/discord.gg\/BWvp9h5YSF"],"app":"steemit\/0.2"}
created2021-04-07 16:46:33
last_update2021-04-07 16:46:33
depth1
children0
net_rshares0
last_payout2021-04-14 16:46:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length437
author_reputation144,543,977,074,592
root_title"How to send notifications to the browser (wep push) using Node.js and Service Workers"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000