Challenge

Cloud Messaging
Find the repo
We'll be working on a branch of our firelist-react repo named firebase-messaging.
Localhost installation
Pull the repo 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.
This is fine as long as you don't care about running your app as a Progressive Web App 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.

Cloud Messaging - Previous

Walkthrough

Next - Cloud Messaging

Notes

Last modified 4yr ago

Copy link

On this page

Cloud Messaging

Find the repo

Localhost installation

Complete the challenge

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