2

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

在我的主要 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>。

它没有给我任何有意义的信息来进一步调查这个问题。

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

  1. 后端框架：Laravel。
  2. 在我的 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});
                    })

然后推送通知起作用；但错误仍然存​​在。但是，错误现在指向registration.pushManager.subscribe({userVisibleOnly: true});JS 中的行。可能是什么原因？

4

2 回答 2

3

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

于 2019-03-18T15:00:09.103 回答
0

如果您正在使用 react，请在 index.js 中使用 serviceWorker.register() 修复 serviceWorker.unregister()。我这样解决了

于 2019-10-22T04:49:31.857 回答