How to integrate PWA with Next.js to allow for notifications and push notifications

Question

I'm building a PWA with next.js and have been having a few issues.

I am trying to integrate in device motion to my users accounts and geolocation, and then notifications.

Basing this off of this repo, https://github.com/shadowwalker/next-pwa/ , and this tutorial, https://medium.com/@sarafathulla/how-to-add-firebase-push-notifications-in-next-js-react-8eecc56b5cab .

As well as these API's, https://whatwebcando.today/device-motion.html and https://whatwebcando.today/geolocation.html .

Currently the PWA is boilerplate using next-pwa,

next.config.js

module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === 'development',
    dest: 'public',
    runtimeCaching,  
  },
  poweredByHeader: false,
},
withBundleAnalyzer(),

)

I am very confused about how one can integrate just the simple device motion into the PWA, and how to move forward in general.

If someone could point me in the right direction that would be brilliant! So different from usual web dev code.

You can try https://github.com/vercel/next.js/tree/canary/examples/with-next-offline, I see that they make few setup for having a manifest and allow them to be installed on Chrome, and may lead to a PWA — nghiaht, Oct 25 '20 at 16:15
Have you looked at the [devicemotion event](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent) yet? — DCCoder, Oct 25 '20 at 17:04

score 8 · Accepted Answer · answered Feb 11 '21 at 06:09

this working for me

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

firebase.initializeApp({
  apiKey: '****',
  authDomain: '*****',
  projectId: '*****',
  storageBucket: '******',
  messagingSenderId: '*****',
  appId: '*****',
  measurementId: '*****',
});

firebase.messaging();

//background notifications will be received here
firebase.messaging().setBackgroundMessageHandler((payload) => {
  const { title, body } = JSON.parse(payload.data.notification);
  var options = {
    body,
    icon: '/icons/launcher-icon-4x.png',
  };
  registration.showNotification(title, options);
});

// webpush.js
import 'firebase/messaging';
import firebase from 'firebase/app';
import localforage from 'localforage';

const firebaseCloudMessaging = {
  //checking whether token is available in indexed DB
  tokenInlocalforage: async () => {
    return localforage.getItem('fcm_token');
  },

  //initializing firebase app
  init: async function () {
    if (!firebase.apps.length) {
      firebase.initializeApp({
        apiKey: '****',
        authDomain: '*****',
        projectId: '*******',
        storageBucket: '******',
        messagingSenderId: '******',
        appId: '*****',
        measurementId: '*******',
      });

      try {
        const messaging = firebase.messaging();
        const tokenInLocalForage = await this.tokenInlocalforage();

        //if FCM token is already there just return the token
        if (tokenInLocalForage !== null) {
          return tokenInLocalForage;
        }

        //requesting notification permission from browser
        const status = await Notification.requestPermission();
        if (status && status === 'granted') {
          //getting token from FCM
          const fcm_token = await messaging.getToken();
          if (fcm_token) {
            //setting FCM token in indexed db using localforage
            localforage.setItem('fcm_token', fcm_token);
            //return the FCM token after saving it
            return fcm_token;
          }
        }
      } catch (error) {
        console.error(error);
        return null;
      }
    }
  },
};
export { firebaseCloudMessaging };

// _app.js
import { firebaseCloudMessaging } from '../webPush';
import firebase from 'firebase/app';

useEffect(() => {
    setToken();
    async function setToken() {
      try {
        const token = await firebaseCloudMessaging.init();
        if (token) {
          getMessage();
        }
      } catch (error) {
        console.log(error);
      }
    }
    function getMessage() {
      const messaging = firebase.messaging();
      console.log({ messaging });
      messaging.onMessage((message) => {
        const { title, body } = JSON.parse(message.data.notification);
        var options = {
          body,
        };
        self.registration.showNotification(title, options);
      });
    }
  });

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes — Ran Marciano, Feb 11 '21 at 07:14
Thanks! It worked just fine, I had to research a little longer, but it worked. — Milo, Mar 19 '21 at 14:03
@RanMarciano by his statement "this working for me" Is quite self-explanatory that they do not fully understand the code, but if the code is working, it still might help the next person to dissect and understand the code. Any help is better than just keeping to yourself... — Paul van Dyk, Jun 30 '21 at 15:49

How to integrate PWA with Next.js to allow for notifications and push notifications

1 Answers1