我覺得一個好的App是需要被提醒點開他的,現在好用的小工具太多,多到我本來要記得使用,但真的不是不需要,也不是App不夠好,是真的忘記了。
如果使用者忘記使用它,那它的價值也無法體現,在資訊爆炸的時代,該如何溫柔地提醒使用者:「嘿,今天的靈感來源已為你準備好了,快來點開我吧!(催眠中)」?如何跨越App關閉的鴻溝,主動與使用者建立聯繫?
答案就是推播通知 (Push Notification)。今天將整合Google強大且免費的跨平台訊息服務——Firebase Cloud Messaging (FCM)。我們將完成從Firebase專案設定、Flutter App整合,一直到最終從我們的 n8n 後端觸發推播的完整流程,讓我們的App真正學會「主動喚醒」使用者。
第一部分:Flutter端與Firebase的整合
這部分的設定稍微繁瑣,因为它涉及到Firebase雲端平台、Android/iOS 原生設定以及Flutter程式碼的串接。請跟著以下步驟,一步步完成。
Step1. 建立Firebase專案
前往Firebase Console,使用你的Google帳號登入。點擊「新增專案」,跟隨指引建立一個新的Firebase專案,名稱可自訂。
Step2. 使用FlutterFire CLI自動設定
過去手動設定Firebase相當繁瑣,但現在官方提供了方便好用的命令列工具FlutterFire CLI,可以自動完成大部分工作。
dart pub global activate flutterfire_cli
flutterfire configure
它會引導你登入 Google 帳號,選擇剛才建立的 Firebase 專案,並自動為Android和iOS平台進行註冊,最後會產生一個至關重要的設定檔lib/firebase_options.dart。
Step3. 安裝FCM相關套件
安裝兩個核心的Firebase套件:flutter pub add firebase_core firebase_messaging
Step4. 在App中初始化Firebase
打開lib/main.dart,在 main 函式中,runApp 之前,加入 Firebase 的初始化程式碼。
import 'package.flutter/material.dart';
import 'package:firebase_core/firebase_core.dart'; // 引入 core
import 'firebase_options.dart'; // 引入自動產生的設定檔
// ... 其他 import
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化 Firebase
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
await Hive.initFlutter(...); // Hive 的初始化保留
// ... 其他設定
runApp(...);
}
Step5. 請求推播權限
在App啟動時,需要向使用者請求接收通知的權限,這在iOS上是必要的步驟。
在main函式中加入以下程式碼:
// 在 main.dart 頂部引入
import 'package:firebase_messaging/firebase_messaging.dart';
// ... in main() after Firebase.initializeApp()
FirebaseMessaging messaging = FirebaseMessaging.instance;
NotificationSettings settings = await messaging.requestPermission(
alert: true,
announcement: false,
badge: true,
carPlay: false,
criticalAlert: false,
provisional: false,
sound: true,
);
debugPrint('使用者授予權限: ${settings.authorizationStatus}');
Step6. 取得並印出FCM Token
要向特定裝置發送通知,我們需要一個獨一無二的識別碼,這就是FCM Token。我們先將它印出來,以便後續在 n8n 中進行測試。
// ... in main() after requestPermission()
final fcmToken = await FirebaseMessaging.instance.getToken();
debugPrint('FCM Token: $fcmToken');
現在,在真實的手機上 (模擬器可能無法正常接收推播) 執行你的App,然後在VS Code或Android Studio的 Console中找到這串長長的Token,並將它複製下來,接下來馬上就會用到。
第二部分:從n8n後端觸發推播
當n8n工作流成功產生每日靈感後,就應該觸發一次推播。這需要透過n8n的HTTP Request節點來呼叫Google 的FCM API。
整合測試
在真實產品中,需要一個資料庫來儲存所有使用者的FCM Token,並在發送時遍歷這個列表。但在我們的MVP中,成功地向單一測試裝置發送通知,已經完成了一個重要的里程碑。
推播通知解決了「如何喚醒使用者」的問題。但還能再想想,還能做得更好嗎?是否能在使用者打開App之前,就悄悄地在背景為他們準備好最新的內容,讓App一打開就是最新狀態?
明天將探索Flutter的背景作業魔法:workmanager,讓App知道如何在背景中自動執行任務~明天見:)
【哈囉你好:)感謝你的閱讀!其他我會常出沒的地方:Threads】