Push Notification教學:如何使用Firebase在iOS實現推播功能
文章推薦指數: 80 %
在此教學中,我們會了解如何應用Firebase推播通知,懂得如何一步一步在Xcode介面實現,此份教學將會分成7大部份來說明。
設定Apple Developer Account ...
Swift程式語言
PushNotification教學:如何使用Firebase在iOS實現推播功能
JayvenN
Apr28,2017
15分鐘閱讀時間
In:Swift程式語言
分享
推播(PushNotification)對一個App而言,是來連結使用者相當重要的一個環節,吸引使用者的目光停留在你的App,讓他們想要使用你的App,產生對App的聯結感。
所以我們要通知使用者讓他們知道有些重要的事情發生,像是:喜歡的球隊比賽即將開始了,即時收到西瓜限時30分鐘內特價拍賣,或是這周末後在沙漠有個重要會議。
以上的情境想像,我想這些都可能是使用者想要被提醒的。
其中一個可以實現在iOSapp的推播功能,就是應用FirebaseNotification來執行。
在此教學中,我們會了解如何應用Firebase推播通知,懂得如何一步一步在Xcode介面實現,此份教學將會分成7大部份來說明。
設定AppleDeveloperAccount
產生一個CSR檔
上傳你的CSR檔
準備APNs認證
搞定Firebase的推播設定
設計一個有Firebase推播功能的DemoApp
測試Firebase推播功能
設定AppleDeveloperAccount
第一步就是必須擁有一個付費的Appledeveloperaccount,是的,你需要登記在AppleDeveloperProgram(年費是99美元),要擁有付費的開發者帳戶,才能使用推播功能。
假設你已有了付費的開發者帳戶,請登入logintoyourAppledeveloperaccount,一但登入成功後,將會鏈結至Appledeveloper的頁面,在此,你會看到”Account”的字眼在導覽欄的最上方,接下來,請點擊它。
現在你應該已經在自己的Appledeveloperaccount裡面
現在請看一下左側欄的第三列應寫著”Certificates,IDs&Profiles.”,請點選它。
現在你應已進入”Certificates,Identifiers&Profiles”的頁面
請再看一次左側欄,這裡應會有選項叫”Identifiers”。
在這選項內,會有個名稱叫”AppIDs”。
請點選它。
此時你會看見你所有的iOSAppIDs。
現在請往頁面右上角注意,你應該會看到+的按鈕。
請點它,然後你會進入一個頁面:
再來我們要填上相關資料:
AppIDDescription— Name,這兒你需填入你的App名稱(如:FirebaeNotificationDemo)。
AppIDSuffix — ExplicitAppID — BundleID,在這兒你需要你自訂屬於你App的BundleIdentifier(如:com.appcoda.firebasenotificationsdemo)。
請注意你必須使用屬於你自訂的BundleID來取代我的範例。
然後在AppServices內,點一下”PushNotification”。
當完成以上步驟後,頁面會轉鏈結至”ConfirmyourAppID”,也請按”Register”。
現在我們回到我們的”iOSAppIDs”的頁面,找到你剛建立的AppID,點選它後,將會看到ApplicationServices內的功能選項。
請拉下來直到發現”Edit”的按鈕,請點選它。
一個”iOSAppSettings”的頁面將會跳出。
請將頁面往下拉直到你看見”PushNotifications”。
是時候來建立一個”ClientSSLCertificate”,這將允許我們的通知伺服器(Firebase)連接到ApplePushNotificationServices。
在DevelopmentSSLCertificate內,點選”CreateCertificate…”的按鈕。
現在我們可以看見這個頁面”AddiOSCertificate”
為了建立一個認證(Certificate),我們將需要從我們的Mac產生一個認證登記請求(CSR)檔。
我們等會再回來這個頁面,現在我們要先需要一個CSR檔。
產生一個CSR檔
為了產生一個CSR檔,我們首先來按下cmd+space,此為Spotlight的快速鍵,開啟Spotlight後,輸入keychainAccess。
打開keychainAccess後,在menu選單上再點選KeychainAccess>CertificateAssistant>RequestaCertificateFromaCertificateAuthority…
一個”CertificateAssistant”的視窗將會彈出。
填上你的Email和你的名字,選擇”Savetodisk”,再點選”Continue”。
然後儲存你的CSR檔於你的硬碟中。
上傳你的CSR檔
現在我們已產生了一個CSR檔,可以準備回到”AddiOSCerificate”的頁面。
將頁面往下拉,點選”Continue”,再選”Choosefile…”,然後找到你剛儲存的CSR位置,再按”Open”。
接著,再次按下”Continue”,然後應該會有個頁面顯示”YourCerificateisready”。
現在可以直接按下藍色的”Download”按鈕來下載你的認證。
準備APNs認證
現在你已經建好一個iOS認證,我們將準備另一個認證,叫做APNs認證(ApplePushNotifications的縮寫簡稱),這是用來等下會用來鏈結Firebase的相關設定。
現在來打開Finder,並找出你剛載好的認證。
點選兩下認證檔檔案(aps_development.cer)來把它加入到KeychainAccess。
現在打開KeychainAccess後,在”MyCertificates”內,我們將可以看見你剛加入的認證檔。
他應該會叫做:
AppleDevelopmentIOSPushServices:
一旦輸出後,會有確認視窗彈跳出來提示條是否要儲存你的privatekey為p12檔案格式。
當然如果你想要保護你輸出後的認證,你可以輸入一組密碼來保護它,再點選”OK”。
太棒了!我們剛已完成了所有設定與準備工作,現在我們可以準備朝向Firebase!那就開始吧。
搞定Firebase的推播設定
首先,先來到Firebaseconsole頁面,登入你的Googleaccount後,進入控制台(console),若你還不知道怎麼找到控制台,在主頁面的右上角有個”Gotoconsole”的按鈕,請點選它進入。
一旦你在控制台的頁面時,請點選”CREATEANEWPROJECT”的按鈕。
我將我的專案名稱命名為”FirebaseNotificationDemo”,但你也可以自行命名。
點選”CreateANEWPROJECT”的按鈕後進行後續步驟。
完成以上步驟後,你將會被帶到新專案的全覽頁面。
現在點選”AddFirebasetoyouriOS”的按鈕。
輸入你的iOSbundleID後,點選”ADDAPP”的按鈕。
依照螢幕上的指示下載GooleInfo.plist檔,我們等會會需要它。
點選”CONTINUE”進行下一步,將會有指示教你如何將FirbaseSDK加到我們的專案內,我等下也會帶你共同設定此SDK,但現在請先忽略它,並按下”CONTINUE”進行下一步。
最後,點選”Finish”來完成設定,你將會看到你的iOSApp在Firebase全覽的頁面中。
在頁面的左上角有個Settingicon,點選settingsicon>Projectsettings。
請在標籤列上選擇CloudMessaging。
把頁面拉下來,點選”UploadCertificate”的按鈕。
再來會有視窗會彈出,告知你需上傳你的DevelopmentAPNs認證檔。
點選”BROWSE”,並且選擇你先前已存檔的APNs認證檔(就是p12檔案格式),如果你之前有將你的認證檔設密碼,也必須一併輸入密碼,過來再點選”UPLOAD”按鈕。
現在你應該可以看見一個DevelopmentAPNs認證檔已存入CloudMessagingsetting內。
以這個Demo而言,我們是使用DevelopmentAPNs認證,但如果你決定要將你的App上架至AppStore,請確認你需把你的APNs認證存入Firebase的ProductionAPNs。
很好!我們終於完成所有的設定了,是時候回過頭到Xcode來設計一個DemoApp。
設計一個有Firebase推播功能的DemoApp
現在打開Xcode,並建立一個新的專案,選擇SingleViewApplication的範本,你可以自行命名你想要的Xcode專案名稱。
請注意你的bundleID應該和你在AppleDeveloperDashboard設定的要一致,如果你已經忘記所設的ID,你可以回到AppleDeveloperAccount,找到Identifiers下的AppIDs確認所設的名稱。
只要你設定不一致,你將不能收到任何的推播訊息。
使用CocoaPods來安裝FirebaseSDK
接著我們即將整合FirebaseSDK到你的Xcode專案,最簡單的方式就是應用CocoaPods,首先關閉Xcode專案並開啟Finder,將路徑設定成你的專案位置,並執行下列指令來初始化你的Podfile:
podinit
然後在你所設的專案資料夾內打開Podfile,並加入下列的pods至你的Podfile:
pod'Firebase/Core'
pod'Firebase/Messaging'
然後儲存,此時你的Podfile內容應該會像是:
#Uncommentthenextlinetodefineaglobalplatformforyourproject
#platform:ios,'9.0'
target'FirebaseNotificationDemo'do
#Commentthenextlineifyou'renotusingSwiftanddon'twanttousedynamicframeworks
use_frameworks!
#PodsforFirebaseNotificationDemo
pod'Firebase/Core'
pod'Firebase/Messaging'
end
回到你的Terminal,並繼續執行下列指令來安裝pods
podinstall
CocoaPods會隨即下載SDK並建立一個.xcworkspace,確保你需要此來開啟你的專案。
編者的話:
如果你是第一次碰到CocoaPods的新手,可以先看此篇文章ourbeginner’sguidetoCocoaPods
新增GoogleService-Info.plist
當SDK安裝完後,接續就是找出你之前所下載的GoogleService-Info.plist檔案位置,從Finder拖拉此檔案至Xcode的projectfolder。
一旦安裝完成,你應該會看見GoogleService-Info.plist在你的projectfolder。
提醒:當把GoogleService-Info.plist檔加到你的Xcode專案後,請確認你專案的bundleID是必須和你之前的設定一致。
如果不一致,你的App是無法收到推播訊息的,這是一個非常重要的關鍵點。
啟動推播功能(PushNotification)
先給個讚!下一步就是啟用Demoapp專案的推播功能,在Xcode的projectnavigation內找到Project,然後選擇Target>Capabilities。
再來是找出PushNotification的開關,然後改在ON來啟動它。
初始化推播設定
是時候來寫一些程式碼來測試推播功能,先進入AppDelegate.swift,和import下列模組:
importUserNotifications
importFirebase
importFirebaseInstanceID
importFirebaseMessaging
接著加入下列協定在你的AppDelegateclass:
UNUserNotificationCenterDelegate,FIRMessagingDelegate
接下來,基於FIRMessagingDelegate的協定下,實作一個applicationReceivedRemoteMessage的方法。
//ThecallbacktohandledatamessagereceivedviaFCMfordevicesrunningiOS10orabove.
funcapplicationReceivedRemoteMessage(_remoteMessage:FIRMessagingRemoteMessage){
print(remoteMessage.appData)
}
現在在你的application(_:didFinishLaunchingWithOptions:)的方法內加入下列程式碼。
if#available(iOS10.0,*){
//ForiOS10displaynotification(sentviaAPNS)
UNUserNotificationCenter.current().delegate=self
letauthOptions:UNAuthorizationOptions=[.alert,.badge,.sound]
UNUserNotificationCenter.current().requestAuthorization(
options:authOptions,
completionHandler:{_,_in})
//ForiOS10datamessage(sentviaFCM
FIRMessaging.messaging().remoteMessageDelegate=self
}else{
letsettings:UIUserNotificationSettings=
UIUserNotificationSettings(types:[.alert,.badge,.sound],categories:nil)
application.registerUserNotificationSettings(settings)
}
application.registerForRemoteNotifications()
FIRApp.configure()
這些推播功能的設定皆基於你的iOS版本,最後一行的FIRApp.configure()是為了初始與設定Firebase。
所以AppDelegate類別應已如目前這樣:
一旦你建置好你的AppleDelegate,你就可以在你的裝置執行你的專案,請確認當你的App詢問你能否允許開啟推播通知,需要點擊Allow。
太棒了!你已經可以開始測試了!就來試看看傳送一些推播訊息吧!
測試Firebase推播功能
好的,開始來做一些測試與嘗試傳送一些通知。
回到Firebaseconsole,並選擇你的Firebase專案,你會在左邊側邊欄看到Notification的選項,請點選它,當你進入到Notification的頁面後,請點選”SENDYOURFIRSTMESSAGE”的按鈕。
經過這麼多努力後,我們可以從Firebase傳送一個訊息叫做”thebestpushnotificationever”。
那我們就開始吧!
在”MessageText”的欄位填上你想要給你使用者看到的訊息,然後在Targetsection選擇你的App。
再把頁面拉下來,點選”SENDMESSAGE”的按鈕。
會有個視窗彈出提醒你再確認一次你的推播訊息,若無問題,請點選SEND按鈕來傳送你的通知。
如果你鎖定你的裝置,你應該可以看到你所傳的推播訊息在鎖定螢幕上,你也可以由左到右滑開推播訊息,並開啟此App。
如果你的螢幕沒有鎖定,你將會看到推播訊息是從你的螢幕上方出現,你也可以點選他且開啟App。
就這樣!
總結
我們已經實作呈現將Firebase推播功能整合至我們的Xcode專案,我們一步一步將所需執行的步驟說明到最後。
也恭喜我們能一起走到目前。
我希望你能享受學習我的教學文章,學有所穫,如果你有任何收穫或問題,都歡迎能與我一起討論,也可以分享給你身邊的朋友。
譯者簡介:OliverChen-工程師,喜歡美麗的事物,所以也愛上Apple,目前在iOS程式設計上仍是新手,正研讀Swift與Sketch中。
生活另一個身份是兩個孩子的爸,喜歡和孩子一起玩樂高,幻想著某天自己開發的App,可以讓孩子覺得老爸好棒!。
聯絡方式:電郵[email protected]。
原文:ImplementingPushNotificationsoniOSwithFirebase
作者
JayvenN
年輕、富創意的Jayven熱愛手機程式設計,善於發掘和凸顯不平凡處,透過文章抒發其獨特性。
閒時喜歡做健身、看UFC。
希望了解Jayven更多,可以到訪他的Medium平台或在LinkedIn跟他聯繫。
查看全部文章
評論
載入評論
精選文章
在SwiftUI使用Markdown輕鬆格式化文本
30Mar2022
透過SwiftPlaygrounds4直接在iPad構建一個文字轉語音App
12Jan2022
在SwiftUI中設置漸變動畫(animatedgradient)的3個方法
29Sep2021
最新文章
在SwiftUI中複製DynamicIsland動畫 為我們的App增添美感
21Sep2022
利用SwiftUI的新NavigationSplitView 為使用者創建多列導航的體驗
07Sep2022
SwiftUINavigation框架的新功能 讓我們更有效率地導航視圖
24Aug2022
很好!你已成功註冊。
歡迎回來!你已成功登入。
你已成功訂閱AppCoda中文版電子報。
你的連結已失效。
成功!請檢查你的電子郵件以獲取用於登入的連結。
好!你的付費資料已更新。
你的付費方式並未更新。
延伸文章資訊
- 1使用Firebase 雲端傳訊進行遠端通知- Xamarin - Microsoft Learn
本逐步解說提供如何使用Firebase 雲端通訊實作遠端通知的逐步說明, (也稱為Xamarin.Android 應用程式中的推播通知) 。 它說明如何實作與Firebase ...
- 2通知- Firebase說明
撰寫訊息 · 在通知編輯器中,選取[Messages] 標籤。 · 選取[New Message]。 · 輸入訊息文字,也可以選填訊息標籤。 · 選取傳送日期:[Now] 或[Scheduled...
- 3Firebase Cloud Messaging Tutorial 環境設定以及推播通知詳細 ...
- 4Push Notification教學:如何使用Firebase在iOS實現推播功能
在此教學中,我們會了解如何應用Firebase推播通知,懂得如何一步一步在Xcode介面實現,此份教學將會分成7大部份來說明。 設定Apple Developer Account ...
- 5在Android 应用中接收消息 | Firebase Cloud Messaging
根据接收消息的应用的状态(前台/后台),Firebase 通知的行为会有所不同。如果您希望前台应用接收通知消息或数据消息,则需要编写代码来处理 onMessageReceived 回调 ...