Swift 程式語言

Push Notification教學:如何使用Firebase在iOS實現推播功能

Push Notification教學:如何使用Firebase在iOS實現推播功能
Push Notification教學:如何使用Firebase在iOS實現推播功能
In: Swift 程式語言

推播(Push Notification)對一個App而言,是來連結使用者相當重要的一個環節,吸引使用者的目光停留在你的App,讓他們想要使用你的App,產生對App的聯結感。所以我們要通知使用者讓他們知道有些重要的事情發生,像是:喜歡的球隊比賽即將開始了,即時收到西瓜限時30分鐘內特價拍賣,或是這周末後在沙漠有個重要會議。以上的情境想像,我想這些都可能是使用者想要被提醒的。

其中一個可以實現在iOS app的推播功能,就是應用Firebase Notification來執行。

在此教學中,我們會了解如何應用Firebase推播通知,懂得如何一步一步在Xcode介面實現,此份教學將會分成7大部份來說明。

  • 設定Apple Developer Account
  • 產生一個 CSR 檔
  • 上傳你的 CSR 檔
  • 準備 APNs 認證
  • 搞定Firebase的推播設定
  • 設計一個有Firebase推播功能的Demo App
  • 測試Firebase推播功能

設定Apple Developer Account

第一步就是必須擁有一個付費的Apple developer account,是的,你需要登記在Apple Developer Program(年費是99美元),要擁有付費的開發者帳戶,才能使用推播功能。

假設你已有了付費的開發者帳戶,請登入login to your Apple developer account,一但登入成功後,將會鏈結至Apple developer的頁面,在此,你會看到”Account”的字眼在導覽欄的最上方,接下來,請點擊它。

現在你應該已經在自己的Apple developer account裡面

firebase-notification-apple-developer

現在請看一下左側欄的第三列應寫著”Certificates, IDs & Profiles.”,請點選它。

firebase-notification-certificate-option

現在你應已進入”Certificates, Identifiers & Profiles”的頁面

firebase-notification-certificate-profile

請再看一次左側欄,這裡應會有選項叫”Identifiers”。在這選項內,會有個名稱叫”App IDs”。請點選它。

firebase-notification-app-id

此時你會看見你所有的iOS App IDs。

firebase-notification-app-id-2

現在請往頁面右上角注意,你應該會看到+的按鈕。請點它,然後你會進入一個頁面:

firebase-notification-app-id-3

再來我們要填上相關資料:

App ID Description— Name,這兒你需填入你的App名稱(如:Firebae Notification Demo)。

App ID Suffix — Explicit App ID — Bundle ID,在這兒你需要你自訂屬於你App的Bundle Identifier(如:com.appcoda.firebasenotificationsdemo)。請注意你必須使用屬於你自訂的Bundle ID來取代我的範例。

然後在App Services內,點一下”Push Notification”。

當完成以上步驟後,頁面會轉鏈結至”Confirm your App ID”,也請按”Register”。

現在我們回到我們的”iOS App IDs”的頁面,找到你剛建立的App ID,點選它後,將會看到Application Services內的功能選項。

請拉下來直到發現”Edit”的按鈕,請點選它。

firebase-notification-push-enabled

一個”iOS App Settings”的頁面將會跳出。

firebase-notification-push-setting

請將頁面往下拉直到你看見”Push Notifications”。

是時候來建立一個”Client SSL Certificate”,這將允許我們的通知伺服器(Firebase)連接到Apple Push Notification Services。在Development SSL Certificate內,點選”Create Certificate…”的按鈕。

firebase-notification-push-ssl

現在我們可以看見這個頁面”Add iOS Certificate”

firebase-notification-push-ssl-2

為了建立一個認證(Certificate),我們將需要從我們的Mac產生一個認證登記請求(CSR)檔。我們等會再回來這個頁面,現在我們要先需要一個CSR檔。

產生一個 CSR 檔

為了產生一個CSR檔,我們首先來按下cmd+space,此為Spotlight的快速鍵,開啟Spotlight後,輸入keychain Access。打開keychain Access後,在menu選單上再點選Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority…

firebase-notification-keychainaccess

一個”Certificate Assistant”的視窗將會彈出。

firebase-notification-cert-assistant

填上你的Email和你的名字,選擇”Save to disk”,再點選”Continue”。然後儲存你的CSR檔於你的硬碟中。

上傳你的 CSR 檔

現在我們已產生了一個CSR檔,可以準備回到”Add iOS Cerificate”的頁面。

Adding CSR

將頁面往下拉,點選”Continue”,再選”Choose file…”,然後找到你剛儲存的CSR位置,再按”Open”。

add-csr-choose-file

接著,再次按下”Continue”,然後應該會有個頁面顯示”Your Cerificate is ready”。

add-csr-ready

現在可以直接按下藍色的”Download”按鈕來下載你的認證。

準備 APNs 認證

