Editing Notification 浏览器通知

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Notification 浏览器通知</title>
</head>

<body>
    <input class="nrp-title" placeholder="标题" /><br/>
    <input class="nrp-icon" placeholder="图标" /><br/>
    <input class="nrp-content" placeholder="通知内容" /><br/>
    <input class="nrp-wait" type="checkbox" /> 交互，不自动关闭 <br/>
    <button>通知</button>
</body>

</html>

document.querySelector('button').addEventListener('click', async function () {
    // 请求通知权限
    let permission = await Notification.requestPermission();
    if (permission === 'granted') {
        let domTxtTitle = document.querySelector('.nrp-title');
        let domTxtIcon = document.querySelector('.nrp-icon');
        let domTxtContent = document.querySelector('.nrp-content');
        let domTxtWait = document.querySelector('.nrp-wait');

        // 创建通知
        const notification = new Notification(domTxtTitle.value || '标题', {
            body: domTxtContent.value || `通知内容 ${Date.now()}`,
            icon: domTxtIcon.value || '/favicon.ico',
            requireInteraction: domTxtWait.checked
        });

        // 处理点击事件
        notification.addEventListener('click', () => {
            // 点击通知后执行的操作
        });
    }
})