<!DOCTYPE html>在新建一个pushservice.js
<html>
<head>
<meta charset="UTF-8">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
PWA浏览器Notification通知
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('pushservice.js').then(function(registration) {
Notification.requestPermission(function(result) {
if (result === 'granted') {
registration.showNotification('系统通知', {
body: '通知内容', // 内容
icon: 'images/banana.png', // 图标
badge: 'images/banana.png', // 小图标，手机上展现通知缩略信息时使用
image: 'images/banana.png', // 给用户的预览图
vibrate: [100, 200, 200, 300], // 设置震动
requireInteraction: true, // 显示通知直到用户交互
actions: [
// 给通知增加一些按钮
{
action: 'f-action',
title: '按钮1',
icon: 'images/banana.png'
},
{
action: 's-action',
title: '按钮二',
icon: 'images/banana.png'
}]
});
}
});
// Registration was successful
console.log('ServiceWorker registration successful with scope: ',
registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ',
err);
});
});
}
// 注册后显示通知
</script>
</body>
</html>
self.addEventListener('notificationclick', function(event) {
let promiseChain = Promise.resolve();
if (!event.action) {
// 没有点击在按钮上
//const data = event.notification.data;
console.log('Notification click.');
return;
}
// 对应 registration.showNotification(title, options) 中 options 中设置的按钮
switch (event.action) {
case 'f-action':
console.log('f-action click');
promiseChain = clients.openWindow("http://bfw.wiki/");
break;
case 's-action':
console.log('s-action click');
break;
default:
console.log('Unknow action click', event.action);
}
event.waitUntil(promiseChain);
});注意：这些代码必须运行在https下才能弹出提示框项目在线webide地址为http://studio.bfw.wiki/Studio/Open.html?projectid=15874608911762310073
网友回复
我知道答案，我要回答
私活外包
最新提问
阿里通义大模型哪些是支持多模态的api的ai模型？
js如何实现浏览器中离线语音唤醒语音聊天小助手？
浏览器中如何将WebM视频转成mp4视频？
parlant如何改成qwen 的apikey与baseurl？
如何写一个chrome插件实现截屏自动生成步骤图文教程转成pdf或网页？
python如何通过阿里云的api对域名进行解析和ecs主机服务器进行启动停止等操作？
Tesla Robotaxi可以让特斯拉车自动无人驾驶跑滴滴为车主赚钱，国内以后也会这样吗？
有没有可以监控安卓手机上的app打开后偷偷摸摸做了啥的监控软件？
webrtc进行p2p连接发送的文本音视频文件是否是加密的？
如何让一个可爱的三维动物通过three在浏览器中有表情动作的自然说话？
