Firebase Cloud Messaging for web

Question

I want to build a messaging app for web using Google's Firebase. In this app, a user should send and receive messages to/from other users. I checked Google's Firebase website but I got lost. Can you tell me where to start? Can you show me any tutorial or something like that related to Firebase web messaging? I welcome any suggestions. Thanks.

score 6 · Answer 1 · answered Oct 24 '16 at 09:08

6

Firebase Cloud Messaging for Web is now officially available for many browsers.

We have written a blogpost about our experience implementing it.

answered Oct 24 '16 at 09:08

David Vávra

18,446
7
48
56

score 3 · Accepted Answer · edited May 23 '17 at 12:02

3

FCM (firebase cloud messaging) can be implemented with Android, iOS and web(specified Google Chrome) only. So for using it on web application for all browser we have to implement the firebase database. You can see this implementation of firebase database

edited May 23 '17 at 12:02

Community

1
1

answered Jul 11 '16 at 05:54

Pritish Joshi

2,025
3
18
33

@Qualwebs can we use google's push notification for chrome web sites with firebase. What is the major difference between google cloud messaging push notifications for web vs google firebase push notifications. We want to send push notifications for websites using google push notifications and firebase is this possible? – Rams Jul 11 '16 at 12:35
You can start here: https://firebase.google.com/docs/cloud-messaging/chrome/client – Arthur Thompson Jul 12 '16 at 22:38
FCM supports Chrome: 50+ Firefox: 44+ Opera Mobile: 37+ https://firebase.google.com/docs/cloud-messaging/js/client – Buddhi Nov 05 '16 at 13:21
Hi, i've done a web app on Android, Chrome and I'm able to get the notifications. Is it possible to use the same implementation for Safari, iOS? Or would code changes be required? – PotatoJam Aug 07 '17 at 12:20
You're deeply confused. "Firebase database" has nothing whatsoever to do with any of this. – Mar 08 '18 at 17:44

score 3 · Answer 3 · answered Oct 11 '16 at 04:58

You can also use Firebase Cloud Messaging for web with Jquery like:

 $("#button").click(function(){

   var json = {
     "to": "dBbB2BFT-VY:APA91bHrvgfXbZa-K5eg9vVdUkIsHbMCwHRVc8dBAvoH_3ZxxxxxVVeMXP7Bm0iera5s37ChHmAVh29P8aAVa8HF0I0goZKPYdGT6lNl4MXN0na7xbmvF25c4ZLl0JkCDm_saXb51Vrte",
     "notification": {
       "title": "Push enviado com JQuery",
       "body": "Corpo de mensagem web!"
     },
     "data": {
       "titulo": "Título da mensagem de dados!",
       "descricao": "Corpo dos dados..."
     }
   };

   $.ajax({
    url: 'https://fcm.googleapis.com/fcm/send',
    type: "POST",
    processData : false,
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.setRequestHeader('Authorization', 'key=AIzaSyBShxxxxXevRq0trDbA9mhnY_2jqMoeChA');
    },
    data: JSON.stringify(json),
    success: function () {
      console.log("Mensagem enviada com sucesso!");
    },
    error: function(error) {
      console.log(error);
    }
  });
});

According to firebase documentation "Do not ever send this type of request from the client, because of the sensitivity of the server key." — g bas, Nov 04 '17 at 00:32

score 0 · Answer 4 · answered Oct 10 '20 at 08:48

0

You can see it here: https://github.com/ShaheerDev/RealtimeWebChatApp (I have used authentication to log the user in and realtime-database to get and send messages to database. It also updates in realtime)

answered Oct 10 '20 at 08:48

ShaheerDevOps

51
1
1
7

Firebase Cloud Messaging for web

4 Answers4