Question

我正在尝试向我的服务人员添加推送消息，并面临自昨晚以来一直困扰着我的问题。

在我的主要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”消息。这表示注册成功。但是，Chrome会在其后跟随以下行，但未对错误进行任何说明-

Uncaught (in promise) DOMException (index):1

单击(index):1会将我带到相应页面/pwa/的顶部，并突出显示<!DOCTYPE html>。

它没有提供任何有意义的信息来进一步调查此问题。

如果您能指导我解决此问题，将不胜感激。我将其余代码和设置粘贴到下面。

后端框架：Laravel。
我的webpack.mix.js中的条目

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});行。可能是什么原因？

Answer 1

DOMException 具有并不总是可见的详细信息。捕获您的DOMException，并确保将消息记录到控制台。通常它将提供更多信息。就我而言，“注册失败-权限被拒绝”消息提醒我，我的Chrome设置中有blocked all notifications。

Answer 2

如果您使用React，请在index.js中用serviceWorker.register（）修复serviceWorker.unregister（）。我这样解决了

初始化pushManager.subscribe

2 个答案: