How to set up push notifications with Firebase

Your salon’s app always keeps your notices in its inbox. To make them also appear on the phone’s own screen — like a message from any other app — the app uses Firebase Cloud Messaging, Google’s free service for app notifications. You set it up once, with your own Firebase project. It costs nothing for a salon’s needs.

You need:

• a Google account for your salon (the one you use for your salon’s Google services is fine);
• your app’s identity: its Android package name and, for iPhones, its iOS bundle ID — the person who builds your app knows them (see The customer app);
• for iPhones only: your salon’s Apple Developer account.

The setup has four parts: create the project, add your Android app, add your iPhone app, and put the settings in place — on your website and in your app’s build.

1. Create your Firebase project #

1. Go to console.firebase.google.com and sign in with your salon’s Google account.
2. Choose Create a project (or Add project).
3. Give it your salon’s name, for example “Larkspur Salon App”. Firebase makes a project ID from it.
4. Google Analytics is not needed for notifications. You can switch it off.
5. Finish. Your project is on the free plan (Spark), which includes Cloud Messaging.

2. Add your Android app #

1. In your project, choose Add app and then the Android symbol.
2. Android package name: your app’s package name exactly as it is built, for example com.larkspursalon.app. It cannot be changed later.
3. A nickname is optional. The “SHA-1” fingerprint is not needed for notifications.
4. Choose Register app.
5. Firebase offers a file called google-services.json. Download it and keep it safe: you copy four values from it in part 4. You do not add the file to the app, and you can skip Firebase’s remaining steps (“Add Firebase SDK” and the rest) — your app already includes what it needs.

3. Add your iPhone app (only if you publish for iPhones) #

1. In your project, choose Add app and then the Apple symbol.
2. Apple bundle ID: your app’s bundle ID exactly as it is built.
3. Choose Register app. Firebase offers a file called GoogleService-Info.plist. Download it and keep it safe for part 4. You do not add it to the app.
4. iPhones deliver notifications through Apple. Firebase needs your APNs key for that:
   1. In your Apple Developer account, open Certificates, Identifiers & Profiles → Keys, and create a key with Apple Push Notifications service (APNs) ticked. Download the key file (it ends in .p8) — Apple lets you download it only once. Note its Key ID and your Team ID.
   2. In the Firebase console, open Project settings (the cog) → Cloud Messaging → Apple app configuration, and upload the key file with its Key ID and Team ID.
5. The person who builds your iPhone app switches on Push Notifications for the app in Xcode.

4. Put the settings in place #

On your website: the key that lets your site send #

Your website sends the notifications. It needs your project’s service account key — a private file that only your website keeps.

1. In the Firebase console, open Project settings → Service accounts.
2. Choose Generate new private key and confirm. A file ending in .json is downloaded. Treat it like a password: never e-mail it or share it.
3. On your website, open System → Push notifications (the app). As the owner you confirm your password first.
4. Send through: choose Firebase Cloud Messaging (your Firebase project).
5. Your Firebase project’s service account key (JSON): open the downloaded file in a text editor, copy everything in it, and paste it into the field.
6. Tick Enable Push notifications (the app) and choose Save settings. The site checks the key when you save it.

Saved keys stay hidden. Leave the field empty to keep the key you saved. If the key is ever exposed, delete it in Service accounts and generate a new one.

In your app’s build: where the app finds your project #

Your app is told about your project when it is built. Give the person who builds your app these values; they go into the app’s build settings (its production profile, see The customer app):

These four values are not secrets: they only name your project. The private key stays on your website.

The app’s build checks the values: one that is missing or not in Firebase’s form is refused with the setting’s name.

5. Check that it works #

1. Install the new build of your app on a phone and sign in as a client (your own test client account).
2. The app asks whether it may show notifications. Allow it.
3. Book a test appointment for yourself with a reminder due soon (Front desk → Reminders), or wait for a reminder of a real booking.
4. The reminder appears on the phone’s screen, and in the app’s inbox.
5. On your website, Messages lists the push as Sent.

If a phone shows no notification, look at Messages: a push listed as Failed says why. The inbox still has every notice.