/*
* 然后你就可以处理你的业务需求
*/
function main () {
if (typeof Notification === 'undefined') {
console.log(`浏览器不支持 Notification`)
return
}
if (Notification.permission === 'denied') {
console.log(`Notification 权限已被禁用`)
return
}
if (Notification.permission === 'granted') {
console.log(`Notification 可用`)
} else {
Notification.requestPermission().then(function (permission) {
if (permission === 'granted') {
console.log(`用户已授权,可展示通知`)
} else if (Notification.permission === 'denied') {
console.log(`用户已禁止`)
} else {
console.log(` 用户尚未授权,需首先向用户申请通知权限`)
}
})
}
}
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
data: { type: 'focus-or-open-window', a: 1, url: '/test' }
};
const notification = new Notification(title, options)
以上的问题其实都很好解决,MDN 上有很多配置可以去看一下,配置啥,图标呀,图片呀,标题呀,是否强制用户交互呀,等等的操作都在MDN 有介绍,接下来的我觉得才可以看看
function focusOrOpenWindow(event) {
const url = event.notification.data.url || '/';
const urlToOpen = new URL(url, self.location.origin).href;
const promiseChain = clients
.matchAll({
type: 'window',
includeUncontrolled: true
})
.then(windowClients => {
let matchingClient = null;
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
if (windowClient.url === urlToOpen) {
matchingClient = windowClient;
break;
}
}
if (matchingClient) {
return matchingClient.focus();
} else {
return clients.openWindow(urlToOpen);
}
});
event.waitUntil(promiseChain);
}
self.addEventListener('notificationclick', function(event) {
event.notification.close();
const type = (event.notification.data && event.notification.data.type) || '';
switch (type) {
case 'focus-or-open-window':
focusOrOpenWindow(event);
break;
default:
// NOOP
break;
}
});
if ('ServiceWorker' in window) {
navigator.serviceWorker
.register('service-worker.js')
.then(function(registration) {
console.log('Service worker successfully registered.');
})
.catch(function(err) {
console.error('Unable to register service worker.', err);
});
}