Exemplos avançados de notificações por push
O seguinte guia cobre alguns exemplos avançados de notificações por push para o SDK Braze.
Pré-requisitos
Antes de poder usar esse recurso, você precisará integrar o Android Braze SDK. Você também precisará configurar notificações por push.
Layout de notificação personalizado
As notificações do Braze são enviadas como mensagens de dados, o que significa que seu aplicativo sempre terá a chance de responder e executar o comportamento de acordo, mesmo em segundo plano (em contraste com as mensagens de notificação, que podem ser tratadas automaticamente pelo sistema quando seu app está em segundo plano). Dessa forma, seu aplicativo terá a chance de personalizar a experiência, por exemplo, exibindo elementos personalizados da interface do usuário na notificação entregue na bandeja de notificações. Embora a implementação do push dessa maneira possa não ser familiar para alguns, um de nossos recursos bem conhecidos no Braze, o Push Stories, é um excelente exemplo do uso de componentes de exibição personalizados para criar uma experiência envolvente!
O Android impõe algumas limitações quanto aos componentes que podem ser usados para implementar exibições de notificação personalizadas. Os layouts de exibição de notificação devem conter apenas objetos de exibição compatíveis com a estrutura RemoteViews.
Você pode usar a interface IBrazeNotificationFactory para personalizar como as notificações por push do Braze são exibidas. Ao estender o site BrazeNotificationFactory, o Braze chamará o método createNotification() de sua fábrica antes que a notificação seja exibida ao usuário. Em seguida, ele passará uma carga útil contendo pares de chave-valor personalizados enviados pelo dashboard do Braze ou pela API REST.
Nesta seção, você fará parceria com a Superb Owl, a apresentadora de um novo game show em que equipes de resgate de animais selvagens competem para ver quem consegue salvar mais corujas. Eles querem aproveitar as notificações de atualização ao vivo em seu app para Android, para que possam exibir o status de uma partida em andamento e fazer atualizações dinâmicas na notificação em tempo real.

