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, / , and this tutorial, /@sarafathulla/how-to-add-firebase-push-notifications-in-next-js-react-8eecc56b5cab .

As well as these API's, /device-motion.html and /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.

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./shadowwalker/next-pwa/ , and this tutorial, https://medium./@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.

• javascript
• reactjs
• next.js
• progressive-web-apps
• workbox

• You can try github./vercel/next.js/tree/canary/examples/…, 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 Commented Oct 25, 2020 at 16:15
• Have you looked at the devicemotion event yet? – DCCoder Commented Oct 25, 2020 at 17:04

1 Answer 1

this working for me

// public/firebase-messaging-sw.js
importScripts('https://www.gstatic./firebasejs/7.9.1/firebase-app.js');
importScripts('https://www.gstatic./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);
      });
    }
  });