Javascript 如何从通知重定向到特定页面？_Javascript_Html_Redirect_Notifications_Progressive Web Apps

Javascript 如何从通知重定向到特定页面？

javascript html redirect notifications

Javascript 如何从通知重定向到特定页面？,javascript,html,redirect,notifications,progressive-web-apps,Javascript,Html,Redirect,Notifications,Progressive Web Apps,我正在尝试开发一个PWA，当用户在web上打开应用程序时，它会显示一个简单的通知。它成功地显示了通知。接下来，当单击通知时，通知应将用户重定向到特定页面。为此，应向该代码中添加哪些内容 html 普华永道渐进式Web应用程序测试PWA //通知对象有一个close（）方法。某些浏览器会自动关闭它们。 //通知事件-单击、错误、关闭、显示如果（窗口中的“通知”）{ 如果（Notification.permission===“已授予”）{ //如果可以的话，让我们创建一个通知 doNoti

我正在尝试开发一个PWA，当用户在web上打开应用程序时，它会显示一个简单的通知。它成功地显示了通知。接下来，当单击通知时，通知应将用户重定向到特定页面。为此，应向该代码中添加哪些内容

html


普华永道

渐进式Web应用程序
测试PWA
//通知对象有一个close（）方法。某些浏览器会自动关闭它们。
//通知事件-单击、错误、关闭、显示
如果（窗口中的“通知”）{
如果（Notification.permission===“已授予”）{
//如果可以的话，让我们创建一个通知
doNotify（）；
}否则{
//通知==拒绝
Notification.requestPermission（）
.然后（函数（结果）{
console.log（result）；//已授予| |已拒绝
如果（Notification.permission=='grated'）{
doNotify（）；
}
})
.catch（（错误）=>{
控制台日志（err）；
});
}
}
函数doNotify（）{
让title=“测试通知”；
让t=Date.now（）+120000；//未来2分钟
让选项={
正文：“这是PWA通知”，
数据：{prop1:123，prop2:“史蒂夫”}，
朗：“恩，卡”，
图标：'./img/calendar lg.png'，
时间戳：t，
振动：[100200100]
}
设n=新通知（标题、选项）；
n、 addEventListener（'show'，函数（ev）{
console.log（'SHOW'，ev.currentTarget.data）；
});
n、 addEventListener（“关闭”，功能（ev）{
console.log（'CLOSE'，ev.currentTarget.body）；
});
setTimeout（n.close.bind（n），3000）；//3秒后关闭通知
}
/*************
关于actions param的说明-与webworkers/serviceworkers一起使用
行动：[
{操作：“邮件”，标题：“电子邮件”，图标：'./img/envelope closed lg.png'}，
{动作：'blastoff'，标题：'blastoff'，图标：'./img/rocket lg.png'}]
*********************/

这是否回答了您的问题@谢谢你的解决方案。它自动重定向我。但是我想在点击通知后被重定向它是一样的，只需在通知的点击事件上使用回调它的工作tq如此之多@greedomark问题为重复，以便它可以被关闭：）

<!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>