diff --git a/site/docs-md/guides/push-notifications-firebase.md b/site/docs-md/guides/push-notifications-firebase.md index 11d5c55ab..d1f9910a7 100644 --- a/site/docs-md/guides/push-notifications-firebase.md +++ b/site/docs-md/guides/push-notifications-firebase.md @@ -4,11 +4,12 @@ description: Learn how to get Firebase Cloud Messaging working on iOS and Androi url: /docs/guides/push-notifications-firebase contributors: - bryplano + - javebratt --- # Using Push Notifications with Firebase in an Ionic + Angular App -**Web Framework**: Ionic 4 + Angular +**Web Framework**: Angular **Platforms**: iOS, Android One of the most common features provided by application developers to their users is push notifications. In this tutorial, we'll walk through all the steps needed to get [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) working on iOS and Android. @@ -21,16 +22,21 @@ Building and deploying iOS and Android applications using Capacitor requires a b To test push notifications on iOS, Apple requires that you have [a paid Apple Developer account](https://developer.apple.com/) and a *physical* iOS device. +If you are running into issues or your console throws warnings about outdated or deprecated packages, make sure that you're on the latest stable versions of Node, Android Studio, and Xcode. + +Also, we're using Firebase for push notifications, so if you're using other Cordova plugins that use the Firebase SDK make sure they're using the latest versions. + ## Prepare an Ionic Capacitor App -If you have an existing Ionic 4 app, skip this section. If not, let's create an Ionic app first. + +If you have an existing Ionic app, skip this section. If not, let's create an Ionic app first. In your preferred terminal, install the latest version of the Ionic CLI: ```bash -npm install -g ionic +npm install -g @ionic/cli ``` -Next, let's use the CLI to create a new Ionic 4 Angular app based on the **blank** starter project and call it **capApp**: +Next, let's use the CLI to create a new Ionic Angular app based on the **blank** starter project and call it **capApp**: ```bash ionic start capApp blank --type=angular @@ -105,28 +111,28 @@ ngOnInit() { }); // On success, we should be able to receive notifications - PushNotifications.addListener('registration', + PushNotifications.addListener('registration', (token: PushNotificationToken) => { alert('Push registration success, token: ' + token.value); } ); // Some issue with our setup and push will not work - PushNotifications.addListener('registrationError', + PushNotifications.addListener('registrationError', (error: any) => { alert('Error on registration: ' + JSON.stringify(error)); } ); // Show us the notification payload if the app is open on our device - PushNotifications.addListener('pushNotificationReceived', + PushNotifications.addListener('pushNotificationReceived', (notification: PushNotification) => { alert('Push received: ' + JSON.stringify(notification)); } ); // Method called when tapping on a notification - PushNotifications.addListener('pushNotificationActionPerformed', + PushNotifications.addListener('pushNotificationActionPerformed', (notification: PushNotificationActionPerformed) => { alert('Push action performed: ' + JSON.stringify(notification)); } @@ -170,25 +176,25 @@ export class HomePage implements OnInit { } }); - PushNotifications.addListener('registration', + PushNotifications.addListener('registration', (token: PushNotificationToken) => { alert('Push registration success, token: ' + token.value); } ); - PushNotifications.addListener('registrationError', + PushNotifications.addListener('registrationError', (error: any) => { alert('Error on registration: ' + JSON.stringify(error)); } ); - PushNotifications.addListener('pushNotificationReceived', + PushNotifications.addListener('pushNotificationReceived', (notification: PushNotification) => { alert('Push received: ' + JSON.stringify(notification)); } ); - PushNotifications.addListener('pushNotificationActionPerformed', + PushNotifications.addListener('pushNotificationActionPerformed', (notification: PushNotificationActionPerformed) => { alert('Push action performed: ' + JSON.stringify(notification)); } @@ -197,6 +203,13 @@ export class HomePage implements OnInit { } ``` +After this, you'll want to generate a new build and let Capacitor know about the changes. You can do that with: + +```bash +ionic build +npx cap copy +``` + ## Creating a Project for your App on Firebase Before we can connect Firebase Cloud Messaging to your application and send push notifications, you'll need to start a project in Firebase. @@ -211,7 +224,9 @@ Name the project, accept the Firebase ToS and click **Create project** to contin This section more-or-less mirrors the [setting up Firebase using the Firebase console documentation](https://firebase.google.com/docs/android/setup?authuser=0). See below for specific Capacitor-related notes. -Go to the Project Overview page for your Firebase project and, under the **Grow** section, click the **Cloud Messaging** option. At the top, click on the **Android** icon. +Go to the Project Overview page for your Firebase project and at the top, click on the **Android** icon to add a new android application. + +![Add new Android Application in Firebase Console](/assets/img/docs/guides/firebase-push-notifications/add-android-app.png) The next screen will ask you for some information about your application. @@ -270,7 +285,7 @@ You'll then want to open Xcode... npx cap open ios ``` -... and move the `.plist` file into your Xcode project as instructed by Firebase, ensuring to add it to all targets. +... and move the `.plist` file into your Xcode project as instructed by Firebase, ensuring to add it to all targets. ![Google Service Info Plist Location for iOS](/assets/img/docs/guides/firebase-push-notifications/google-plist-location-ios.png) @@ -307,7 +322,7 @@ def capacitor_pods # Automatic Capacitor Pod dependencies, do not delete pod 'Capacitor', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' - + # Do not delete end @@ -363,7 +378,9 @@ class AppDelegate: UIResponder, UIApplicationDelegate { return true } ``` + If you would like to recieve the firebase FCM token from iOS instead of the raw APNS token, you will need to also change your `AppDelegate.didRegisterForRemoteNotificationsWithDeviceToken` code to look like this: + ```swift func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { Messaging.messaging().apnsToken = deviceToken @@ -377,7 +394,6 @@ If you would like to recieve the firebase FCM token from iOS instead of the raw } ``` - ### Upload the APNS Certificate or Key to Firebase If you followed the instructions from the beginning, you'll have created an Apple APNS Certificate or an APNS Auth Key in the Apple Developer portal. You need to upload one of these to Firebase before Firebase can talk to APNS and send push notifications to your application. @@ -395,11 +411,13 @@ Now for the fun part - let's verify that push notifications from Firebase are wo We need to fire up our application on Android or iOS so that our `home.page.ts` page can register and receive notifications. To open your Android project in Android Studio: + ```bash npx cap open android ``` To open your iOS project in Xcode: + ```bash npx cap open ios ``` @@ -410,9 +428,9 @@ Once the project is open, side-load the application on your device using the Run If your app successfully registers and you followed the code above, you should see an alert with a success message! -Now we'll test to see if the notifications are received by our device. To send a notification, in Firebase, go to the **Cloud Messaging** section under the Grow header in the project pane. +Now we'll test to see if the notifications are received by our device. To send a notification, in Firebase, go to the **Cloud Messaging** section under the Grow header in the project pane. -Next, select the **New Notification** button. +Next, select the **New Notification** button. When creating the notification, you only need to specify the following information: diff --git a/site/src/assets/img/docs/guides/firebase-push-notifications/add-android-app.png b/site/src/assets/img/docs/guides/firebase-push-notifications/add-android-app.png new file mode 100644 index 000000000..d1f4b53d6 Binary files /dev/null and b/site/src/assets/img/docs/guides/firebase-push-notifications/add-android-app.png differ