iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Mobile Development

轉職App開發打怪雜記系列 第 24

Firebase推播(下) - 圖片推播

  • 分享至 

  • xImage
  •  

緣由:

推播時帶圖片是很常見的,只是沒想到當時我搞了好幾天,查到的資料零零落落,有些教程會讓人在走偏的道路上越走越偏/images/emoticon/emoticon10.gif,後來才知道原來需要擴展推播的功能,才能在推播上顯示圖片,且這樣就得另創target,意味著會再創一個id,因為是擴展app的推播功能,所以創建新target時配好的id會長的像這樣
原target的id:com.test.abc
NotificationServiceExtension的id:com.test.abc.[target名稱]
然後因為擴展推播的功能也會使用到Firebase,所以需要至Podfiles中去新增新target要安裝的套件,
接著再回來新target項下新創建的NotificationService.swift,導入Firebase函式庫,在didReceive裡添加我們要使用的firebase擴展功能~

實作:

Step 1:
在Project Navigator中,點擊紅匡位置的“+”來新增新的target
https://ithelp.ithome.com.tw/upload/images/20210924/20130757Ir9WGGhjbk.png
在彈出的target類型視窗中,選擇“Notification Service Extension”
https://ithelp.ithome.com.tw/upload/images/20210924/201307573fLVT3XWsH.png
然後按照步驟即可完成創建

Step 2:
到APPLE開發者後台,用此新的App id建立新的Provisioning Profile,下載後於Singing中選用
https://ithelp.ithome.com.tw/upload/images/20210924/20130757Szajw4SI0j.png
https://ithelp.ithome.com.tw/upload/images/20210924/20130757CybDbY2hu7.png
https://ithelp.ithome.com.tw/upload/images/20210924/20130757B7veW2z5LY.png
https://ithelp.ithome.com.tw/upload/images/20210924/20130757QsuH981d1c.png

Step 3:
重新安裝第三方套件,開啟終端機移動目前的位置至專案資料夾,然後用vim 編輯器開啟Podfiles
下方的'RemotePush’target是原本的APP target,而'NotificationServiceExt’target是我後來加上的部分

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RemotePush' do
  # Comment the next line if you don't want to use dynamic frameworks
  pod 'Firebase/Analytics'
  pod 'Firebase/Core'
  pod 'Firebase/Messaging'
  use_frameworks!

  # Pods for RemotePush
target 'NotificationServiceExt' do
    inherit! :search_paths
end


end

以上編輯完後儲存離開,然後執行pod install,這階段就算結束了

Step 4:
在新創建的target項下,尋找NotificationService.swift檔案,導入函式庫import Firebase,然後在override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) 中添加下面這段

    if bestAttemptContent != nil {
        return FIRMessagingExtensionHelper().populateNotificationContent(
        bestAttemptContent!,
        withContentHandler: contentHandler)
    }

若你要修改傳送來的標題或內容,也可以另外將bestAttemptContent拉出來指定title和body即可
然後將App安裝到實機,可以開始測試了

Step 5:
至Firebase 專案後台的Cloud Messaging中建立新通知(圖片我是存在firebase的storage中)
https://ithelp.ithome.com.tw/upload/images/20210924/20130757PJVv0rMi6O.png
接著等候推播
下方為圖片推播成功的畫面
https://ithelp.ithome.com.tw/upload/images/20210924/20130757FnSrRfH51N.png
https://ithelp.ithome.com.tw/upload/images/20210924/20130757ZaqKWrJ8Nb.png


上一篇
Firebase推播(上) - 文字推播
下一篇
聊天室(上)- 客製元件Xib建立
系列文
轉職App開發打怪雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言