PWA Push Notification Configuration

0
It is now possible to enable true push notifications for PWAs I have tried this by following the steps in the documentation, but I can't get it to work When a user tries to register for push notifications, I get the error: An error occured while registering for Push Notifications: Registration failed - push service error Nanoflow stack: "Call JavaScript Action: PushNotifications.RegisterForPushNotificationsWeb" in nanoflow "PushNotifications.SUB_RegisterForPushNotificationsWeb" "Call nanoflow: PushNotifications.SUB_RegisterForPushNotificationsWeb" in nanoflow "PushNotifications.ACT_RegisterForPushNotificationsWeb" Does anybody know how I can investigate this further?   Also, the instructions for PWA don't make sense to me. The instructions are here: Part 6: Implement Push Notifications in Your Progressive Web App | Mendix Documentation Step 3 involves modifying index.html to add initialisation of firebase - this is fine However, step 4 seems to do the same thing, but in a separate js file, which is never used Is this an error?
asked
7 answers
1

Hi Colin,

I'm currently investigating the same issue. So far, I've noticed that in my app the issue only occurs in Edge Browser, but not in Chrome. This might not be the final solution, but it's a first step towards resolving the problem.

answered
1

Hi Colin,

I have successfully gotten push notifications for my PWA working.  I ran into this error as well, see this other forum post that I answered, I think it is the same issue.

 

As to the configuration question, I am not sure. I assumed that the repeated code snippet in the js file was to ensure that the service worker would always have access to the firebase config even when the app was closed. But that it just a guess.

 

Hope this was helpful!

answered
1

Hi Colin,

I have successfully configured PWA push notifications & also i have written the blog on this.

You can check out my article below is the link 

 

https://medium.com/@mohammad.saqib_1262/web-push-notification-in-mendix-a-comprehensive-guide-9043e0ab5bbf

answered
0

I am running in the same issue, but see errors at the client side. We run in our own cloud and the cross site scripting rules are quite strictly implemented. In the browser developer tools I saw errors because of this ( refused to connect to X because it violates the Content Security Policy directive).

 

Therefore I am now in the process to add the domains used to the connect-src in that policy (cross site scripting HTTP_HEADERS). I solve one after the other and it seems I am almost there.

 

Next to that, I see that in my browser, my company has disabled notifications. That might be another reason why in the browser, this might not work.

answered
0

Hi Colin,

 

I have exact the same issue, i still don't have found the cause/solution. Do you have found already a solution for this issue?

 

Marijn

answered
0

Hi All,

Push notification is working well, the issue I had just on environment, when it is on production, it works perfect.

answered
0

Hi All,

 

I have fixed the issue, bellow my solution for the file firebase-messaging-sw.js

 

importScripts('https://www.gstatic.com/firebasejs/9.9.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.9.1/firebase-messaging-compat.js');
 
// Initialize Firebase in the service worker
const firebaseConfig = {
  apiKey: "AIzaSyBPbuyy2qArKsecretkeyfgtth_w",
  authDomain: "thename-1a0bd.firebaseapp.com",
  projectId: "thename-1a0bd",
  storageBucket: "thename-1a0bd.firebasestorage.app",
  messagingSenderId: "433333333",
  appId: "1:26433331543:web:a64d8**********"
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});
 
function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
    }
  });
}

 

answered