how to redirect to specific page from notification?

Question

I'm trying to develop a PWA which shows a simple notification when the user open the application on web. successfully it is showing the notification. next the notification should redirect the user to a specific page when clicking on the notification. What should be added to this code to do so?

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#009578">
    <title>PWA</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="src/master.css">
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="images/logo192.png">
    <script src="notification.js"></script>
</head>
<body>
<p id="output"></p>
<center><h1>Progressive Web Application</h1></center>
    <center><p>Testing PWA</p></center>
    <script src="src/index.js"></script>
<script>
    //Notification objects have a close() method. SOME browser automatically close them.
    //Notification Events - click, error, close, show
    if( 'Notification' in window){
        
        if (Notification.permission === 'granted') {
            // If it's okay let's create a notification
            doNotify();
        }else{
            //notification == denied
            Notification.requestPermission()
                .then(function(result) {
                    console.log(result);  //granted || denied
                    if( Notification.permission == 'granted'){ 
                        doNotify();
                    }
                })
                .catch( (err) => {
                    console.log(err);
                });
        }
    
    }
    function doNotify(){
        let title = "Testing Notification";
        let t = Date.now() + 120000;    //2 mins in future
        let options = {
            body: 'Its a PWA Notification',
            data: {prop1:123, prop2:"Steve"},
            lang: 'en-CA',
            icon: './img/calendar-lg.png',
            timestamp: t,
            vibrate: [100, 200, 100]
        }
        let n = new Notification(title, options);

        n.addEventListener('show', function(ev){
            console.log('SHOW', ev.currentTarget.data);
        });
        n.addEventListener('close', function(ev){
           console.log('CLOSE', ev.currentTarget.body); 
        });
        setTimeout( n.close.bind(n), 3000); //close notification after 3 seconds
    }
    /*************
    Note about actions param - used with webworkers/serviceworkers
    actions: [
       {action: 'mail', title: 'e-mail', icon: './img/envelope-closed-lg.png'},
       {action: 'blastoff', title: 'Blastoff', icon: './img/rocket-lg.png'}]
   *********************/
</script>
</body>
</html>

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Greedo, Oct 05 '20 at 13:04
@Greedo thanks for the solution. it redirects me automatically. But i want to get redirected after clicking on the notification — Nila Ravichandran, Oct 05 '20 at 13:22
it is the same, just use a callback on the click event of the notification — Greedo, Oct 05 '20 at 14:17

how to redirect to specific page from notification?

0 Answers0