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


推播(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 file,並加入下列的pods至你的Podfile:

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

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

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下列模組:

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

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

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

這些推播功能的設定皆基於你的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 is a 20 years old App Enthusiast. He is all about creativity and simplicity. He likes to take traits from uncommon places and root them to his core disciplines. He watches the UFC, trains at the gym, and provides his body with a clean diet in his chill time. He believes that the most critical part of an article is the voice. You can read his stories on <a href="https://medium.com/@jayvenn">Medium</a> and connect with him on <a href="https://www.linkedin.com/in/jayvenn/">LinkedIn</a>.

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This