APP誕生全紀錄 - 容易忽略的必要功能1:推播

更新 發佈閱讀 13 分鐘
raw-image

一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能

如果你還沒有閱讀過「APP誕生全紀錄」,建議可以先看一下,至少知道哪些可能是容易忽略的必要功能,今天這篇文章內容會比較偏向技術層面,我們先來探討其中重要的一項:推播〔Push Notification〕


簡介

raw-image

推播現在已經是手機中不可或缺的一個功能,無論是用來接收新的通知或是提醒,甚至是開發者想要對使用者傳遞的任何即時消息,都可以使用推播,這是個提升APP存在感並且增加留存率的實用工具。如果你今天開發出一款APP,在某些使用情境下,使用者直覺認為應該要收到提醒推播,但實際卻沒有任何通知跳出的話,那對於APP的留存率可是一大硬傷。今天我們就來介紹一下這個舉足輕重的功能,在Android中叫FCM,在iOS裡叫APNs,這兩個都是遠端推播,另外有一種是本地推播 (補充在最後),以上所有項目在本文章內都統稱推播。


設定

我們來使用Flutter + Firebase Cloud Messaging (FCM)實作看看,如果你還沒設定過Firebase,可以上網找一下相關資訊,有許多初始設定和使用介紹的文章可以參考,我們這裡就不再多加贅述,只針對推播這個功能來做說明。

Android

在AndroidManifest.xml中加入service描述(如果使用的Flutter Version >= 1.12可以不用設定這一部分)

<service
  android:name=".java.MyFirebaseMessagingService"
  android:exported="false">
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>

(Optional) 可選擇自訂的icon和顏色

<meta-data
  android:name="com.google.firebase.messaging.default_notification_icon"
  android:resource="@drawable/ic_stat_ic_notification" />

<meta-data
  android:name="com.google.firebase.messaging.default_notification_color"
  android:resource="@color/colorAccent" />

iOS

因為我們使用的套件統一接口都在FCM中,所以我們必須將你的 APNs 身份驗證密鑰上傳到 Firebase作串接。如果你還沒有 APNs 身份驗證密鑰,趕快去Apple Developer Member Center中啟動Push Notification功能並創建一個密鑰吧。

  1. 在 Firebase 控制台的項目中,選擇齒輪圖標,選擇Project Settings ,然後選擇Cloud Messaging選項卡。
  2. iOS app configuration下的APNs authentication key中,單擊Upload按鈕。
  3. 瀏覽到您保存密鑰的位置,選擇它,然後單擊打開。添加密鑰的密鑰 ID,然後單擊Upload 。。
  4. 在XCode中勾選Push Notification背景監聽
raw-image
raw-image



安裝套件

在Flutter專案的pubspec.yaml中加入

dependencies:
  firebase_messaging: ^12.0.2


取得TOKEN

首先在啟動時我們需要先要求權限,並且儲存一下設備的Token,可以把這個token想成是使用者設備的地址,之後後台發送推播就是使用這組地址來發送指定的推播。

class PushNotification {
  init() async {
    //要求權限
    NotificationSettings settings =
    await messaging.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    sound: true,
    );
    if (settings.authorizationStatus == AuthorizationStatus.authorized ||
    settings.authorizationStatus == AuthorizationStatus.provisional) {
       //如果權限有被使用者允許,拿一下Token地址吧!
      messaging.getToken().then((value) => _token = value);
    }
  }
}


推播監聽

接下來我們要在啟動時加入各種情境的監聽函式,總共有四種情境要處理。

  1. 程式在前景模式運作中
  2. 程式在背景模式
  3. 程式在背景模式點擊推播打開後
  4. 程式被關閉的狀態點擊推播打開後
// 背景模式收到推播後的處理函式註冊
// 這裡要注意的是此callback必須是個top-level的static functionFirebaseMessaging.onBackgroundMessage(messageOnBackground);

// 關閉的狀態點擊推播打開後的處理函式註冊
messaging
.getInitialMessage()
.then((message) => messageOpenedOnTerminated(message));

// 前景模式收到推播後的處理函式註冊
FirebaseMessaging.onMessage
.listen((message) => messageOnForeground(message));

// 背景模式中使用者點擊推播後的處理函式註冊
FirebaseMessaging.onMessageOpenedApp
.listen((message) => messageOpenedOnBackground(message));

