---
title: "Step 1: Configuration Firebase and Service Worker"
slug: "web-push-step-1-configuration-firebase-and-service-worker"
updated: 2025-01-24T10:00:06Z
published: 2025-01-24T10:00:06Z
canonical: "docs.mapp.com/web-push-step-1-configuration-firebase-and-service-worker"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Step 1: Configuration Firebase and Service Worker

Web Push at Mapp is based on Firebase.

The Service Worker is necessary to display messages when the browser or a tab are not in focus.

1. Download the JavaScript file [firebase-messaging-sw.js](/v1/docs/web-push-technical-requirements-and-download).
2. Create the Webapp-Project in Firebase and copy the configuration.
3. In the JavaScript file make the following adjustments by pasting the configuration: **Example**

```javascript
/* ... */

const firebaseConfig = {
	apiKey: "<<Firebase apiKey>>",
	authDomain: "<<Firebase authDomain>>",
	projectId: "<<Firebase projectId>>",
	storageBucket: "<<Firebase storageBucket>>",
	messagingSenderId: "<<Firebase messagingSenderId>>",
	appId: "<<Firebase appId>>",
	measurementId: "<<Firebase measurementId>>" // Optional
};

/* ... */
```

| Parameter | Description |
| --- | --- |
| apiKey | Please include as specified in your Firebase console in *project settings > general > my app > configuration*. |
| authDomain |
| projectId |
| storageBucket |
| messagingSenderId |
| appId |
| measurementId | *(Optional)* Include only if you use Google Analytics in your Firebase setup. |

Watch the following video for more details:

[webpush1](https://player.vimeo.com/video/637767117?h=038e4af0d9&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479)
4. Include the script file "firebase-messaging-sw.js" in your server.