本次為了讓技術文章較能收斂，使用 ChatGPT AI 生成下列大綱。

1. 介紹及前置準備

   • 實作目標 - 有進度條的通知畫面
   • React 的 IDE 環境建置
   • React 的 Expo 框架

2. React - Notification 基礎

   • 所需的 Library
   • 通知事件與操作
   • 自訂進階通知
   • 位於背景服務的通知

3. Kotlin - Notification 機制

   • 原生 API 介紹
   • 建立通知
   • 自訂通知 UI (含按鈕)
   • 使用 Channel 管理通知的優先程度
   • 處理使用者對通知的操作
   • 結合協程的通知處理

4. 跨平台整合

   • 使用 React Native Bridge 將資料從 React Native 傳送到 Kotlin
   • JavaScript 和 Kotlin 程式碼之間的溝通
   • 為 React Native 建立 Kotlin Module
   • 將 Kotlin 通知整合到 React Native 應用程式
   • 整合 Firebase Cloud Messaging (FCM) 以實現跨平台通知
   • 測試跨平台應用程式的通知

5. 進階應用

   • 管理 Badges (顯示通知數量小圓點)
   • 處理帶有通知的 Deep Link (深層連結)
   • 地理柵欄: 根據位置觸發通知
   • 使用 WebSocket 發送及接收即時通知

6. 效能、最佳化與最佳實踐

   • 最小化通知功能的耗電程度
   • 管理大規模通知傳送
   • 管理使用者對通知權限的同意

7. 結論及實作結果檢視

實作目標參考示意圖

資料來源：
Uber - We’re redesigning the Uber App just for you. Written by Jen You