push notification with service worker

-

 (works only on chrome)


  <script>
    // Check if the browser supports service workers
    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;
    }

    if ('serviceWorker' in navigator) {
      // Register the service worker
      navigator.serviceWorker.register('sw.js').then(function(registration) {
        console.log('Service worker registered with scope:', registration.scope);
       
        // Ask for permission to show notifications
        const publicVapidKey = '';

        Notification.requestPermission().then(function(permission) {
          if (permission === 'granted') {
            // Get the registration token for the current user
            registration.pushManager.subscribe({
              userVisibleOnly: true,
              applicationServerKey: ''
            }).then(function(subscription) {
                // console.log(subscription)
                console.log('Push subscription:', subscription);
                console.log('p256dh key:', btoa(String.fromCharCode.apply(null, new Uint8Array(subscription.getKey('p256dh')))));
                console.log('auth key:', btoa(String.fromCharCode.apply(null, new Uint8Array(subscription.getKey('auth')))));
                console.log('User is subscribed with endpoint:', subscription);
                let subscription2 = {
                    keys : {
                        p256dh: btoa(String.fromCharCode.apply(null, new Uint8Array(subscription.getKey('p256dh')))),
                        auth: btoa(String.fromCharCode.apply(null, new Uint8Array(subscription.getKey('auth')))),
                    },
                    endpoint:subscription.endpoint
                }
                 fetch('/subscribe', {
                    method: 'POST',
                    body: JSON.stringify(subscription2),
                    headers: {
                    'Content-Type': 'application/json',
                    },
        });
            }).catch(function(error) {
              console.error('Failed to subscribe the user:', error);
            });
          }
        });
      }).catch(function(error) {
        console.error('Failed to register the service worker:', error);
      });
    }
  </script>

sw.js

self.addEventListener('push', function(event) {
    console.log('[Service Worker] Push Received');
    console.log('[Service Worker] Data:', event.data.text());
 
    const title = 'Push Notifications Example';
    const options = {
      body: event.data.text(),
    //   icon: 'images/icon.png',
    //   badge: 'images/badge.png'
    };
 
    event.waitUntil(self.registration.showNotification(title, options));
  });
 
  self.addEventListener('notificationclick', function(event) {
    console.log('[Service Worker] Notification click received.');
 
    event.notification.close();
 
    event.waitUntil(clients.openWindow('https://www.example.com'));
  });
 

Comments

Post a Comment

All time Best Post

Write a program that declares a class named Person. It should have instance variables to record name, age and salary. Use new operator to create a Person object. Set and display its instance variables.

-
Image
 Program -  import java.util.*; public class persondata { public static void main(String[]args) { person a = new person(); a.set(); System.out.println("your data is \n\n"); a.display(); } }  class person { private String name; private int age; private int salary;   public void display() { System.out.println("your name is :"+name); System.out.println("your age is :"+age); System.out.println("your salary is "+salary); } public void set(){ Scanner sc = new Scanner(System.in); System.out.println("enter your name"); name = sc.next(); System.out.println("enter your age"); age = sc.nextInt(); System.out.println("enter your salary"); salary = sc.nextInt(); } } outpiut -   
Read more

express session login system using node express mongodb

