We'll notify you when we have updates

Get in Touch

Leave your details and we’ll reach out. Enable notifications to get updates instantly.

Push notifications

Get notified when we reply or when there’s news. You can turn this off anytime.

Status: Not requested

Install as app

Add this site to your home screen to open it like an app.

How to add to home screen (mobile)
  • Android (Chrome): Tap menu (⋮) → Install app or Add to Home screen.
  • iPhone (Safari): Tap the Share button (□↑) → Add to Home Screen.

If you don’t see “Install app”, use the site over HTTPS (not HTTP).

This guide walks you through setting up Web Push notifications end-to-end with Firebase. Add your own screenshots in the screenshots/ folder (see filenames under each figure) to make the guide easier to follow.

1. Prerequisites

Before you start, ensure you have:

  • HTTPS or localhost — Browsers only allow push on secure origins. Use http://localhost for development or HTTPS in production.
  • Browser support — Chrome, Firefox, Edge, Safari (macOS/iOS 16.4+). Check caniuse.com/push-api.

2. Create a Firebase project

Go to the Firebase Console and create a project (or use an existing one). Then add a web app to get your config.

Firebase Console — Add project or select existing
Figure 1: Firebase Console — Add project or select existing. (Add your screenshot as screenshots/01-firebase-console.png)
  1. Open Firebase Console → Add project.
  2. In Project overview, click the Web icon (</>) to add a web app.
  3. Register the app (e.g. name it “Web Push”). Copy the firebaseConfig object (apiKey, authDomain, projectId, etc.).
Web app config — firebaseConfig object
Figure 2: Copy the firebaseConfig object. (Add screenshots/02-web-app-config.png)

3. Get the VAPID key (Web Push)

The VAPID key is used so your site can receive web push messages. Generate it in Firebase Cloud Messaging settings.

Cloud Messaging — Web Push certificates — VAPID key
Figure 3: Project settings → Cloud Messaging → Web Push certificates → Generate key pair. (Add screenshots/03-vapid-key.png)
  1. In Firebase Console: Project settings (gear) → Cloud Messaging.
  2. Under Web Push certificates, click Generate key pair (or copy the existing one).
  3. Copy the long key — this is your VAPID_KEY.

4. Configure this app

Copy .env.example to .env and fill in your Firebase and VAPID values. Then generate the config file used by the browser.

FIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=123456789
FIREBASE_APP_ID=1:123456789:web:abc123
VAPID_KEY=your_vapid_key

Run npm run generate-config to build firebase-config.js (or run npm start, which runs it automatically).

.env file and npm run generate-config
Figure 4: .env file and running generate-config. (Add screenshots/04-env-and-generate.png)

5. Service worker

This project uses firebase-messaging-sw.js in the site root. It must be served from the same origin as your page. The service worker handles background push when the tab is closed or in the background.

6. Request permission & get the FCM token

On your page, call Notification.requestPermission() to show the browser prompt. If the user allows, call messaging.getToken({ vapidKey }) to get the FCM token. Store this token on your backend (e.g. with the user’s email) to send targeted push later.

Enable notifications and FCM token on page
Figure 5: User allows notifications; FCM token appears. (Add screenshots/05-enable-notifications.png)

7. Send a notification

Option A — Firebase Console: Engage → Messaging → Create campaign → Firebase Notification messages. Compose and send to a segment or test token.

Firebase Messaging — Create campaign
Figure 6: Create a notification campaign in Firebase Console. (Add screenshots/06-firebase-messaging-campaign.png)

Option B — Your backend (FCM HTTP v1): Use Firebase Admin SDK or the FCM HTTP v1 API with a service account. Send the user’s FCM token and your notification payload.

// Example (Node with firebase-admin):
const message = {
  notification: { title: 'Hello', body: 'You have an update.' },
  token: userFcmToken
};
await admin.messaging().send(message);

8. Summary

End-to-end flow: Create Firebase project → Add web app + get config & VAPID key → Put them in .env and generate firebase-config.js → Serve the site over HTTPS/localhost → User allows notifications and gets FCM token → Your backend or Firebase Console sends push using that token.