<!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
网友回复
我知道答案，我要回答
私活外包
最新提问
Neutralinojs与Electron的区别与不同？
浏览器跨域解决方案有哪些？
有没有开源的solo agent一句话描述就能开发直接运行的前后端应用源代码？
订单支付过程中部分商品库存不足如何处理？
python如何开发一个自定义域名后缀的邮箱系统及登录发送邮件管理web页面？
有没有开源的项目将图片视频声音文字转场特效编排自动生成剪映草稿json文件？
有没有摄像头捕获眼球转动操作鼠标的开源代码？
localstorage如何生成自增的键值对进行增删改查？
python有没有将python脚本与python运行环境一键打包成exe的代码？
nodejs如何执行浏览器中运行的js代码？
