⚠️ IMPORTANT PREREQUISITE: THE SERVICE WORKER For Firebase to function, you MUST host a file in the root directory of your application.

Create a text file named exactly firebase-messaging-sw.js.

Paste the Firebase initialization code into this file (available in the Firebase documentation > Web).

Go to your Bubble application > Settings > SEO / Metatags.

In the "Hosting files in the root directory" section, upload this file with the exact name firebase-messaging-sw.js.

STEP 1: REGISTER THE USER TOKEN (Client)

Place the "FCM Listener" visual element on your page.

Fill in your project's API keys (available in your Firebase console > Project Settings > General). Don't forget the Vapid Key (Web Push Certificate).

Create a workflow (e.g., on button click) and use the element's action: "Request Permission".

Create a page event: "When FCM Listener Token Received". Within this event, use the action "Make changes to Current User" to save the retrieved token to a list of texts in your database (e.g., List_Tokens add FCM Listener's Token).

STEP 2: SEND A NOTIFICATION (Server)

Go to the Plugins tab of your workflows (or to your Backend Workflows).

Select the "Send Push Notification" action.

Paste the complete content of your Firebase service account JSON file (generated in the Firebase console > Service Accounts).

Fill in your project ID, the target device token, the title, and the message.

(Optional) Add the absolute URL of an image for the icon and a redirect link on click.

In return (Result of Step X), the plugin will return Success (yes/no) and Is Dead Token (yes/no) to allow you to delete the old tokens from your database.