cant send push notifications to web via SDK

[rmilejcz]

• Operating System version: macOS monterey 12.6
• Firebase SDK version: 4.8.0
• Library version: v4
• Firebase Product: messaging

When using the firebase SDK, push notifications that target devices on my web app are not received. Using the same information, I can successfully trigger push notifications to my web app from the google console.

Steps to reproduce:

FIrst you would need to setup a client to receive messages: https://firebase.google.com/docs/cloud-messaging/js/client

Add firebase to your server following these steps: https://firebase.google.com/docs/admin/setup

Make sure you are properly authenticated: https://firebase.google.com/docs/cloud-messaging/auth-server

Finally, follow these steps to send a message: https://firebase.google.com/docs/cloud-messaging/send-message

Relevant Code:

func NewServer(db *sqlx.DB) *Service {
    var app *firebase.App
    ctx := context.Background()
    cfg := map[string]string{
    "type": "service_account",
    "project_id": "kalos-services-push",
    "private_key_id": "<A PRIVATE KEY ID>",
    "private_key": "<A PRIVATE KEY>",
    "client_email": "kalos-services-push-new@kalos-services-push.iam.gserviceaccount.com",
    "client_id": "<CLIENT_ID>",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/kalos-services-push-new%40kalos-services-push.iam.gserviceaccount.com",
    }
    jsonBytes, err := json.Marshal(cfg)
    checkError(err)

    app, err = firebase.NewApp(
        ctx, 
    &firebase.Config{
        ProjectID: "kalos-services-push",
        DatabaseURL: "https://kalos-services-push.firebaseio.com",
    },
    option.WithCredentialsJSON(jsonBytes),
    )
    msg, err := app.Messaging(ctx)
    checkError(err)
    res, err := msg.Send(ctx, &messaging.Message{
    Notification: &messaging.Notification{Title: "a test title", Body: "a test body"},
    Token: "fkvEZ9vvDfWevtv2yAUw8F:APA91bHa_K_t99_OVn4u4J0uchwxjEtxRhBKtB6enBdrlSPZuHUTRC6gPYrsWKv9hUiXJQBblyhhKCAnOBwiAR3eOH_t7XjewRco8mUW0e4HJSwes0vGGm-h1URHbb-hAsUgkdKO6HZK",
    }
    log.Println("res: ", res) // "projects/kalos-services-push/messages/be6f7922-32ec-42e0-8ecd-9640adeef062"
    log.Println("err: ", err) // always nil
}

The result of the call is always projects/kalos-services-push/messages/be6f7922-32ec-42e0-8ecd-9640adeef062. When I use the exact same FCM registration token via the firebase console, the notification is delivered successfully. What did I miss?

[rmilejcz]

here is my service worker:

importScripts(
  'https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js',
);
importScripts(
  'https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js',
);

// Initialize the Firebase app in the service worker by passing the generated config
var firebaseConfig = {
  apiKey: '<APIKEY>',
  authDomain: 'kalos-services-push.firebaseapp.com',
  databaseURL: 'https://kalos-services-push.firebaseio.com',
  projectId: 'kalos-services-push',
  storageBucket: 'kalos-services-push.appspot.com',
  messagingSenderId: '493739388494',
  appId: '1:493739388494:web:a89c4a4ab2d05131381d1f',
};

var app = firebase.initializeApp(firebaseConfig);
var messaging = firebase.messaging(app);

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)
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.error(err);
    });
});

and here is the initialization of firebase in my webapp:

const firebaseConfig = {
  apiKey: '<APIKEY>',
  authDomain: 'kalos-services-push.firebaseapp.com',
  databaseURL: 'https://kalos-services-push.firebaseio.com',
  projectId: 'kalos-services-push',
  storageBucket: 'kalos-services-push.appspot.com',
  messagingSenderId: '493739388494',
  appId: '1:493739388494:web:a89c4a4ab2d05131381d1f',
};

const registration = await registerServiceWorker(
  'app/assets/js/firebase-messaging-sw.js',
);

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

onMessage(messaging, payload => {
  console.log('recieved message: ', payload);
});

[lahirumaramba]

Hi @rmilejcz do you get any errors from the messaging API?

Hey @chong-shao any thoughts on what could be wrong here? Thanks! Could also be related to: #506

[rmilejcz]

Hi thanks for your response, I do not receive any error, the return value for the error is always nil. Also unfortunately I have tested with chrome, firefox, and safari, and I am unable to receive web push on any of them.

Also the notifications show as sent within my firebase console, though I still do not receive them on the web app. I have tried with both the web app in the foreground and the background.

[rmilejcz]

Hi I was able to solve the issue by using specifying some Webpush properties, specifically TTL and Urgency:

&messaging.Message{
    Notification: &messaging.Notification{Title: "title", Body: "body"},
    Token: "FCM TOKEN",
    Webpush: &messaging.WebpushConfig{
        Headers: map[string]string{"Urgency":"high", "TTL": "4500"},
},

Thank you so much for your time, I hope this helps someone in the future.