Etapa 1: Adicionar um layout personalizado
Você pode adicionar um ou mais layouts RemoteView de notificação personalizados ao seu projeto. São úteis para lidar com a forma como as notificações são exibidas quando recolhidas ou expandidas. Sua estrutura de diretórios deve ser semelhante à seguinte:
1
2
3
4
5
6
.
├── app/
└── res/
└── layout/
├── liveupdate_collapsed.xml
└── liveupdate_expanded.xml
Em cada arquivo XML, crie um layout personalizado. A Superb Owl criou os seguintes layouts para seus layouts RemoteView recolhidos e expandidos:
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/notification_title"
style="@style/TextAppearance.Compat.Notification.Title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Etapa 2: Criar uma fábrica de notificações personalizada
Em seu aplicativo, crie um novo arquivo chamado MyCustomNotificationFactory.kt que estende BrazeNotificationFactory para manipular como os layouts personalizados do RemoteView são exibidos.
No exemplo a seguir, o Superb Owl criou uma fábrica de notificações personalizada para exibir um layout RemoteView para partidas em andamento. Na próxima etapa, eles criarão um novo método chamado getTeamInfo para mapear os dados de uma equipe para a atividade.
Mostrar o código de amostra
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import android.app.Notification
import android.widget.RemoteViews
import androidx.core.app.NotificationCompat
import com.braze.models.push.BrazeNotificationPayload
import com.braze.push.BrazeNotificationFactory
import com.braze.push.BrazeNotificationUtils.getOrCreateNotificationChannelId
import com.braze.support.BrazeLogger.brazelog
class MyCustomNotificationFactory : BrazeNotificationFactory() {
override fun createNotification(payload: BrazeNotificationPayload): Notification? {
if (payload.extras.containsKey("live_update")) {
val kvp = payload.extras
val notificationChannelId = getOrCreateNotificationChannelId(payload)
val context = payload.context
if (context == null) {
brazelog { "BrazeNotificationPayload has null context. Not creating notification" }
return null
}
val team1 = kvp["team1"]
val team2 = kvp["team2"]
val score1 = kvp["score1"]
val score2 = kvp["score2"]
val time = kvp["time"]
val quarter = kvp["quarter"]
// Superb Owl will define the 'getTeamInfo' method in the next step.
val (team1name, team1icon) = getTeamInfo(team1)
val (team2name, team2icon) = getTeamInfo(team2)
// Get the layouts to use in the custom notification.
val notificationLayoutCollapsed = RemoteViews(BuildConfig.APPLICATION_ID, R.layout.liveupdate_collapsed)
val notificationLayoutExpanded = RemoteViews(BuildConfig.APPLICATION_ID, R.layout.liveupdate_expanded)
// Very simple notification for the small layout
notificationLayoutCollapsed.setTextViewText(
R.id.notification_title,
"$team1 $score1 - $score2 $team2\n$time $quarter"
)
notificationLayoutExpanded.setTextViewText(R.id.score, "$score1 - $score2")
notificationLayoutExpanded.setTextViewText(R.id.team1name, team1name)
notificationLayoutExpanded.setTextViewText(R.id.team2name, team2name)
notificationLayoutExpanded.setTextViewText(R.id.timeInfo, "$time - $quarter")
notificationLayoutExpanded.setImageViewResource(R.id.team1logo, team1icon)
notificationLayoutExpanded.setImageViewResource(R.id.team2logo, team2icon)
val customNotification = NotificationCompat.Builder(context, notificationChannelId)
.setSmallIcon(R.drawable.notification_small_icon)
.setStyle(NotificationCompat.DecoratedCustomViewStyle())
.setCustomContentView(notificationLayout)
.setCustomBigContentView(notificationLayoutExpanded)
.build()
return customNotification
} else {
// Use the BrazeNotificationFactory for all other notifications
return super.createNotification(payload)
}
}
}
Etapa 3: Mapear dados personalizados
Em MyCustomNotificationFactory.kt, crie um novo método para tratar os dados quando as atualizações ao vivo forem exibidas.
A Superb Owl criou o seguinte método para mapear o nome e o logotipo de cada equipe para as atualizações ao vivo expandidas:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class CustomNotificationFactory : BrazeNotificationFactory() {
override fun createNotification(payload: BrazeNotificationPayload): Notification? {
// Your existing code
return super.createNotification(payload)
}
// Your new method
private fun getTeamInfo(team: String?): Pair<String, Int> {
return when (team) {
"WBF" -> Pair("Wild Bird Fund", R.drawable.team_wbf)
"OWL" -> Pair("Owl Rehab", R.drawable.team_owl)
else -> Pair("Unknown", R.drawable.notification_small_icon)
}
}
}
Etapa 4: Definir a fábrica de notificações personalizadas
Em sua classe de aplicativo, use customBrazeNotificationFactorypara definir sua fábrica de notificações personalizada.
1
2
3
4
5
6
7
8
9
10
import com.braze.Braze
class MyApplication : Application() {
override fun onCreate() {
super.onCreate()
// Tell Braze to use your custom factory for notifications
Braze.customBrazeNotificationFactory = MyCustomNotificationFactory()
}
}
Etapa 5: Enviar a atividade
Você pode usar o endpoint /messages/send REST API para enviar uma notificação por push para o dispositivo Android de um usuário.
Exemplo de comando curl
A Superb Owl enviou sua solicitação usando o seguinte comando curl:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
curl -X POST "https://BRAZE_REST_ENDPOINT/messages/send" \
-H "Authorization: Bearer {REST_API_KEY}" \
-H "Content-Type: application/json" \
--data '{
"external_user_ids": ["USER_ID"],
"messages": {
"android_push": {
"title": "WBF vs OWL",
"alert": "2 to 4 1:33 Q4",
"extra": {
"live_update": "true",
"team1": "WBF",
"team2": "OWL",
"score1": "2",
"score2": "4",
"time": "1:33",
"quarter": "Q4"
},
"notification_id": "ASSIGNED_NOTIFICATION_ID"
}
}
}'
Embora os comandos curl sejam úteis para testes, recomendamos lidar com essa chamada no backend, onde você já está lidando com as iOS Live Activities.
Parâmetros de solicitação
| Chave | Descrição |
|---|---|
REST_API_KEY |
Uma chave da API REST da Braze com permissões messages.send. Isso pode ser criado no dashboard do Braze em Configurações > Chaves de API. |
BRAZE_REST_ENDPOINT |
Sua URL de endpoint REST. Seu endpoint dependerá da URL do Braze para sua instância. |
USER_ID |
O ID do usuário para o qual você está enviando a notificação. |
messages.android_push.title |
O título da mensagem. Por padrão, isso não é usado para as notificações ao vivo da fábrica de notificações personalizadas, mas pode ser usado como fallback. |
messages.android_push.alert |
O corpo da mensagem. Por padrão, isso não é usado para as notificações ao vivo da fábrica de notificações personalizadas, mas pode ser usado como fallback. |
messages.extra |
Pares de valores-chave que a fábrica de notificações personalizadas usa para notificações ao vivo. Você pode atribuir qualquer string a esse valor; no entanto, no exemplo acima, live_updates é usado para determinar se é uma notificação por push padrão ou ao vivo. |
ASSIGNED_NOTIFICATION_ID |
O ID de notificação que deseja atribuir à notificação ao vivo do usuário escolhido. A ID deve ser exclusiva para esse jogo e deve ser usada para atualizar a notificação existente posteriormente. |
Etapa 6: Atualizar a atividade
Para atualizar a notificação existente do RemoteView com novos dados, modifique os pares de valores-chave relevantes atribuídos a messages.extra e, em seguida, use o mesmo notification_id e chame novamente o endpoint /messages/send.
Notificações por push personalizadas
As notificações por push podem exibir informações específicas do usuário dentro de uma hierarquia de visualização personalizada. No exemplo a seguir, um disparador de API é usado para enviar notificações por push personalizadas a um usuário para que ele possa verificar seu progresso atual depois de concluir uma tarefa específica no app.

