iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Mobile Development

30天React Native之旅:從入門到活用系列 第 23

Day 23:用Firebase Cloud Messaging遠端推送消息(Android)

  • 分享至 

  • xImage
  •  

上一篇介紹了本地推送,今天要介紹的是遠端推送,遠端推送就是透過伺服器將消息發送到已註冊的裝置上。
本篇將介紹使用Firebase Cloud Messaging(FCM)作為消息伺服器,對裝置發送推送通知。

Firebase Cloud Messaging npm安裝

首先,需要在專案中安裝Firebase的相關套件。

npm install @react-native-firebase/app
npm install @react-native-firebase/messaging

這將會安裝Firebase的核心套件和消息推送的套件。

在Firebase創建專案

  1. 首先註冊Firebase帳號

  2. 點擊"新增專案",然後按照步驟完成設置。
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365SWK4Lvqc85.png

  3. 找到Cloud Messaging
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365CT0nOWy2yK.png

  4. 創建Android App
    https://ithelp.ithome.com.tw/upload/images/20231008/201033655Cwf6kRTjs.png
    a. 在Cloud Messaging頁面,點擊“新增應用程序”並選擇Android。
    b. 輸入您React Native專案的包名稱。
    c. 按照指示完成設置。

  5. 下載並放置google-services.json
    在完成上述步驟後,Firebase會提供一個名為google-services.json的配置文件。
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365p6dFRZvseq.png
    下載此文件並將其放入React Native專案的android/app 目錄下。

  6. Firebase SDK配置
    a. android\build.gradle
    dependencies中加入

    classpath('com.google.gms:google-services:4.3.3')
    

    b. android\app\build.gradle
    最上方加入
    apply plugin: 'com.google.gms.google-services'

  7. 檢查AndroidManifest.xml的package名稱
    為確保配置正確,我們打開 android/app/src/main/AndroidManifest.xml 文件,查找開頭的 <manifest>標籤>,確認package和你剛剛在第四步設置的專案包名稱一致

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.rnhello">
    

    如果運行時還是有出現No matching client found for package name的錯誤,檢查android/app/build.gradle 中的 applicationId 有沒有和package名一致

  8. 發送第一則消息
    a. 點擊 建立第一個廣告活動
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365WTzNPXP7X5.png

    b. 我們選擇Firebase通知消息
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365JRk5J8MXN1.png

    c. 輸入通知內容
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365Y81NZViiz0.png

    d. 選擇裝置
    https://ithelp.ithome.com.tw/upload/images/20231008/201033657go26peFsT.png

    e. 排定時間
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365GhzjDN2nOh.png

    f. 下一步,點擊審查
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365wuDWAvuhKL.png

    g. 點擊發布
    https://ithelp.ithome.com.tw/upload/images/20231008/20103365hYtsZHFzZh.png

  9. 完成!
    https://ithelp.ithome.com.tw/upload/images/20231008/201033650E7yx9ootq.png


上一篇
Day 22:本地消息推送(Android)
下一篇
Day 24:取得Apple開發者憑證
系列文
30天React Native之旅:從入門到活用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言