本篇主角：<a href="https://github.com/invertase/react-native-firebase">React-native-firebase</a> 建置環境：mac OS(Xcode android studio) 今天花了一個下午就把最近在做的app推播功能完成。因為十分方便就來寫一篇心得。iOS/android跨平台採用React Native。推播方面選用react-native-firebase(這真是神物!)雖然目前公司產品目前還是使用<a href="https://github.com/evollu/react-native-fcm">react-native-fcm</a>，但因為他官方也說了請大家去用react-native-firebase，所以不久的未來應該也會改成react-native-firebase，等手上issue少一點的時候。<blockquote>Since Im getting busier these days and start feeling challenging to maintain this repo every day while react-native-firebasehas a larger team/company backing it, existing users may consider migrating to react-native-firebase.</blockquote> react-native-firebase真的是非常神的套件。前一篇有提過他所支援Google Firebase的功能了，那就直接開始介紹吧。 首先要實現推播功能就要先了解iOS10之後的UNUserNotificationCenterDelegate。寫原生iOS的小夥伴們對delegate一定不陌生，他取代了之前複雜的SDK，將所有與通知相關的api整合到了一起，就是userNotification。自從iOS3開始實現push notification以來，每個版本都對推播進行了很大的改革和遷移。自iOS10之後，你可以獨立調用UNUserNotificationCenterDelegate這個代理的userNotification。而不管是local notification或remote notification，使用react-native-firebase都能不去管底層的運作。當然你需要在Xcode稍微整理一下你的AppDelegate.m。react-native-firebase對於實現推播功能是採用Google Firebase 的Cloud Messaging。所以你一樣需要去Firebase建立一個專案。(iOS App方面，你的專案ID需要和App Bundled ID一模一樣)，把建置好的GoogleServiceInfo.plist放到你iOS專案資料夾之下，並在Xcode裡對project navigation的資料夾右鍵添加。 來到你的RN專案按照官方清楚而簡單的說明一步一步的跟著做：<a href="https://rnfirebase.io/docs/v5.x.x/installation/initial-setup">initial setup guide</a>簡單說就是<blockquote>npm install --save react-native-firebasenative-native link react-native-firebase </blockquote>之後在你的podfile裡加入<blockquote>pod "Firebase/Core"pod "Firebase/Messaging"</blockquote>然後&nbsp;<blockquote>pod install</blockquote>關於你想知道更多的Cloud Messaging都在：<a href="https://rnfirebase.io/docs/v5.x.x/messaging/ios">messaging(iOS)</a> 然後開始修改我們的AppDelegate.m。(在ios/[App Name]/AppDelegate.m)在import package層級最下方加入：<blockquote>#import "RNFirebaseNotifications.h"</blockquote> 接著在didFinishLaunchingWithOptions:(NSDictionary *)launchOptions裡面找到[FIRApp Configure];並在他後面加入<blockquote>[RNFirebaseNotifications configure];</blockquote>如果你沒有[FIRApp Configure]; 就在整段didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{}最後面加入<blockquote>[FIRApp Configure];</blockquote>並記得<blockquote>#import &lt;Firebase.h&gt;</blockquote> 最後再在@end之前加上<blockquote>- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { &nbsp;[[RNFirebaseNotifications instance] didReceiveLocalNotification:notification]; }</blockquote> 如此一來ios的本地推播環境就完成了。 在開始測試推播環境之前，記得先去<a href="https://developer.apple.com/">Apple Developer</a> 和<a href="https://console.firebase.google.com">Cloud Messaging</a>完成一系列麻煩的APNs認證、CSR、開發用鑰匙圈、provising.....由於網路上資源很多我就不一一贅述，過程大概就是從你的mac建立一個私鑰，並在你的Apple developer裡建立一個你的app專案並記得選擇為可發送推播的專案，之後上傳你的私鑰將建立一個certificate檔案把他下載下來再匯入至Xcode裡，分為dev(可能是adHoc版可能是developing版)和release(product版)。之後你還要去keys裡建立一個Cloud Messaging可推播用的.p8或.p12金鑰認證(APNs)下載下來再上傳到firebase Cloud Messaging。 然後我們來檢查一下你的App是否允許推播功能<blockquote>const enabled = await firebase.messaging().hasPermission();if (enabled) { &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; // user has permissions} else { &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; // user doesnt have permission}</blockquote>如果無法的話(enabled回傳0)再調用requestPermission()方法來取得手機推播權限<blockquote>try { &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; await firebase.messaging().requestPermission(); &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;// User has authorised} catch (error)&nbsp;{ &nbsp;&nbsp; &nbsp; &nbsp; console.warn(error) }</blockquote>記得用try catch包起來不然噴錯誤訊息App會直接閃退。 你可以在整個App的入口index.js中完成允許推播及允許前景的初始化。在你的App.js或index.js裡的componentDidMount裡：<blockquote>firebase.notifications().onNotificationOpened((notification) =&gt; { &nbsp;const {title, data, sound, subtitle, data, body, notificationId} = notification});</blockquote>你能夠從一個notification物件中解構獲取到這些屬性title, data, sound, subtitle, data, body, notificationIdtitle就是推播的名字，顯示的標頭。常見的中文用法會是屬於向你的使用者說明這個推播的類型。例如：提醒、新訊息、通知、未接來電、廣告、帳號認證...subtitle是副標body是主體內容，純字串。data是google物件notificationId是此推播的獨立IDsound是推播聲音你可以直接使用這些function去處理及調用顯示內容<blockquote>const notification = new firebase.notifications.Notification().setNotificationId(notificationId) &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;.setTitle(title) &nbsp; &nbsp; &nbsp; &nbsp;.setBody(body) &nbsp; &nbsp; &nbsp; &nbsp;.setData(JSON.stringify(data));.setSound("default")</blockquote>ios的setSound只有30秒且要去底層一點的地方寫源碼並引入，android就簡單多了。 在ios和android上面還有許多不同的實現功能，隨便舉一個例子：<blockquote>.ios.setBadge(5)</blockquote>setBadge就是負責顯示你的app右上方紅紅數字通知的數量。 完成你的推播訊息設定後，調用display function<blockquote>firebase.notifications().displayNotification(notification)</blockquote>這樣就全部完成了。<figure class="image ck-widget" contenteditable="false"><img src="https://mistjere.com/upload/15465317411546528093F2427F61-2C7D-4CEF-9575-DDB217F3130A.jpeg"><figcaption class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" data-placeholder="Enter image caption"> </figcaption></figure> 神奇的是，在local notification上還有排程推播<blockquote>firebase.notifications().scheduleNotification(notification, { &nbsp; &nbsp;fireDate: date.getTime(), })</blockquote>不但能控制發送的時間、數量，就算你沒有網路、關閉app的狀況下也會發送推播。 這篇只是基礎示範推播通知(iOS)的設定，相比於花式推播的Android應該有更多<s>坑</s>樂趣，有空再和大家分享。