Uncaught (in promise) DOMException When Initiating pushManager.subscribe

user_6463411 0
Viewed 1841

I'm trying to add push messaging to my service worker and facing issue that is eluding me since last night.

In my main HTML file, I have the following -

<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>

I do get "Service Worker Registered" message on the console. Which means the registration is successful. Chrome however follows it with following line that doesn't say anything about the error -

Uncaught (in promise) DOMException (index):1

Clicking on the (index):1 takes me to the top of corresponding page /pwa/, and highlights the <!DOCTYPE html>.

It does not give me any meaningful information to investigate the issue further.

Would appreciate if you could guide me in fixing this issue. I'll paste the rest of my code and setup below.

  1. Backend framework: Laravel.
  2. Entry in my 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
    }
});

Entry in my 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))
});

I look forward to your responses and thank you in advance for your help.

Addendum:

I did further investigation and found out that if I do -

Notification.requestPermission().then(function(permission) {
                        registration.pushManager.subscribe({userVisibleOnly: true});
                    })

then the push notification works; but the error still remains. However, the error now points to registration.pushManager.subscribe({userVisibleOnly: true}); line in the JS. What could be the reason?

service-worker-events service-worker laravel-mix progressive-web-apps laravel
2 Answers

The DOMException has details that are not always visible. Catch your DOMException, and make sure to log the message to the console. It will generally be much more informative. In my case, the "Registration failed - permission denied" message reminded me that I had blocked all notifications in my chrome settings.

user_15853450

If you are using react, fix serviceWorker.unregister () with serviceWorker.register () in index.js. I solved it like this

user_122011760
Related