如何在 React Native (Android) 中實現推播通知

有沒有想過我們從安裝的應用程式收到的通知？或者 Swiggy 或 Zomato 如何透過其創意通知激發我們在凌晨 3 點點餐？ ？

讓我們深入了解通知的概念！

什麼是通知？

通知是應用程式發送的訊息或警報，用於通知使用者有關更新、事件或操作的信息，通常在應用程式介面之外傳遞。

現在可以有兩種類型的通知，如下所示 -

推播通知

推播通知是當應用程式未在前台主動運行時從伺服器發送到應用程式的訊息或警報。它們主要用於透過發送更新、提醒或個人化內容來保持用戶的參與度。推播通知是透過作業系統服務傳遞的，例如適用於 iOS 的 Apple 推播通知服務 (APN) 或適用於 Android 的 Firebase 雲端訊息傳遞 (FCM)。

推播通知的工作原理：

1. 註冊：安裝或首次開啟應用程式時，應用程式會從作業系統的推播通知服務（APN 或 FCM）要求唯一的裝置令牌。
2. 伺服器通訊：應用程式將此令牌發送到應用程式的後端伺服器，該伺服器儲存它以供將來使用。
3. 發送通知：伺服器使用裝置令牌將通知有效負載（包含標題、訊息、操作按鈕等）傳送至推播通知服務（APNs/FCM）。
4. 傳遞：推播通知服務將訊息傳遞到對應的設備，即使應用程式未執行。

應用程式內通知

應用程式內通知是在使用者主動使用應用程式時向使用者顯示的訊息或警報。與推播通知不同，這些通知不需要伺服器幹預，而是在應用程式本身內觸發，通常是用戶操作或應用程式事件的結果。

應用內通知的工作原理：

1. 事件觸發器：當應用程式內發生特定事件（例如使用者達到里程碑或需要注意的功能）時，應用程式可以觸發應用程式內通知。
2. 顯示：通知在應用程式的 UI 中顯示為橫幅、模式或彈出窗口，指導使用者或告知他們有關事件的資訊。
3. 自訂邏輯：應用程式內通知由應用程式的程式碼直接處理，並且可以根據應用程式的內部狀態或邏輯動態顯示。

---

React Native android 應用程式中的實作：

現在我們了解了通知及其類型，是時候在您自己的 React Native 應用程式中實現該功能了。本指南僅用於在 React 原生 Android 應用程式中實現推播通知，如果您想要 iOS 或應用程式內通知，請寫下評論，我肯定會發布！

首先，我們將使用名為 OneSignal 的第三方服務。我最近發現了這個平台，並對他們提供的服務感到震驚。

關於OneSignal：

OneSignal 是一種推播通知服務，使應用程式開發人員能夠跨各種平台（包括行動應用程式、網站和電子郵件）向用戶發送有針對性的通知。它支援推播、應用程式內和 Web 通知，提供分段、自動化、A/B 測試和即時分析等功能。 OneSignal 廣泛用於透過提供易於整合的發送個人化訊息的解決方案來提高用戶參與度和保留率。他們的免費套餐包括每月 10,000 次免費電子郵件發送、無限行動推播發送、旅程工作流程、GDPR 合規性、A/B 測試

---

回到指南，因為我們已經知道推播通知需要透過 FCM（Firebase 雲端訊息傳遞）進行伺服器端處理，因此需要遵循以下步驟：

1. 設定 Firebase 項目（如果您已有 Firebase 項目，請忽略前兩個步驟）：

   • 前往 firebase 控制台並登入您的帳戶。
   • 從這裡建立一個專案並按照步驟操作
   • 建立專案後，從側邊欄轉到專案設置
   • 從欄位導覽至服務帳戶，它應該如下所示
   • 點擊產生新的私鑰，這將下載一個 json 文件，小心地將其儲存在安全的地方，我們在設定 OneSignal 時將需要它。

2. 設定 OneSignal

   • 前往 OneSignal 並建立帳戶。
   • 建立帳戶後，完成設定步驟並建立組織，現在，您將看到用於新增應用程式的頁面。
   • 在此頁面中提供您的應用程式名稱，並為我們的案例選擇 Google Android (FCM)。 然後點選設定您的平台
   • 現在您將被重定向到此頁面，我們將在其中使用在 Firebase 設定期間下載的服務帳戶 json 文件 上傳 json，然後儲存並繼續
   • 在下一頁選擇 React Native/Expo 作為目標 SDK，然後再次儲存並繼續
   • 在下一個畫面中，您將獲得應用程式 ID，這是一個機密 ID，使用此 ID 任何人都可以在您的應用程式中觸發通知，因此請小心這個秘密。

我們已經完成了 firebase 和 OneSignal 中的設置，現在剩下的唯一任務是一些代碼咖啡

將 OneSignal 新增至您的應用程式並進行配置

• 第 1 步：首先執行此命令將 OneSignal 新增至您的應用程式

                       npm i react-native-onesignal

• 第 2 步：在您的 index.js 或 App.tsx 或 App.js（以專案根目錄為準）中，匯入 OneSignal

             import { OneSignal } from 'react-native-onesignal';

並且您已新增此程式碼片段來初始化 OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

您可以將其包裝在 useEffect 掛鉤中，以便與 OneSignal 無縫整合和連接。

這將使用 OneSignal 的唯一 ID 來初始化設備，您可以在側邊欄的訂閱中進行檢查。每個初始化的設備都將使用這個唯一的 OneSignal ID 進行標識，如果您已經有用戶擁有自己的唯一 ID，您也可以使用以下程式碼片段手動設定它：

                         OneSignal.login(userId)

用戶成功訂閱後，會在儀表板中顯示如下

現在您可能會遇到一些 OneSignal 未正確使用的問題或一些嚴重錯誤，因此您可以按照以下部分來幫助我解決這些問題。

• 第 3 步：在 androidappbuild.gradle 中加入以下程式碼片段

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• 第4步：在android中為推播通知提供必要的權限，在androidappsrcmainAndroidManifest.xml中加入

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"></uses-permission>

就在應用程式標籤之前。網路權限是可選的，但因為它可能預設為啟用。

繁榮？涵蓋了實現推播通知的所有步驟，您可以從 OneSignal 儀表板本身發送測試通知。

自己嘗試一下，如果有任何疑問，可以在下面評論。關注獲取更多詳細攻略！

參考文獻：
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

編碼愉快！ ?‍?

以上是如何在 React Native (Android) 中實現推播通知的詳細內容。更多資訊請關注PHP中文網其他相關文章！