-
Image
express session login system using node express mongodb Dependencies used -  File -  Server.js file -  const express = require ( 'express' ); const mongoose = require ( 'mongoose' ); const bcrypt = require ( 'bcrypt' ) const session = require ( 'express-session' ) const mongoDBSession = require ( 'connect-mongodb-session' )( session ); const bodyparser = require ( 'body-parser' ); const userModel = require ( './models/user' ) const student = require ( './student' ) const app = express ();   const mongoURI = 'mongodb://localhost:27017/testsix'     mongoose . connect ( 'mongodb://localhost:27017/testsix' ,{ useNewUrlParser: true , useUnifiedTopology: true , useCreateIndex: true , }) . then (() => console . log ( "database is connected" )) . catch (( err ) => console . log ( err ))   app . set ( 'view engine' , 'ejs' )   app . use ( bodyparser . urlencod...
Read more

IMAGE CRUD OPERATION USING EXPRESS MONGOOSE MULTER

-
Image
  IMAGE CRUD OPERATION USING EXPRESS MONGOOSE MULTER Dependencies Used -    File Structured -  Server.js file -  // requirements    const express = require ( 'express' ) const imgModel = require ( './db/user' ) const mongoose = require ( 'mongoose' ) const multer   = require ( 'multer' ) const path = require ( 'path' ) const app = express ();   // serving static files  app . use ( express . static ( 'public' ));     // connecting to database  mongoose . connect ( 'mongodb://localhost:27017/testten' , { useNewUrlParser: true , useUnifiedTopology: true , useFindAndModify: false   }) . then (() => console . log ( "database is connected" )) . catch (( err ) => console . log ( err ))   // multer destination set    var storage = multer . diskStorage ({      destination: "./public/uploads/" ,      filename : ( req , file , cb ) => {   ...
Read more

connect websocket to binance api and store t he true value in the db

-
  const WebSocket = require( 'ws' ); const bitcoindata = require( '../model/bitcoindata.model' ); function connectToBinanceWebSocket() {    // Connect to Binance's WebSocket API for the BTC/USDT trading pair    const socket = new WebSocket( 'wss://stream.binance.com:9443/ws/btcusdt@kline_1m' );    // Handle messages received from the WebSocket   socket.on( 'message' , (data) => {      const message = JSON.parse(data);      if (message.e === 'kline' ) {        const candle = message.k;       console.log( `[${new Date(candle.t).toLocaleTimeString()}] Open: ${candle.o}, High: ${candle.h}, Low: ${candle.l}, Close: ${candle.c}` );        if (candle.x == true ) {         console.log({candle})         bitcoindata.crea...
Read more

CRUD APP WITH SORT IN NODE EXPRESS AND MONGODB

-
Image
  CRUD APP WITH SORT IN NODE EXPRESS AND MONGODB wriitten in ecma script6  Dependencies -    File structure  - Server.js file -  //requirements  const express = require ( 'express' ); const mongoose = require ( 'mongoose' ); const bodyparser = require ( 'body-parser' ) const app = express ();   // database connection mongoose . connect ( 'mongodb://localhost:27017/testone' ,{ useNewUrlParser: true , useUnifiedTopology: true }) . then (() => console . log ( "databse is connected" )) . catch (( err ) => console . log ( err ))     // database schema var itemSchema = new mongoose . Schema ({      name : String ,      surname : String ,      event : String })   // database collection creation var item = new mongoose . model ( 'item' , itemSchema )   // setting view engine to ejs app . set ( 'view engine' , 'ejs' )   // using body parser because...
Read more

Rock-Paper-Scissor Game in Pure JavaScript

-
Image
*html css and javascript written in chronological order* Sneak peakk of the game -  HTML -      <div class="navbar"> <h2>ROCK-PAPER-SCISSOR-GAME</h2></div>         <div class="selected">         <div id="demo">Computer Selected Nothing</div>              <h2>You <span id="youselected">Selected Nothing</span></h2>             <div id="result">Result is : </div>             <div >Computer Score <span id="scorec" >0</span></div>             <div >Your Score <span id="scoreu">0</span></div>             <div>Draw <span id="draw1">0</span></div>                 </div>       ...
Read more

how to delete image from the folder directly from a Request (MULTER)

-
imported item -  const   path  =  require ( 'path' ) const   fs  =  require ( 'fs' ) // code : router . get ( '/delete/:id' , isAuth , async  ( req , res ) => {      await    addBlogmodel . findByIdAndRemove ( req . params . id ,( err , items ) => {          if ( err ){              res . send ( "sory we have some issuse" )         }          else         {              const   path  =  './public/uploads/' + items . image              try  {                  f...
Read more

calculate rsi

-
Image
  const newFunction = async () => {       // https://stackoverflow.com/questions/70452789/node-js-find-the-same-rsi-as-tradingview       // https://gist.github.com/jmoz/1f93b264650376131ed65875782df386       // https://stackoverflow.com/questions/50203625/calculate-rsi-based-on-kraken-ohlc       // topdown1.count({}, function( err, count){           //  console.log( "Number of data in db :", count );           // topdown1.find(async (err,items)=>{                 // if(err){                   //      console.log(err)                 // }                 // else{                     const ticker = await exchange . fetchTicker ( '...
Read more

java program for 1 to 10 print using while loop

-
 program-  public class Main {     public static void main(String[] args)     {         int i=0;                  while ( i<10 )         {             i++;             System.out.println(i);                      }     } } Output :- 1 2 3 4 5 6 7 8 9 10
Read more