Para configurar um push personalizado no dashboard, registre a categoria específica que deseja exibir e, em seguida, defina quaisquer atribuições de usuário relevantes que gostaria de exibir usando o Liquid.

Pré-requisitos
Antes de usar este recurso, você precisará integrar o SDK Swift Braze. You’ll also need to set up push notifications.
This implementation guide is centered around a Swift implementation, but Objective-C snippets are provided for those interested.
Notification content app extensions

Notification content app extensions provide you a great option for push notification customization. Notification content app extensions display a custom interface for your app’s notifications when a push notification is expanded.
Push notifications can be expanded in three different ways:
- A long press on the push banner
- Swiping down on the push banner
- Swiping the banner to the left and selecting “View”
These custom views offer smart ways to engage customers by displaying distinct types of content, including interactive notifications, notifications populated with user data, and even push messages that can capture information like phone numbers and email. One of our well-known features at Braze, Push Stories, are a prime example of what a push notification content app extension can look like!
Requirements

- Push notifications successfully integrated in your app
- The following files generated by Xcode based on your coding language:
Swift
NotificationViewController.swiftMainInterface.storyboard
Objective-C
NotificationViewController.hNotificationViewController.mMainInterface.storyboard
Interactive push notification
Push notifications can respond to user actions inside a content app extension. For users running iOS 12 or later, this means you can turn your push notifications into fully interactive messages! This provides an exciting option to introduce interactivity to your promotions and applications. For example, your push notification can include a game for users to play, a spin-to-win wheel for discounts, or a “like” button to save a listing or song.
The following example shows a push notification where users are able to play a match game inside the expanded notification.

Dashboard configuration
To create an interactive push notification, you must set a custom view in your dashboard.
- From the Campaigns page, click Create Campaign to start a new push notification campaign.
- On the Compose tab, toggle on Notification Buttons.
- Enter a custom iOS category in the iOS Notification Category field.
- In the
.plistof your Notification Content Extension Target, set theUNNotificationExtensionCategoryattribute to your custom iOS category. The value given here must match what is set in the Braze dashboard under iOS Notification Category. - Set the
UNNotificationExtensionInteractionEnabledkey totrueto enable user interactions in a push notification.

Personalized push notifications

Push notifications can display user-specific information inside a content extension. This allows you to create user-focused push content, such as adding the option to share your progress across different platforms, show unlocked achievements, or display onboarding checklists. This example shows a push notification displayed to a user after they have completed a specific task in the Braze Learning course. By expanding the notification, the user can see their progress through their learning path. The information provided here is user-specific and can be fired off as a session is completed or a specific user action is taken by leveraging an API trigger.
Dashboard configuration
To create a personalized push notification, you must set a custom view in your dashboard.
- From the Campaigns page, click Create Campaign to start a new push notification campaign.
- On the Compose tab, toggle on Notification Buttons.
- Enter a custom iOS category in the iOS Notification Category field.
- In the Settings tab, create key-value pairs using standard Liquid. Set the appropriate user attributes you want the message to show. These views can be personalized based on specific user attributes of a specific user profile.
- In the
.plistof your Notification Content Extension Target, set theUNNotificationExtensionCategoryattribute to your custom iOS category. The value given here must match what is set in the Braze dashboard under iOS Notification Category.

