我正在尝试向我的服务工作者添加推送消息，并面临自昨晚以来一直无法解决的问题。
在我的主HTML文件中，我有以下内容 -
<script>
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js', {scope: '/pwa/'}).then(registration => {
console.log('Service Worker Registered: ', registration);
registration.pushManager.subscribe({userVisibleOnly:true});
});
})
}
</script>
我在控制台上收到“Service Worker Registered”消息。这意味着注册成功。然而，铬跟随它后面的行没有说明错误 -
Uncaught (in promise) DOMException (index):1
点击(index):1将我带到相应页面/pwa/的顶部，并突出显示<!DOCTYPE html>。
它没有给我任何有意义的信息来进一步调查这个问题。
如果你能指导我解决这个问题，我将不胜感激。我将粘贴我的其余代码并在下面进行设置。
const workboxPlugin = require('workbox-webpack-plugin');
mix.webpackConfig({
plugins: [
new workboxPlugin.InjectManifest({
swSrc: 'public/service-worker-offline.js', // more control over the caching
swDest: 'service-worker.js', // the service-worker file name
importsDirectory: 'service-worker-assets' // have a dedicated folder for sw files
})
],
output: {
publicPath: '' // Refer: https://github.com/GoogleChrome/workbox/issues/1534
}
});
进入我的service-worker-offline.js -
workbox.skipWaiting();
workbox.clientsClaim();
// some other entries, followed by
self.addEventListener('push', (event) => {
const title = 'Aha! Push Notifications with Service Worker';
const options = {
'body' : event.data.text()
};
event.waitUntil(self.registration.showNotification(title, options))
});
我期待着您的回复，并提前感谢您的帮助。
附录：
我做了进一步调查，发现如果我这样做 -
Notification.requestPermission().then(function(permission) {
registration.pushManager.subscribe({userVisibleOnly: true});
})
推送通知有效;但错误仍然存在。但是，错误现在指向JS中的registration.pushManager.subscribe({userVisibleOnly: true});行。可能是什么原因？
DOMException具有并不总是可见的细节。捕获DOMException，并确保将消息记录到控制台。它通常会提供更多信息。在我的情况下，“注册失败 - 许可被拒绝”消息提醒我，我的chrome设置中有blocked all notifications。