Web前端通知通能Notification和拖拽能力

一般来说会先请求用户是否同意进行通知，但部分情况下会自动弹窗告知用户是否同意。

Notification

通知客户是否同意

• granted：同意
• denied：拒绝

const permissionPromise = await Notification.requestPermission();
console.log(permissionPromise);

需要注意的是，如果用户拒绝了那就无法通过编程方式再继续通知了。

通知显示和隐藏

通知用户

new Notification("通知标题内容")

带内容和振动通知

const notification = new Notification('测试标题', {
  body: '你好啊啊啊',
  image: 'http://192.168.3.98:9000/test/64ee875c-7005-491c-be82-413aacd94b3aimage-20240604142630699.png',
  vibrate: true,
});

隐藏通知

const notification = new Notification('测试标题', {
  body: '你好啊啊啊',
  image: 'http://192.168.3.98:9000/test/64ee875c-7005-491c-be82-413aacd94b3aimage-20240604142630699.png',
  vibrate: true,
});
setTimeout(() => notification, 3000);

生命周期

有四个周期

1. onshow：通知显示时候触发
2. onclick：点击时触发
3. onclose：关闭时触发
4. onerror：发生错误时触发

拖拽能力

在Html5中每个元素都有这个draggable属性，当设置为false时不可以拖拽(使用拖拽API时无法进行拖拽)

<img
  alt=""
  draggable="false"
  src="http://192.168.3.98:9000/test/64ee875c-7005-491c-be82-413aacd94b3aimage-20240604142630699.png"
/>