Notifications
Including Push Notifications is straightforward but requires a little bit of setup outside of your project folder. For Apple devices, you'll have to create a key in you developper account and modify the Info.plist file. For Android devices you'll simply have to modify the build.gradle file.
Dependencies
To include push notifications in your app, it needs to have firebase enabled as we use firebase messaging for it.
IOS Setup
Get an APNs Key
Go to you apple developper account. You'll need to be enrolled in a Apple Developer Program to continue. Go to the your keys under the Certificates, Identifiers & Profiles section.
Create a key and select Apple Push Notification service (APNs). Continue and download your key file (.p8). Stay on that page because you'll need to copy the Key Id in Firebase.
In your Firebase Console, go to the Settings/Cloud Messaging tab. There you'll be able to upload you p8 file, enter the Key Id and mention your Apple Developper Team Id.
If when you try to download you key file, you are redirected to a page that says something like this :
Auth key can only be downloaded once.
You are the victim of a rational bug. It is due to browser optimisation. Most browsers have a feature that preloads links that are hovered. So at the moment you put your mouse on the download button, the link it maps to get preloaded in your browser, and when you actually click on it, from their side it appears that you already clicked on it.
To overcome that issue, you can navigate on the screen using your keyboard. Press multiple times the tab key to navigate to the button and press enter.
You will need to create a key for the APNs service. Here is a gif to show how to do :
Modify the Info.plist file
Add this to your Info.plist file. This will allow the app to receive notifications when it is in the background or when it is not running.
<key>UIBackgroundModes</key>
<array>
<string>fetch</string>
<string>remote-notification</string>
</array>
MacOS
Modify Info.plist file
<key>NSUserNotificationAlertStyle</key>
<string>banner</string>
Android Setup
Setting up notifications for Android is more straightforward. You simply have to update the minSdkVersion to at least 19 in the android/app/build.gradle file.
To gain a more comprehensive understanding of the setup, consider going through this detailed tutorial provided by Firebase.
Codika Doctor
How Does It Work?
Notifications operate on the principle of device tokens. Each app instance installed on a device is assigned a unique device token. This token allows servers to target specific app instances with notifications. Typically, notifications are triggered from backend servers.
It is important to dissociate the notifications that users will receive on their device (the popup at the top of the screen, or when the screen is locked) from the in-app notifications that users will see in the application. Just like you would go on your notification center in Facebook where you can see your new notifications and click on them. There is by default no link between those two types of notifications. The in-app notifications are handled by the application itself, and the device notifications are handled by the device. The Codika Notification Block fills this gap by providing a way to link the two types of notifications.
Let's illustrate the logic with a concrete example, a voucher system. Suppose a user wants to get a refund for an article.
The user writes his request to a specific document in Firestore. This docuemnt write triggers a cloud function that will create the voucher for the user. Now we need to notify the user that a new voucher has been created.
There are two ways we could handle this. Either we send a notification to the user directly from the cloud function that created the voucher. Or we handle the sending of that notification in a separate cloud function. The second scenario is prefered for several reasons.
function to the user, but instead we will write a notification request to the notifications collection of the user. This will trigger the cloud function that will send the device notification to the user. We do that instead because we want to avoid any possibility of incoherence between the mobile notifications the user receives and the actual notifications he can see in the app.
We don't want to have a situation where a phone gets a notificaiton, and when the user enters the application, there is no new notification in the app.
Widgets
Cloud Functions
Details
The Notifications brick comes with a predefined set of notification types that can be used out of the box. However, it is possible to add custom notification types to the brick. This requires to modify the code at several places. We will go through the process step by step.
Frist of all let's understand what a notification type is. A notification type is a notificatioin where the user can click on it and be redirected to a specific page in the application. For example, when a user receives a new message, he can click on the notification and be redirected. When the user receives a new voucher, he can click on the notification and be redirected to the voucher page. Each of those notifications are different types of notifications. Types can however encapsulate different messages. Like for example to promotion type. Users will receive a 20% discount on their next purchas or 10 euros off their their next purchase. Those two messages are different but they are both of the same type: promotion. So start by clearly defining the different types of notifications you want to have in your application.
Step 1 : Add a notification type
First let's add the types you need in the NotificationTypeEnum object. In the file : lib/C-Domain/plugins/notifications/adts/value_objects.dart. Doing so will produce a compilation error in the same file, that should be fixed by adding the string description and a custom icon for each new notification type.
Step 2 : Create the notification payload
Every notification type can carry a differnt payload. The payload is simply a map with string keys that contains additional information related to the notification type. The voucher received notification for example contains the voucher id and the voucher amount. This payload can be created in the following file : lib/D-Infrastructure/plugins/notifications/dtos/payload_dtos.dart. Copy the payload of an existing notification type and modify it to fit the needs of the new notification type.
Step 3 : Add the logic for the notification type
Now that we have added the notification type, we need to add the logic for it. This is done in the file : lib/D-Infrastructure/plugins/notifications/notification_repository.dart. In this file you will find a switch statement in the 'handleNotificationClick' function that handles the different notification types. You need to add a new case for your new notification type. This function is called when a user clicks on a notification in the app, in his "notification center" page.
So this was it for the application modifications. Now we need to add the logic for the device notifications which will come from the server in our case the Google Cloud Functions.