跳到主要内容

通知与页面可见性

Notification 如何创建与关闭？​

const n = new Notification("Title text!");
n.onshow = () => console.log("shown");
n.onclick = () => console.log("clicked");
n.onclose = () => console.log("closed");
n.onerror = () => console.log("error");
setTimeout(() => n.close(), 1000);
成员作用
close()隐藏通知
onshow显示时触发
onclick点击时触发
onclose关闭时触发
onerror出错时触发

通知权限有什么约束？​

  • 上下文: 只能在安全上下文 (HTTPS) 中触发;
  • 授权: 每个源必须得到用户允许;
  • 频率: 每个域只能发起一次权限请求;
  • 请求: Notification.requestPermission() 返回 "granted" | "denied" | "default";
Notification.requestPermission().then((permission) => {
  console.log("User responded:", permission);
});

Page Visibility 如何感知页面前后台？​

成员作用
document.visibilityState"visible"/"hidden"/"prerender"/"unloaded"
document.hidden页面是否隐藏
document.addEventListener("visibilitychange", handler)可见性变化事件
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    // 暂停轮询、动画或定时任务
  }
});
  • 用途: 页面不可见时停止高频任务, 降低能耗, 回前台时恢复;