現在你已經建好一個iOS認證,我們將準備另一個認證,叫做APNs認證(Apple Push Notifications的縮寫簡稱),這是用來等下會用來鏈結Firebase的相關設定。現在來打開Finder,並找出你剛載好的認證。

firebase-locate-cert

點選兩下認證檔檔案(aps_development.cer)來把它加入到Keychain Access

現在打開Keychain Access後,在”My Certificates”內,我們將可以看見你剛加入的認證檔。他應該會叫做:

Apple Development IOS Push Services:<your.bundle.id>

在認證檔的檔名左邊有一個展開箭頭,請點選它,展開後,會有一個屬性為private key option,請點選它後,按右鍵,再按export。

apns-export-cert

一旦輸出後,會有確認視窗彈跳出來提示條是否要儲存你的private key為p12檔案格式。

apns-export-cert

當然如果你想要保護你輸出後的認證,你可以輸入一組密碼來保護它,再點選”OK”。

apns-export-cert

太棒了!我們剛已完成了所有設定與準備工作,現在我們可以準備朝向Firebase!那就開始吧。

搞定Firebase的推播設定

首先,先來到Firebase console頁面,登入你的Google account後,進入控制台(console),若你還不知道怎麼找到控制台,在主頁面的右上角有個”Go to console”的按鈕,請點選它進入。

firebase-console

一旦你在控制台的頁面時,請點選”CREATE A NEW PROJECT”的按鈕。

firebase-new-proj

我將我的專案名稱命名為”Firebase Notification Demo”,但你也可以自行命名。點選”Create A NEW PROJECT”的按鈕後進行後續步驟。

firebase-name-project

完成以上步驟後,你將會被帶到新專案的全覽頁面。現在點選”Add Firebase to your iOS”的按鈕。輸入你的iOS bundle ID後,點選”ADD APP”的按鈕。

firebase-add-app

依照螢幕上的指示下載GooleInfo.plist檔,我們等會會需要它。

firebase-download-plist

點選”CONTINUE”進行下一步,將會有指示教你如何將Firbase SDK加到我們的專案內,我等下也會帶你共同設定此SDK,但現在請先忽略它,並按下”CONTINUE”進行下一步。

firebase-install-sdk

最後,點選”Finish”來完成設定,你將會看到你的iOS App在Firebase全覽的頁面中。

firebase-overview

在頁面的左上角有個Setting icon,點選settings icon > Project settings。

firebase-project-settings

請在標籤列上選擇Cloud Messaging

firebase-cloud-messaging

把頁面拉下來,點選”Upload Certificate”的按鈕。

firebase-cloud-messaging-2

再來會有視窗會彈出,告知你需上傳你的Development APNs認證檔。

firebase-apns-cert

點選”BROWSE”,並且選擇你先前已存檔的APNs認證檔(就是p12檔案格式),如果你之前有將你的認證檔設密碼,也必須一併輸入密碼,過來再點選”UPLOAD”按鈕。

apns-export-cert-upload

現在你應該可以看見一個Development APNs認證檔已存入Cloud Messaging setting內。

apns-export-cert-upload-2

以這個Demo而言,我們是使用Development APNs認證,但如果你決定要將你的App上架至App Store,請確認你需把你的APNs認證存入Firebase的Production APNs。

很好!我們終於完成所有的設定了,是時候回過頭到Xcode來設計一個Demo App。

設計一個有Firebase推播功能的Demo App

現在打開Xcode,並建立一個新的專案,選擇Single View Application的範本,你可以自行命名你想要的Xcode專案名稱。

firebase-demo-new-proj

請注意你的bundle ID應該和你在Apple Developer Dashboard設定的要一致,如果你已經忘記所設的ID,你可以回到Apple Developer Account,找到Identifiers下的App IDs確認所設的名稱。只要你設定不一致,你將不能收到任何的推播訊息。

使用CocoaPods來安裝Firebase SDK

接著我們即將整合Firebase SDK到你的Xcode專案,最簡單的方式就是應用CocoaPods,首先關閉Xcode專案並開啟Finder,將路徑設定成你的專案位置,並執行下列指令來初始化你的Podfile:

pod init

然後在你所設的專案資料夾內打開Pod file,並加入下列的pods至你的Podfile:

pod 'Firebase/Core'
pod 'Firebase/Messaging'

然後儲存,此時你的Podfile內容應該會像是:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
  target 'FirebaseNotificationDemo' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!
  # Pods for FirebaseNotificationDemo
  pod 'Firebase/Core'
  pod 'Firebase/Messaging'
  
end

回到你的Terminal,並繼續執行下列指令來安裝pods

pod install

CocoaPods會隨即下載SDK並建立一個.xcworkspace,確保你需要此來開啟你的專案。

編者的話:

如果你是第一次碰到CocoaPods的新手,可以先看此篇文章our beginner’s guide to CocoaPods

