Firebase Cloud Messaging not working with Samsung Internet

1.8k views Asked by At

I'm setting up Firebase Cloud Messaging to do push notifications on the web. It works but only with Chrome (Windows and Android) and Firefox(Android) so far. It's not working on Samsung Internet Browser (the browser that comes pre-installed on Samsung's phones) and I haven't gotten a chance to test on iOS so far.

I've tried adding the sender id as gcm_sender_id to the Cloud Function I'm using as well as to the manifest.json file to no avail. Below is how the notification body is set up.

// Create notification content
const notification = admin.messaging().Notification = {
    title : 'My test Title',
    body : `Lorem Ipsum Dolor`,

};

const payload = admin.messaging().Message = {
    notification,
    webpush:{
        notification : {
            vibrate: [200, 100, 200],
            icon: 'https://www.goodhousekeeping.com/life/pets/g4531/cutest-dog-breeds/', //A random dog photo
            fcm_options: {
                link: 'https://www.youtube.com',
                gcm_sender_id : '<SENDER_ID>',
            },
        },
    },
    topic: '<TOPIC>'
};
   //Send notification
   return admin.messaging().send(payload);

Is there anything I can do to get this to work on Samsung Internet? Service Workers have been supported since v4 and the device has v9. It should be noted that even on the devices that receive it, when I click on it, it doesn't open up the website I set in fcm_options nor does it follow the vibrate pattern but it does load the icon.

UPDATE: As of April 2020 FCM is completely incompatible with iOS Chrome and Safari

1

There are 1 answers

5
SRR On BEST ANSWER

So I know this probably isn't helpful but it 'magically' started working today. The browser version is Samsung Internet v10.

firebase-messaging-sw.js

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.13.2/firebase-messaging.js');


// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: ''
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(payload => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification
  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    priority: payload.data.priority,
    vibrate: payload.data.vibrate,
    icon: payload.data.icon,
    click_action: payload.data.link,
    link: payload.data.link
  };


  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

//Open browser window or focus it if it is open on notification click
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(self.clients.openWindow('www.yourwebsitehere.com'));
});

Cloud function to send notifications

//Sends notifications to users when the statistics document is updated
exports.sendNotifications = functions.firestore.document('restaurant/statistics').onUpdate(async (snapshot,context) =>{
    //Get updated document data
    const updatedData = snapshot.after.data();

    const payload = admin.messaging().Message = {
        data: {
            title: updatedData.title,
            body : updatedData.body,
            icon: updatedData.icon,
            link: updatedData.link,
            vibrate: "[300, 200, 300]",
            priority: "high"
         },
        topic: 'statistics'
    }

    return admin.messaging().send(payload);
});