Handling key-value pairs
The method didReceive is called when the notification content app extension has received a notification. This method can be found within the NotificationViewController. The key-value pairs provided in the dashboard are represented in the code through the use of a userInfo dictionary.
Parsing Key-Value Pairs from Push Notifications
1
2
3
4
5
6
7
8
9
func didReceive(_ notification: UNNotification) {
let userInfo = notification.request.content.userInfo
guard let value = userInfo["YOUR-KEY-VALUE-PAIR"] as? String,
let otherValue = userInfo["YOUR-OTHER-KEY-VALUE-PAIR"] as? String,
else { fatalError("Key-Value Pairs are incorrect.")}
...
}
1
2
3
4
5
6
7
8
9
10
11
- (void)didReceiveNotification:(nonnull UNNotification *)notification {
NSDictionary *userInfo = notification.request.content.userInfo;
if (userInfo[@"YOUR-KEY-VALUE-PAIR"] && userInfo[@"YOUR-OTHER-KEY-VALUE-PAIR"]) {
...
} else {
[NSException raise:NSGenericException format:@"Key-Value Pairs are incorrect"];
}
}
Information capture push notification
Push notifications can capture user information inside a content app extension, pushing the limits of what is possible with a push. Requesting user input through push notifications allows you to not only request basic information like name or email, but also prompt users to submit feedback or complete an unfinished user profile.
For more information, see Logging push notification data.
In the following flow, the custom view is able to respond to state changes. Those state change components are represented in each image.
- User receives a push notification.
- Push is opened. After expanded, the push prompts the user for information. In this example, the user’s email address is requested, but you could request any sort of information.
- Information is provided, and if in the expected format, the registration button is shown.
- Confirmation view is displayed, and push gets dismissed.

Dashboard configuration
To create an information capture push notification, you must set a custom view in your dashboard.
- From the Campaigns page, click Create Campaign to start a new push notification campaign.
- On the Compose tab, toggle on Notification Buttons.
- Enter a custom iOS category in the iOS Notification Category field.
- In the Settings tab, create key-value pairs using standard Liquid. Set the appropriate user attributes you want the message to show.
- In the
.plistof your Notification Content Extension Target, set theUNNotificationExtensionCategoryattribute to your custom iOS category. The value given here must match what is set in the Braze dashboard under iOS Notification Category.
As seen in the example, you may also include an image in your push notification. To do this, you must integrate rich notifications, set the notification style in your campaign to Rich Notification, and include a rich push image.

Handling button actions
Each action button is uniquely identified. The code checks if your response identifier is equal to the actionIndentifier, and if so, knows that the user clicked the action button.
Handling Push Notification Action Button Responses
1
2
3
4
5
6
7
func didReceive(_ response: UNNotificationResponse, completionHandler completion: @escaping (UNNotificationContentExtensionResponseOption) -> Void) {
if response.actionIdentifier == "YOUR-REGISTER-IDENTIFIER" {
// do something
} else {
// do something else
}
}
1
2
3
4
5
6
7
- (void)didReceiveNotificationResponse:(UNNotificationResponse *)response completionHandler:(void (^)(UNNotificationContentExtensionResponseOption))completion {
if ([response.actionIdentifier isEqualToString:@"YOUR-REGISTER-IDENTIFIER"]) {
completion(UNNotificationContentExtensionResponseOptionDismiss);
} else {
completion(UNNotificationContentExtensionResponseOptionDoNotDismiss);
}
}
Dismissing pushes
Push notifications can be automatically dismissed from an action button press. There are three pre-built push dismissal options that we recommend:
completion(.dismiss)- Dismisses the notificationcompletion(.doNotDismiss)- Notification stays opencompletion(.dismissAndForward)- Push dismisses and the user gets forwarded into the application
Editar esta página no GitHub