I not receive push messages in my nextjs project

Viewed 1844

Hi in my nextjs project I will add firebase push notifications. I do this first time and have some troubles. My code:

next.config.js

...
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
...

if (!isServer && !dev) {
   ...
   config.plugins.push(
       new SWPrecacheWebpackPlugin({
                filename: 'sw.js',
                minify: false,
                staticFileGlobsIgnorePatterns: [/\.next\//],
                importScripts: ['/static/js/push-notifications.js'],
                staticFileGlobs: [
                    'static/**/*' // Precache all static files by default
                ],
                forceDelete: true,
                runtimeCaching: [
                    // Example with different handlers
                    {
                        handler: 'fastest',
                        urlPattern: /[.](png|jpg|css)/
                    },
                    {
                        handler: 'networkFirst',
                        urlPattern: /^http.*/ // cache all files
                    }
                ]
            }),
       ...
   )
}

push-notifications.js

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

const firebaseConfig = {...}
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
self.addEventListener('push', function(event) {
  if (event.data) {
    console.log('This push event has data: ', event.data.text());
  } else {
    console.log('This push event has no data.');
  }
});
messaging.setBackgroundMessageHandler((payload) => {
let data = JSON.parse(payload.data.custom_notification);
let notificationTitle = data.title;
let notificationOptions = {
    body: data.body,
    icon: 'https://image.flaticon.com/icons/png/128/107/107822.png',
    // options event
    actions: [
        {action: 'confirmAttendance', title: ' Confirm attendance'},
        {action: 'cancel', title: ' Not coming'}
    ],
    // For additional data to be sent to event listeners, needs to be set in this data {}
    data: {confirm: data.confirm, decline: data.decline, open: data.open}
};

const promiseChain = clients
    .matchAll({
        type: 'window',
        includeUncontrolled: true
    })
    .then(windowClients => {
        for (let i = 0; i < windowClients.length; i++) {
            const windowClient = windowClients[i];
            windowClient.postMessage(payload);
        }
    })
    .then(() => {
        return self.registration.showNotification(notificationTitle, notificationOptions);
    });
return promiseChain;
});

Also in my _app.js I use custom component for register service worker:

import { PureComponent } from 'react';
import 'firebase/messaging';
import localforage from 'localforage';

import initializedFirebaseApp from '../firebase.config';

class OfflineSupport extends PureComponent {
componentDidMount() {
    if ('serviceWorker' in navigator) {
        const messaging = initializedFirebaseApp.messaging();

        navigator.serviceWorker
            .register('sw.js')
            .then((registration) => {
                // Successfully registers service worker
                messaging.useServiceWorker(registration);
            })
            .then(() => {
                Notification.requestPermission().then((status) => {
                    console.log('Notification permission status:', status);
                    return messaging.getToken();
                }).then((token) => {
                    localforage.setItem('FCM_TOKEN', token);
                });
            })
            .catch((err) => console.error('Service worker error:' ,err));
    }
}

componentWillUnmount () {
    if ('serviceWorker' in navigator) {
        initializedFirebaseApp.messaging().deleteToken().then((token) => localforage.removeItem('FCM_TOKEN', token));
    }
}

render() {
    return null;
}
}

export default OfflineSupport;

I get notification Firebase console with 'push test message' options. Also I get data in console.log from push-notifications.js => eventListener('push'). My problem, I want save data from push notification to redux, for this I want get access to it, but file push-notifications.js is service worker's settings file and I can`t import to inside my redux functions. Thanks!

0 Answers
Related