新增GoogleService-Info.plist

當SDK安裝完後,接續就是找出你之前所下載的GoogleService-Info.plist檔案位置,從Finder拖拉此檔案至Xcode的project folder。

一旦安裝完成,你應該會看見GoogleService-Info.plist在你的project folder。

提醒:當把GoogleService-Info.plist檔加到你的Xcode專案後,請確認你專案的bundle ID是必須和你之前的設定一致。如果不一致,你的App是無法收到推播訊息的,這是一個非常重要的關鍵點。

啟動推播功能(Push Notification)

先給個讚!下一步就是啟用Demo app專案的推播功能,在Xcode的project navigation內找到Project,然後選擇Target > Capabilities。再來是找出Push Notification的開關,然後改在ON來啟動它。

demo-add-push-notification

初始化推播設定

是時候來寫一些程式碼來測試推播功能,先進入AppDelegate.swift,和import下列模組:

import UserNotifications
import Firebase
import FirebaseInstanceID
import FirebaseMessaging

接著加入下列協定在你的App Delegate class:

UNUserNotificationCenterDelegate, FIRMessagingDelegate

接下來,基於FIRMessagingDelegate的協定下,實作一個applicationReceivedRemoteMessage的方法。

// The callback to handle data message received via FCM for devices running iOS 10 or above.
func applicationReceivedRemoteMessage(_ remoteMessage: FIRMessagingRemoteMessage) {
    print(remoteMessage.appData)
}

現在在你的application(_:didFinishLaunchingWithOptions:)的方法內加入下列程式碼。

if #available(iOS 10.0, *) {
    // For iOS 10 display notification (sent via APNS)
    UNUserNotificationCenter.current().delegate = self
    let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
    UNUserNotificationCenter.current().requestAuthorization(
    options: authOptions,
    completionHandler: {_, _ in })
    // For iOS 10 data message (sent via FCM
    FIRMessaging.messaging().remoteMessageDelegate = self
} else {
    let settings: UIUserNotificationSettings =
    UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
      application.registerUserNotificationSettings(settings)

}
application.registerForRemoteNotifications()
FIRApp.configure()

這些推播功能的設定皆基於你的iOS版本,最後一行的FIRApp.configure()是為了初始與設定Firebase。所以AppDelegate類別應已如目前這樣:

firebase-appdelegate

一旦你建置好你的Apple Delegate,你就可以在你的裝置執行你的專案,請確認當你的App詢問你能否允許開啟推播通知,需要點擊Allow

demo-allow

太棒了!你已經可以開始測試了!就來試看看傳送一些推播訊息吧!

測試Firebase推播功能

好的,開始來做一些測試與嘗試傳送一些通知。回到Firebase console,並選擇你的Firebase專案,你會在左邊側邊欄看到Notification的選項,請點選它,當你進入到Notification的頁面後,請點選”SEND YOUR FIRST MESSAGE”的按鈕。

Firebase Notifications Option

經過這麼多努力後,我們可以從Firebase傳送一個訊息叫做”the best push notification ever”。那我們就開始吧!

在”Message Text”的欄位填上你想要給你使用者看到的訊息,然後在Target section選擇你的App。

Sending Firebase Notifications

再把頁面拉下來,點選”SEND MESSAGE”的按鈕。

Sending push notifications

會有個視窗彈出提醒你再確認一次你的推播訊息,若無問題,請點選SEND按鈕來傳送你的通知。

reviewing push notification

如果你鎖定你的裝置,你應該可以看到你所傳的推播訊息在鎖定螢幕上,你也可以由左到右滑開推播訊息,並開啟此App。如果你的螢幕沒有鎖定,你將會看到推播訊息是從你的螢幕上方出現,你也可以點選他且開啟App。

Notifications on lock screen

就這樣!

總結

我們已經實作呈現將Firebase推播功能整合至我們的Xcode專案,我們一步一步將所需執行的步驟說明到最後。也恭喜我們能一起走到目前。

我希望你能享受學習我的教學文章,學有所穫,如果你有任何收穫或問題,都歡迎能與我一起討論,也可以分享給你身邊的朋友。

譯者簡介:Oliver Chen-工程師,喜歡美麗的事物,所以也愛上Apple,目前在iOS程式設計上仍是新手,正研讀Swift與Sketch中。生活另一個身份是兩個孩子的爸,喜歡和孩子一起玩樂高,幻想著某天自己開發的App,可以讓孩子覺得老爸好棒!。聯絡方式:電郵[email protected]

原文Implementing Push Notifications on iOS with Firebase

作者
Jayven N
年輕、富創意的Jayven熱愛手機程式設計,善於發掘和凸顯不平凡處,透過文章抒發其獨特性。閒時喜歡做健身、看UFC。希望了解Jayven更多,可以到訪他的Medium平台或在LinkedIn跟他聯繫。
評論
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。