HTML5网页通知怎么发送_WebNotifications通知API使用

Notification

if (!("Notification" in window)) {
  alert("您的浏览器不支持桌面通知。");
}

// 请求权限
Notification.requestPermission().then(function (permission) {
  if (permission === "granted") {
    console.log("用户已授予通知权限。");
    // 权限获取成功后，可以发送通知了
    sendMyNotification();
  } else if (permission === "denied") {
    console.warn("用户拒绝了通知权限。");
    // 可以在这里提示用户如何手动开启
  } else { // 'default'
    console.log("用户关闭了权限请求弹窗，但未明确拒绝。");
  }
});

// 这是一个示例函数，用于发送通知
function sendMyNotification() {
  // 确保权限已授予
  if (Notification.permission === "granted") {
    const options = {
      body: "这是一条来自您的网站的新消息！",
      icon: "/path/to/icon.png", // 通知图标，通常是网站的favicon
      tag: "new-message", // 用于分组和替换通知
      renotify: true, // 如果tag相同，是否重新提醒（声音/振动）
      silent: false, // 是否静音
      requireInteraction: false // 是否需要用户点击才能关闭
      // 更多选项如 image, badge, actions 等
    };

    const notification = new Notification("您有新通知！", options);

    // 监听通知的点击事件
    notification.onclick = function (event) {
      console.log("通知被点击了！", event);
      // 点击后可以跳转到相关页面
      window.focus(); // 将浏览器窗口置顶
      // window.open('https://your-website.com/messages', '_blank');
      notification.close(); // 点击后关闭通知
    };

    // 监听通知的关闭事件
    notification.onclose = function () {
      console.log("通知被关闭了。");
    };

    // 监听通知的错误事件
    notification.onerror = function () {
      console.error("通知发送时发生错误。");
    };

  } else {
    console.warn("没有通知权限，无法发送通知。");
  }
}

options

tag

tag

Notification.permission

"granted"

if (!("Notification" in window))

localhost

tag

renotify: true

tag

icon

options

tag

tag

tag

renotify: true

renotify

true

false

notification.onclick

// Service Worker 注册示例 (在主线程JS中)
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker 注册成功:', registration);
      // 可以在这里订阅Push API
    })
    .catch(error => {
      console.error('Service Worker 注册失败:', error);
    });
}

// sw.js (Service Worker文件示例)
self.addEventListener('push', function(event) {
  const data = event.data.json();
  const title = data.title || '新消息';
  const options = {
    body: data.body || '您有一条新通知。',
    icon: data.icon || '/path/to/default-icon.png',
    badge: data.badge || '/path/to/default-badge.png',
    data: {
      url: data.url || '/' // 点击通知后跳转的URL
    }
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close(); // 关闭通知

  const urlToOpen = event.notification.data.url || '/';
  event.waitUntil(
    clients.openWindow(urlToOpen) // 打开或聚焦到指定URL
  );
});