---
title: "Step 1: Configuration Firebase and Service Worker"
slug: "step-1-configuration-firebase-and-service-worker"
updated: 2024-03-18T12:15:05Z
published: 2024-03-18T12:15:05Z
canonical: "docs.mapp.com/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 tab are not in focus.

1. Download the JavaScript file [firebase-messaging-sw.js](/v1/docs/technical-requirements-and-download).
2. Create the Webapp-Project in Firebase and copy the configuration.
3. In the JavaScript file "firebase-messaging-sw.js" 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>>"
};

/* ... */
```

| Parameter | Description |
| --- | --- |
| apiKey | Please include as specified in your firebase console in *project settings > general > my app > configuration*. |
| authDomain |
| projectId |
| storageBucket |
| messagingSenderId |
| appId |
| measurementId |

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" on your server.