Firebase offers a messaging service called Firebase Cloud Messaging (FCM), which allows us to send push notifications to users' browsers and devices. In this article, we will explore some interesting FAQs about Firebase Push Notifications, specifically for the frontend implementation.

✅ Main Steps

Here are the main steps to integrate FCM into a web application on the client side.

1. Go to Firebase Console and get keys required for Cloud Messaging.

2. Follow the Set up a JavaScript FCM client app to implement the basic setup of fetching FCM tokens.

3. To handle receiving push notification, we need to create service worker. Firebase auto-picks the service worker if we name it firebase-messaging-sw.js so create it in public folder which can be directly accessed.

   1. Sample GitHub link for Quick Start

   2. The quick start uses the Firebase library in the service worker, but we can handle events directly without it, as shown below. There are some differences, such as the Firebase library in the service worker supporting analytics out of the box if enabled, and it can handle both background and foreground messages.

       // firebase-messaging-sw.js
       // Custom events instead of using firebase library
       addEventListener("push", (event) => {});
       addEventListener("notificationclick", (event) => {});
       addEventListener("notificationclose", (event) => {});
       // ...
      

   3. The service worker is a public and independent file. If you're implementing push notifications for the first time, take some extra time to research what best fits your use case.

   4. If you want to add service worker file with TypeScript, scroll down to below sections.

4. We’re done. See FAQs below to explore more about it.

🌟 FAQs

Why can’t I receive the push notification when I am active on website, it sends when it’s inactive or opened in background?

If you’ve used firebase functions inside the service worker file, then it has the function onBackgroundMessage which gets called for inactive tabs only. You will need to handle foreground messages with onMessage within your website.

Can iOS devices support push notification triggered from website?

Not directly from the browser, but if the website is added to the home screen as a Progressive Web App (PWA), then it's possible. So, you will need to guide your users to install PWA to have the support of web push notifications on iOS.

Can push notifications be received in background if user has the browser open but not the website?

Yes, push notifications can still be received even if the user doesn't have the site open, as long as their browser is active or running in the background on mobile devices. With the help of a service worker, we can send notifications to users who have granted permission for our site. The service worker runs in the background, allowing notifications to be delivered independently of the site being open.

When should we remove FCM token from browser and database?

This behavior depends on the web app’s implementation and architecture. If a user logs out of the website, it’s a best practice to unregister the notification token on the backend server to prevent further notifications. Optionally, the token can also be removed from the browser; however, Firebase Cloud Messaging (FCM) will regenerate the token if it’s over a week old. FCM stores this token in IndexedDB, so repeated requests for the token will return the same value unless it has expired or been invalidated.

Why do all my push notifications arrive at once when I open my browser?

We can set a TTL (Time to Live) for push notifications when sending them from the server. This TTL specifies an expiration time, ensuring that if the notification isn’t delivered to any of the user’s devices within that period, it will automatically expire and won’t be sent.

How can I implement service worker with TypeScript?

There is a good article available, and I've attached the link below.

https://joshuatz.com/posts/2021/strongly-typed-service-workers/

However, please note that some properties, like timestamp and image, are not available in the type auto-completion of showNotifications because they are still experimental.

With TypeScript, you'll write code in .ts files, which need to be transpiled into .js files during the build process. This can be efficiently done using modern tools like Vite, which handles both TypeScript transpilation and bundling. The generated JavaScript file should have a fixed name (firebase-messaging-sw.js) without hashes and root publicly accessible location, as it needs to be accessible from URL. If you want to have different file name then you will need to manually provide it to registration field when initializing firebase.

Can service worker access values from cookies and local storage?

No, it can’t access cookies, local storage or session storage. However, service worker can access indexedDB of browser.

“Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker”

There is one GitHub issue on this error. The quick fix as mentioned there would be to retry 3 times. Alternatively, we can also listen and wait for the status changes of service worker until it gets activated.

https://github.com/firebase/firebase-js-sdk/issues/7575

Browser compatibility errors

• “Registration failed - push service error”

  • This error might occur for different reasons but one reason could be the browser like Brave which doesn't support Google services for push messaging by default and this error happens on triggering getToken of Firebase. firebase-js-sdk/issues/3195

• “Messaging: A problem occurred while subscribing the user to FCM: Request contains an invalid argument. (messaging/token-subscribe-failed).”

  • This error is mostly occurred from Safari browser. This GitHub issue might help: firebase-js-sdk/issues/8356

🎁 Bonus

There is a great push notification generator tool available:

• https://tests.peter.sh/notification-generator

You can understand how notifications behave with different settings with different browser and operating systems.

🔗 Useful links

• https://firebase.google.com/docs/cloud-messaging

• https://firebase.google.com/docs/reference/js/messaging_