# Challenge

## Cloud Messaging

## Find the repo

We'll be working on a branch of our [firelist-react](https://github.com/how-to-firebase/firelist-react) repo named [firebase-messaging](https://github.com/how-to-firebase/firelist-react/tree/master).

## Localhost installation

Pull [the repo](https://github.com/how-to-firebase/firelist-react) directly from GitHub...

```
git clone https://github.com/how-to-firebase/firelist-react.git
cd firelist-react
git checkout firebase-messaging
```

Once you're on the branch, make sure to run `yarn` or `npm install` to get your Node.js dependencies.

Then run `yarn start` or `npm run start` to spin up the development server.

```
yarn
yarn start
```

## Complete the challenge

We'll be editing `./src/components/messaging.js` and `./public/sw.js`.

Read the comments and complete the steps in those two files.

## Notes on sw\.js vs firebase-messaging-sw\.js

Firebase Messaging recommends calling your file [firebase-messaging-sw.js](https://firebase.google.com/docs/cloud-messaging/js/receive).

This is fine as long as you don't care about running your app as a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) or PWA.

However! We believe that all apps should be PWAs, so we've configured this project to use the standard `sw.js` filename.

You'll notice a function in `./src/components/messaging.js` named `registerServiceWorker`

```
async function registerServiceWorker(messaging) {
  if ('serviceWorker' in navigator) {
    const registration = await navigator.serviceWorker.register('/sw.js');
    messaging.useServiceWorker(registration);
  }
}
```

This function is will register `/sw.js` and then, once that's done, tell messaging to use `/sw.js` instead of `firebase-messaging-sw.js`.

You can only have one service worker per page. This doesn't work any other way. Trust us. We've tried.

Yes, you can add all of the service worker functionality that you like into `firebase-messaging-sw.js` and let Firebase Messaging register that file automatically.

However, this automatic registration will not allow your users to install your app to their homescreen as a PWA... which totally defeats the purpose of a PWA.

Hence our insistence on using `/sw.js`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.fullstackfirebase.com/cloud-messaging/challenge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.