[英]Flutter - How to display FCM notification outside notification bar like whatsapp
我使用 FCM 實現了 flutter 推送通知,它在應用程序處於前台、后台以及應用程序關閉時完美運行。 但我正在尋找一種顯示我的通知的方式,當你不在它的應用程序中時,Whatsapp 顯示彈出通知的方式就像浮動在頂部(這次不在通知欄中。)見附圖:
正如您在上圖中看到的,用戶在設備上的圖庫應用程序中,並且顯示另一個應用程序的彈出通知消息。 下面是我在 flutter 中的工具的樣子:
FirebaseMessaging.instance.getInitialMessage().then((message) {
print(message);
});
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
print(message);
});
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
print(message);
});
我的 android 清單如下所示:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="app_name">
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
<application
android:allowBackup="false"
android:label="app_name"
android:icon="@mipmap/ic_launcher">
<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED"></action>
</intent-filter>
</receiver>
<service
android:name="MyNavigationService"
android:foregroundServiceType="location" >
</service>
<receiver
android:name="app_name.FirebaseBroadcastReceiver"
android:exported="false"
android:permission="com.google.android.c2dm.permission.SEND">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
</intent-filter>
</receiver>
<!--service
android:name="app_name.java.MyFirebaseMessagingService"
android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service-->
<service
android:name="app_name.service.MyFirebaseInstanceIDService"
android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
</intent-filter>
</service>
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="A......"/>
<meta-data
android:name="com.google.firebase.messaging.default_notification_channel_id"
android:value="@string/default_notification_channel_id" />
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:exported="true"
android:showWhenLocked="false"
android:turnScreenOn="false"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background" />
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<intent-filter>
<action android:name="FLUTTER_NOTIFICATION_CLICK" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
</manifest>
我的 flutter 版本是: firebase_messaging: ^13.0.4
我能夠解決一個解決方案,以防萬一有人訪問此頁面尋求解決方案。 我能夠使用awesome_notification
解決它 它是 flutter 中的本地通知 pub.dev,我在我的FirebaseMessaging.onBackgroundMessage
中實現了它 因此,當應用程序在后台運行並觸發 FCM 時,將調用未來的 function 包裝 awesome 通知,如圖所示以下:
在下面打電話
void main() async{
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
}
我的_firebaseMessagingBackgroundHandler
如下所示:
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
bool isAllowed = await AwesomeNotifications().isNotificationAllowed();
if (!isAllowed) return;
await AwesomeNotifications().createNotification(
content: NotificationContent(
id: -1, // -1 is replaced by a random number
channelKey: 'alerts',
title: message.notification.title,
body: message.notification.body,
bigPicture: 'https://storage.googleapis.com/cms-storage-bucket/d406c736e7c4c57f5f61.png',
largeIcon:'https://storage.googleapis.com/cms-storage-bucket/d406c736e7c4c57f5f61.png',
notificationLayout: NotificationLayout.BigPicture,
payload: {'notificationId': '1234567890'}),
actionButtons: [
NotificationActionButton(key: 'REDIRECT', label: 'Redirect'),
NotificationActionButton(
key: 'REPLY',
label: 'Reply Message',
requireInputText: true,
actionType: ActionType.SilentAction
),
NotificationActionButton(
key: 'DISMISS',
label: 'Dismiss',
actionType: ActionType.DismissAction,
isDangerousOption: true)
]
);
}
請注意在main.dart
中實現這個
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.