Skip to content

[Feature] Setup firebase cloud messaging(FCM) push notification in IOS

Hiếu edited this page Apr 29, 2020 · 2 revisions

Setup FCM push notification in IOS

Note: if you build and have an error and cannot push notifications in the background and the log returns on Xcode ``Can't end BackgroundTask ... '' then you may be experiencing errors with iOS versions smaller than version 13.4 and Xcode from version 11. You can view this error at https://forums.developer.apple.com/thread/121990 **Until iOS 13.4, this problem was fixed.

For now, let's start the setup ...

**

  • Create Project in Console.Firebase.

  • Open your firebase project console, click the gear icon in the upper left corner and select Project setting

  • Select the IOS icon in the Your apps section

  • Fill in the information with:

    • IOS bundle Id: is bundle ID taken from your application. You can find them by going to project flutter, searching for keyword PRODUCT_BUNDLE_IDENTIFIER in file ios/Runner.xcodeproj/project.pbxproj
    • Enter app nick name (the name here is only used to distinguish between applications on firebase so you can set arbitrary).
    • App Store ID you can omit this parameter.
  • Click Register app

  • Click on the buttont Download GoogleService-info.plist to download the file.

  • Copy it to the ios directory of your project. If the GoogleService-info.plist file already exists, delete the old file and copy the new file.

  • Click Next

  • This step is already installed in FluxStore source, click Next to continue

  • This step is already included in the FluxStore source, but it seems to be obsolete.

  • You can fix it by removing some unnecessary code. The result will look like this

    import UIKit
    import Flutter
    import GoogleMaps
    import Firebase
    @UIApplicationMain
    @objc class AppDelegate: FlutterAppDelegate {
      override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        if #available(iOS 10.0, *) {
          UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
        }   
        GMSServices.provideAPIKey("your-google-api-key-here")
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      }
    }
  • click Next to continue

  • Next press Skip the step

Complete the process of creating an IOS application on firebase. Next, install Cloud Messaging to be able to push notifications on iOS. Click Cloud Messaging as shown:

Installing Cloud Messaging requires you to upload the auth key APNs here.

To get this key, you must have an apple developer account. Visit page https://developer.apple.com select Account as shown:

  • Then choose Certificates, identifiers & Profiles

  • Select Keys in the menu on the left

  • Click the plus icon to add a new key

Note: 1 developer apple account can only create 2 keys, please consider before creating. But you can still delete them if needed.

  • Enter the key name and select Apple Push Notification service (APNs) then click continue

  • Click Register

  • Click Download to download the APNs key file

  • Return to the firebase console to update the APNs auth key. Click Upload

  • Select the downloaded key

  • The key ID is the back part of the downloaded key file name

  • Enter Team ID, if you do not know where Team ID is coming from, please click on the question mark as shown in the picture, then click on the membership tab

  • This is Team ID, copy it and enter the form in firebase.

  • Click Upload

  • In some cases this error will be displayed (in some cases it will not be). If this is the case, please click Upload again

  • If the following screen appears, congratulations, you have successfully configured.

  • Now go back to project flutter and continue the installation. Open the file Runner.xcworkspace with Xcode

  • Show Runner folder out, you will see the GoogleService-info.plist file just now.

  • Click on Folder Runner again, select the Signing & Capabilities tab. In the background mode, check the two options of Background fetch and Remote notification have been checked, if not please check these two options.

  • Next, click on Capability, find Push Notifications, then double click to select

  • Okay, done. Now turn off Xcode and run the command flutter run

  • If the app is running for the first time, the app will ask for permission to receive your notifications, please click Allow

  • Ok, continue the steps to enter the app. Then turn off the app and reopen firebase to check again.

  • Drag the left menu to the bottom, in the Grow section will have Cloud Messaging. Click Cloud Messaging

  • Click Send your first message

  • Create a new messenger, fill in the messenger information and click next.

In step 2, select the application you want to send, here select the IOS application that was configured in firebase before

  • Click Next

  • The remaining steps can be ignored, continue to click Review

  • click publish

  • Okay, go back to the app and check if it works.