註冊的callback函式都會傳入一個結構體RemoteMessage,這個就是推播的結構體,我們通常最主要處理的會有title、body、和data。title會是推播顯示中的主標題,body會是推播顯示中的描述文字,而data就會是設計者想要傳遞給使用端的自訂結構。

就是這麼簡單!

最後你只要把收到推播資料的處理寫在對應的callback內就可以囉!

這裡要注意一下前景模式收到推播時,不會再另外跳出預設的通知訊息視窗,如果你想要跟背景模式下收到時一樣會跳出推播的提示視窗,必須另外使用Local Notification來發佈自訂的通知。


進階本地通知

補充說明一下本地通知,在兩種情況下會需要用到。一種是前面提到過的,當收到遠端推播資料時,APP正在前景模式的狀況下,不會跳出推播視窗;另一種是APP內觸發的推播,例如定時鬧鐘。

我們使用flutter_local_notifications這個套件來實作,Android使用前需要先設定一個channel id供套件使用。

<meta-data
android:name="com.google.firebase.messaging.default_notification_channel_id"
android:value="bible_seed_channel" />

要使用前初始化一下

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
FlutterLocalNotificationsPlugin();

final AndroidNotificationChannel channel = AndroidNotificationChannel(
  'bible_seed_channel', // id
  'BibleSeed Notifications', // title
  description: 'This channel is used for important notifications.', // description
  importance: Importance.max,
);

final InitializationSettings initializationSettings =
InitializationSettings(
  android: AndroidInitializationSettings("@mipmap/ic_launcher"),
  iOS: IOSInitializationSettings(),
);

await flutterLocalNotificationsPlugin.initialize(initializationSettings);
await flutterLocalNotificationsPlugin
.resolvePlatformSpecificImplementation<
AndroidFlutterLocalNotificationsPlugin>()
?.createNotificationChannel(channel);

//iOS前景顯示選項設定
await FirebaseMessaging.instance
.setForegroundNotificationPresentationOptions(
  alert: true,
  badge: true,
  sound: true,
);

需要推播時呼叫流程如下

final NotificationDetails notificationDetails = NotificationDetails(
  android: AndroidNotificationDetails(
    'bible_seed_channel', // id
    'High Importance Notifications', // name
    channelDescription: 'This channel is used for BibleSeed important notifications.',
    importance: Importance.max,
    priority: Priority.high,
    icon: '@mipmap/ic_launcher',
  ),
  iOS: IOSNotificationDetails(),
);

final id = DateTime.now().millisecondsSinceEpoch ~/ 1000;
flutterLocalNotificationsPlugin.show(id, title,
body, notificationDetails);

在這個套件中,還可以設定各種定時的推播,詳細內容就請參閱相關文件囉。



結論

今天我們先介紹了第一種容易被忽略卻非常必要的一個APP功能,不知道你看完後是不是想要立馬加上這功能了呢?!期待後續有機會繼續介紹其他的重要功能,趕緊訂閱一下,不要錯過任何一篇精彩文章囉!!

