Challenge
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
We'll be editing
./src/components/messaging.js
and ./public/sw.js
.Read the comments and complete the steps in those two files.
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
.Last modified 5yr ago