Push notification setup

Google Firebase Services setup
Obtain APNs for iOS setup
Android setup
iOS setup
Provide credentials
Push notification icon on Android

Google Firebase Services setup

These are non-secret keys to link our app to the Firebase Cloud Messaging app instance.

Create a Firebase account
Create a project with apps (iOS + Android) in Firebase Console
- iOS
  There is a 5 step process,
  1. “Register App”: use your app bundle id, for example “interkit.app.starter”
  2. “Download config file”: download the file and put it in ios/App/App/GoogleService-Info.plist (might have to add it via XCode), but do not change any code yet.
  3. “Add Firebase SDK”: Choose version 7.11.0. You only need to add “FirebaseMessaging”
  4. “Add initialisation code”: Skip this step! Do iOS setup below instead
- android
  1. Upon creation, you are prompted to download the credential file google-services.json – place it in fooproject/android/app/
    (A default file for the starter project is already there, overwrite it. It has to sit there, otherwise the empty app won’t run, even when push notifications aren’t used.)

Obtain APNs for iOS setup

Go to your Apple Developer Account
Generate an APNs key (Apple Push Notification service) there (https://developer.apple.com/account/resources/authkeys/list) Note: A maximum of 2 keys are allowed per Apple Developer Account.
Plug it into Firebase Console

Android setup

Push and Firebase are enabled by default.

iOS setup

fooproject/ios/App/App/AppDelegate.swift, following the Capacitor docs for v2, add

important: do not follow the sdk guide that is on the firebase cosole!

// ...
import FirebaseCore
import FirebaseInstanceID
import FirebaseMessaging

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  // ...
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure()
    return true
  }
  // ...
  func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
      Messaging.messaging().apnsToken = deviceToken
      InstanceID.instanceID().instanceID { (result, error) in
          if let error = error {
              NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error)
          } else if let result = result {
              NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: result.token)
          }
      }
  }
}

Add “Push Notifications” capability

Provide credentials

These are private keys to be kept secret, get them from Firebase Console (Project settings › Service accounts › Firebase Admin SDK › Generate new private key -> it’s ~2k of cert looking JSON). Provide them to the app:

via Database Sheet: in a sheet named config, with columns “key” and “value” (you just need to name the columns, the key can stay a uuid), create a row with a special key firebaseAdminCredentials, paste the JSON in value.
if this sheet does not exist, we check if a JSON file is present
1. in a path provided by .env var FCM_CREDENTIALS_PATH, file name PROJECTID_firebase-admin.json, if not there, then we try
2. in the project folder (found via .env REPOSITORIES_PATH), file name firebase-admin.json.

Push notification icon on Android

(Not supported on iOS, it just uses the launcher icon)

Create a white-on-transparent (with alpha) icon.
The mipmap/intermediates will be 24/36/48/72/96 pixels, named mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi.
Beware with pixel art!
To create the intermediates and place the files in the correct folders, you can use Android Asset Studio:
- open Android Studio, go to (the default) “Android view”. You should see the project file tree on the left
- find app/res, right click, Create New › Image Asset
- Follow the wizard.
  Don’t use dash/minus in the filename, underscores are ok.
  This tool will apparently scale every image, even if it is redundant/unnecessary. Do it manually to avoid aliasing artifacts.
android/app/src/main/res/drawable-[mhx]+dpi/our_icon_name.png will be created. Overwrite them (or create them manually at the correct dimensions in the first place).
There is also an online tool: romannurik.github.io/AndroidAssetStudio/.
Link the resource: edit android/app/src/main/AndroidManifest.xml, to the <application> node add this child node:
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/our_icon_name" />
npx cap sync android
Compile, run, debug… done.
With more effort, full-color (over white-on-transparent) might be possible, or just re-coloring/hue-ing the white icon. Consider
Firebase Docs
this Stack Overflow Q

Interkit docs