Where Do I Upload Apn Certificates for Firebase
Using Push Notifications with Firebase in an Ionic + Angular App
Web Framework : Athwart Platforms : iOS, Android
One of the nigh common features provided by application developers to their users is push button notifications. In this tutorial, we'll walk through all the steps needed to get Firebase Cloud Messaging working on iOS and Android.
For the purposes of registering and monitoring for push notifications from Firebase, we'll make utilise of the Push Notification API for Capacitor in an Ionic + Angular application.
Required Dependencies
Building and deploying iOS and Android applications using Capacitor requires a bit of setup. Please follow the instructions to install the necessary Capacitor dependencies here before standing.
To exam button notifications on iOS, Apple requires that you lot have a paid Apple Programmer business relationship and a concrete iOS device.
If y'all are running into issues or your panel throws warnings nearly outdated or deprecated packages, brand 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 certain they're using the latest versions.
Prepare an Ionic Capacitor App
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:
npm install -g @ionic/cli Side by side, let's utilize the CLI to create a new Ionic Athwart app based on the blank starter project and call information technology capApp :
ionic offset capApp blank --type = angular On the prompt asking to integrate your new app with Capacitor, type y and press enter. That will add Capacitor and the Capacitor CLI to our new awarding.
One time the awarding has been created successfully, switch to the newly created project directory:
cd capApp/ Stop up by running npx cap init , which volition allow us to make full out our app information.
npx cap init ? App name: CapApp ? App Package ID: com.mydomain.myappname Edifice the App & Adding Platforms
Before adding any native platforms to this project, the app must exist built at least once. A web build creates the web assets directory that Capacitor needs ( www binder in Ionic Athwart projects).
ionic build Next, let'southward add together the iOS and Android platforms to our app.
npx cap add ios npx cap add together android Upon running these commands, both android and ios folders at the root of the project are created. These are entirely separate native project artifacts that should be considered function of your Ionic app (i.e., check them into source command).
Using the Capacitor Push Notification API
First of all, we need to install the Capacitor Push button Notifications Plugin
npm install @capacitor/push button-notifications npx cap sync And so, before nosotros go to Firebase, we'll need to ensure that our awarding can register for push notifications by making utilize of the Capacitor Push Notification API. We'll also add together an alert (you lot could apply panel.log statements instead) to show usa the payload for a notification when it arrives and the app is open up on our device.
In your app, caput to the home.folio.ts file and add together an import statement and a const to brand use of the Capacitor Push API:
import { ActionPerformed , PushNotificationSchema , PushNotifications , Token , } from '@capacitor/push-notifications' ; Then, add the ngOnInit() method with some API methods to annals and monitor for push notifications. We will besides add an alert() a few of the events to monitor what is happening:
consign class HomePage implements OnInit { ngOnInit ( ) { console . log ( 'Initializing HomePage' ) ; // Request permission to employ push notifications // iOS will prompt user and return if they granted permission or not // Android volition only grant without prompting PushNotifications . requestPermissions ( ) . then ( result => { if ( upshot . receive === 'granted' ) { // Annals with Apple / Google to receive push button via APNS/FCM PushNotifications . annals ( ) ; } else { // Testify some error } } ) ; // On success, nosotros should be able to receive notifications PushNotifications . addListener ( 'registration' , ( token : Token ) => { alert ( 'Push registration success, token: ' + token . value ) ; } ) ; // Some issue with our setup and push volition not work PushNotifications . addListener ( 'registrationError' , ( fault : whatever ) => { warning ( 'Error on registration: ' + JSON . stringify ( fault ) ) ; } ) ; // Show us the notification payload if the app is open up on our device PushNotifications . addListener ( 'pushNotificationReceived' , ( notification : PushNotificationSchema ) => { warning ( 'Push received: ' + JSON . stringify ( notification ) ) ; } ) ; // Method called when tapping on a notification PushNotifications . addListener ( 'pushNotificationActionPerformed' , ( notification : ActionPerformed ) => { alert ( 'Push button action performed: ' + JSON . stringify ( notification ) ) ; } ) ; } Hither is the full implementation of abode.page.ts :
import { Component , OnInit } from '@athwart/core' ; import { ActionPerformed , PushNotificationSchema , PushNotifications , Token , } from '@capacitor/button-notifications' ; @ Component ( { selector : 'app-home' , templateUrl : 'home.folio.html' , styleUrls : [ 'home.page.scss' ] , } ) export form HomePage implements OnInit { ngOnInit ( ) { console . log ( 'Initializing HomePage' ) ; // Request permission to use push notifications // iOS volition prompt user and render if they granted permission or not // Android will only grant without prompting PushNotifications . requestPermissions ( ) . then ( upshot => { if ( result . receive === 'granted' ) { // Register with Apple / Google to receive push via APNS/FCM PushNotifications . annals ( ) ; } else { // Show some mistake } } ) ; PushNotifications . addListener ( 'registration' , ( token : Token ) => { alert ( 'Button registration success, token: ' + token . value ) ; } ) ; PushNotifications . addListener ( 'registrationError' , ( error : any ) => { alarm ( 'Fault on registration: ' + JSON . stringify ( error ) ) ; } ) ; PushNotifications . addListener ( 'pushNotificationReceived' , ( notification : PushNotificationSchema ) => { warning ( 'Push received: ' + JSON . stringify ( notification ) ) ; } , ) ; PushNotifications . addListener ( 'pushNotificationActionPerformed' , ( notification : ActionPerformed ) => { alert ( 'Push activity performed: ' + JSON . stringify ( notification ) ) ; } , ) ; } } After this, you'll want to generate a new build and let Capacitor know most the changes. You tin can do that with:
ionic build npx cap copy Creating a Project for your App on Firebase
Earlier we can connect Firebase Cloud Messaging to your application and send push notifications, you'll demand to start a project in Firebase.
Go to the Firebase Console and click the Add project button.
Name the projection, accept the Firebase ToS and click Create projection to continue. A Project ID should be automatically generated for you lot.
Android
Integrating Firebase with the Android app
This department more-or-less mirrors the setting upwardly Firebase using the Firebase panel documentation . See beneath for specific Capacitor-related notes.
Go to the Project Overview page for your Firebase project and at the meridian, click on the Android icon to add together a new android application.
The next screen will inquire yous for some data about your application.
- Your Android package name should match the appId from your
capacitor.config.jsonfile - We used
com.mydomain.myappnamefor this Capacitor app ID, then that is what we'll utilize for this entry. - Nickname and Debug Signing Document are optional
And so click the Register app push.
Download and Employ the google-services.json file
The next prompt will ask you to download a google-services.json file. This file contains the information your Capacitor app needs to connect to Firebase from Android.
Download the google-services.json file to your local auto. Then move the file into your Capacitor Android project directory, specifically nether android/app/ .
We don't demand to add any dependencies to our project because Capacitor projects automatically include a version of firebase-messaging in it's build.gradle file.
iOS
Prerequisites
iOS push button notifications are significantly more complicated to set up up than Android. You must have a paid Apple Developer business relationship and take care of the following items prior to being able to examination button notifications with your iOS application:
- Setup the proper Evolution or Production certificates & provisioning profiles for your iOS awarding in the Apple tree Developer Portal
- Create an APNS document or central for either Evolution or Product in the Apple Developer Portal
- Ensure Push button Notification capabilities have been enabled in your application in Xcode
- Have a physical iOS device equally per the guidelines in the Environment Setup documentation
Integrating Firebase with our native iOS app
This part is very similar to the Android section in a higher place, with a few key differences.
Start, get to the Project Overview page for your Firebase project. If yous've been post-obit this guide, you'll already have an Android application listed at the pinnacle of the folio.
To add iOS to your Firebase projection, click the Add App button and select the iOS platform.
The adjacent screen volition ask you for some data about your application.
- Your iOS bundle ID should match the appId from your
capacitor.config.jsonfile - We used
com.mydomain.myappnamefor this Capacitor app ID, so that is what we'll use for this entry. - App Nickname and App Shop ID are optional
And so click the Annals app button.
Add together the GoogleService-Info.plist file to your iOS app
Note: This is not the aforementioned file used for your Android app.
Download the GoogleService-Info.plist provided to your local automobile.
You'll and so want to open Xcode…
npx cap open ios … and motility the .plist file into your Xcode projection equally instructed by Firebase, ensuring to add information technology to all targets.
Add together the Firebase SDK via CocoaPods
The Button Notification API on iOS makes use of CocoaPods - an iOS dependency direction arrangement - and we demand to tell CocoaPods to make use of Firebase.
To do this, we need to modify the Podfile , which tin be found in Xcode under Pods :
Nosotros need to add Firebase to the CocoaPods provided for our App target. To practise that, add pod Firebase/Messaging to your target 'App' section, similar so:
target 'App' do capacitor_pods # Add your Pods here pod 'Firebase/Messaging' # Add this line end Your Podfile should look something like this:
platform :ios , '12.0' use_frameworks ! # workaround to avoid Xcode caching of Pods that requires # Product -> Clean Build Folder afterward new Cordova plugins installed # Requires CocoaPods ane.6 or newer install ! 'cocoapods' , :disable_input_output_paths = > true def capacitor_pods # Automatic Capacitor Pod dependencies, do non delete pod 'Capacitor' , :path = > '../../node_modules/@capacitor/ios' pod 'CapacitorCordova' , :path = > '../../node_modules/@capacitor/ios' # Do not delete end target 'App' do capacitor_pods # Add together your Pods hither pod 'Firebase/Messaging' end Update the Projection
Now nosotros'll demand to ensure that our iOS projection is updated with the proper Firebase CocoaPod installed.
Note: This part tin take a while as CocoaPods needs to download all the appropriate files/dependencies.
npx cap update ios Add together Initialization Code
To connect to Firebase when your iOS app starts upward, yous need to add the post-obit to your AppDelegate.swift file.
First, add an import at the tiptop of the file:
import Firebase … and then add the configuration method for Firebase to initialization code to your AppDelegate.swift file, in the awarding(didFinishLaunchingWithOptions) method.
FirebaseApp . configure ( ) Then you need to add the following two methods to correctly handle the push registration events:
func application ( _ awarding : UIApplication , didRegisterForRemoteNotificationsWithDeviceToken deviceToken : Data ) { Messaging . messaging ( ) . apnsToken = deviceToken Messaging . messaging ( ) . token ( completion : { ( token , fault ) in if permit error = fault { NotificationCenter . default . post ( proper name : . capacitorDidFailToRegisterForRemoteNotifications , object : mistake ) } else if let token = token { NotificationCenter . default . mail ( name : . capacitorDidRegisterForRemoteNotifications , object : token ) } } ) } func awarding ( _ application : UIApplication , didFailToRegisterForRemoteNotificationsWithError error : Error ) { NotificationCenter . default . mail service ( name : . capacitorDidFailToRegisterForRemoteNotifications , object : fault ) } Your completed AppDelegate.swift file should look something like this:
import UIKit import Capacitor import Firebase @UIApplicationMain class AppDelegate : UIResponder , UIApplicationDelegate { var window : UIWindow ? func awarding ( _ application : UIApplication , didFinishLaunchingWithOptions launchOptions : [ UIApplication . LaunchOptionsKey : Whatever ] ? ) - > Bool { // Override point for customization after application launch. FirebaseApp . configure ( ) return true } func application ( _ awarding : UIApplication , didRegisterForRemoteNotificationsWithDeviceToken deviceToken : Information ) { Messaging . messaging ( ) . apnsToken = deviceToken Messaging . messaging ( ) . token ( completion : { ( token , fault ) in if let error = fault { NotificationCenter . default . post ( name : . capacitorDidFailToRegisterForRemoteNotifications , object : error ) } else if let token = token { NotificationCenter . default . post ( name : . capacitorDidRegisterForRemoteNotifications , object : token ) } } ) } func awarding ( _ awarding : UIApplication , didFailToRegisterForRemoteNotificationsWithError error : Fault ) { NotificationCenter . default . post ( name : . capacitorDidFailToRegisterForRemoteNotifications , object : error ) } Upload the APNS Certificate or Key to Firebase
If you followed the instructions from the first, you'll have created an Apple APNS Certificate or an APNS Auth Key in the Apple Programmer portal. You need to upload one of these to Firebase before Firebase can talk to APNS and send button notifications to your application.
To upload your certificate or auth key, from the Project Overview folio:
- Click on your iOS awarding and then the Settings gear icon.
- On the Settings page, click on the Deject Messaging tab.
- Under the iOS app configuration header, upload your Auth Key or Certificate(s) using the provided Upload button.
Sending a Exam Notification
At present for the fun part - let's verify that push notifications from Firebase are working on Android and iOS!
We need to burn up our application on Android or iOS so that our home.page.ts page tin register and receive notifications.
To open your Android project in Android Studio:
npx cap open up android To open your iOS project in Xcode:
npx cap open ios Once the projection is open, side-load the application on your device using the Run feature of either Android Studio or Xcode. The app should offset up on the home page.
Note: On iOS, you volition come across a popup asking you to allow notifications for your app - make sure you lot choose to Allow notifications !
If your app successfully registers and you followed the code higher up, you lot should see an alarm 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.
Next, select the New Notification push.
When creating the notification, you only need to specify the post-obit information:
- The text of the notification
- The title (Android simply, optional for iOS)
- The Target (either a user segment or topic; I recommend just targeting the iOS or Android app itself, see below)
- The Scheduling (leave this to "Now")
At that point, you can Review the notification you lot've put together and select Publish to send the notification out.
If you lot've setup your application correctly, you'll meet an alert pop up on your habitation screen with the push button notification you composed in Firebase. You can then tap on the notification and you should get an warning for the pushActionPerformed event, per our code above.
vosspliteruning1969.blogspot.com
Source: https://capacitorjs.com/docs/guides/push-notifications-firebase
0 Response to "Where Do I Upload Apn Certificates for Firebase"
Post a Comment