留言
avatar-img
Amos的沙龍
5會員
7內容數
Amos的沙龍的其他內容
2023/12/21
今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
2023/12/21
今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
2022/11/12
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
2022/11/12
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
2022/09/09
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第二種必要功能:APP跳轉,透過一組文字連結能夠點選開啟APP並跳轉到正確功能頁面。
Thumbnail
2022/09/09
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第二種必要功能:APP跳轉,透過一組文字連結能夠點選開啟APP並跳轉到正確功能頁面。
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
市場經驗拉長之後,很多投資人都會遇到同一個問題:不是方向看錯,而是部位太集中個股,常常跟大趨勢脫節。 早年的台股環境,中小股非常吃香,反而權值股不動,但QE量化寬鬆後,特別是疫情之後,後疫情時代,鈔票大量在股市走動,這些大資金只能往權值股走,因此早年小P的策略偏向中小型個股,但近年AI興起,高技術
Thumbnail
市場經驗拉長之後,很多投資人都會遇到同一個問題:不是方向看錯,而是部位太集中個股,常常跟大趨勢脫節。 早年的台股環境,中小股非常吃香,反而權值股不動,但QE量化寬鬆後,特別是疫情之後,後疫情時代,鈔票大量在股市走動,這些大資金只能往權值股走,因此早年小P的策略偏向中小型個股,但近年AI興起,高技術
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
LINE 在台灣有許多人使用,是一天裡開啟次數最多的APP,是生活中最重要的社群平台。 但很多人不知道LINE官方有個免費推播訊息的服務LINE Notify
Thumbnail
LINE 在台灣有許多人使用,是一天裡開啟次數最多的APP,是生活中最重要的社群平台。 但很多人不知道LINE官方有個免費推播訊息的服務LINE Notify
Thumbnail
首先,我真的很訝異,生活中沒什麼人知道「Google快訊」 這麼好用的東西,不能只有我知道呀 Google快訊,是自動發給你,你想知道的新資訊,例如我想知道:
Thumbnail
首先,我真的很訝異,生活中沒什麼人知道「Google快訊」 這麼好用的東西,不能只有我知道呀 Google快訊,是自動發給你,你想知道的新資訊,例如我想知道:
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們先來探討其中重要的一項:推播〔Push Notification。
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們先來探討其中重要的一項:推播〔Push Notification。
Thumbnail
Whastapp如何傳送大量訊息到不同電話,如果你正在煩惱這個問題,無論你是有大量客戶電話要傳送、有推廣活動需要whatsapp通知、還是有重要通告要大量通知客人也好,它可以幫助你只需要設定一次訊息,之後就在你指定的時間自動傳送到你的客人whatsapp
Thumbnail
Whastapp如何傳送大量訊息到不同電話,如果你正在煩惱這個問題,無論你是有大量客戶電話要傳送、有推廣活動需要whatsapp通知、還是有重要通告要大量通知客人也好,它可以幫助你只需要設定一次訊息,之後就在你指定的時間自動傳送到你的客人whatsapp
Thumbnail
為什麼我們不想使用whatsapp群聊或者是whatsapp廣播的功能呢? 群聊對每個人來說都是一種糟糕的體驗,特別是當你需要向一群人一次發送一條信息(如邀請)時,之後你在網上搜尋方法時你會找到可以使用Whatsapp廣播功能。 大量發送Whatsapp的方法 g) 同意條款後提交
Thumbnail
為什麼我們不想使用whatsapp群聊或者是whatsapp廣播的功能呢? 群聊對每個人來說都是一種糟糕的體驗,特別是當你需要向一群人一次發送一條信息(如邀請)時,之後你在網上搜尋方法時你會找到可以使用Whatsapp廣播功能。 大量發送Whatsapp的方法 g) 同意條款後提交
Thumbnail
    這個月IOS 15就預計要更新了~或許還是有很多人看不懂這次IOS 15更新的內容到底是什麼.為了讓大家能迅速了解這次更新的重點,我們簡單介紹下這次更新的內容究竟有哪些吧~     事先說明,本文章只是提供個懶人包讓大家快速了解IOS 15的消息,如果想知道具體更新的內容請至蘋果官網了解~
Thumbnail
    這個月IOS 15就預計要更新了~或許還是有很多人看不懂這次IOS 15更新的內容到底是什麼.為了讓大家能迅速了解這次更新的重點,我們簡單介紹下這次更新的內容究竟有哪些吧~     事先說明,本文章只是提供個懶人包讓大家快速了解IOS 15的消息,如果想知道具體更新的內容請至蘋果官網了解~
Thumbnail
App Clips 是一個App的「一小部分」。但你想要使用這一小部分,卻不用下載一整個App。 蘋果想透過App Clips的設計,改善App的致命缺點,「再塑造」App,重新定義「網路」的使用方式,讓現在Google所主宰的網頁與瀏覽器為基礎的網路世界,轉變成為以App為基礎的網路世界。
Thumbnail
App Clips 是一個App的「一小部分」。但你想要使用這一小部分,卻不用下載一整個App。 蘋果想透過App Clips的設計,改善App的致命缺點,「再塑造」App,重新定義「網路」的使用方式,讓現在Google所主宰的網頁與瀏覽器為基礎的網路世界,轉變成為以App為基礎的網路世界。
Thumbnail
轉移自 LogDown 原文日期 May 30, 2014 10:14  之前介紹過用 Parse 來做 push,這次換成另一家服務廠商。 Lightspeed 官網: http://www.lightspeedmbs.com/。 它是由 arrownock 延伸而來的,專職於推播和即時訊息
Thumbnail
轉移自 LogDown 原文日期 May 30, 2014 10:14  之前介紹過用 Parse 來做 push,這次換成另一家服務廠商。 Lightspeed 官網: http://www.lightspeedmbs.com/。 它是由 arrownock 延伸而來的,專職於推播和即時訊息
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News