以下流程是針對 Android 推播通知設定，請在 windows 電腦上執行！
這次的主題是 Expo 串接 Firebase 和 Azure，Azure 運行流程、編譯 App 和除錯會放在之後的文章。
在這篇文章中，你需要事先準備
npx create-expo-app@latestnpx expo prebuild 生成 android 資料夾android package 名稱在 Firebase 建立一個新專案後，新增 Android 應用程式
在進入與 Firebase 和 Azure 串聯之前，這篇文章會先做知識前導。
Expo 本身就存有自己的推播通知模組 Expo Notifications，但我們也可以串聯其他具推播功能的平台。兩種做法也關乎我們要使用哪一種 Workflow，關於 Workflow 可以閱讀文章 「React Native / Expo Workflow」。
| 功能 / 能力 | Managed Workflow （EAS + Expo Notifications） |
Bare Workflow （原生整合 FCM / APNs） |
|---|---|---|
| 工具 | Expo API 內建支援 不須再分 FCM / APNs |
自行串接 SDK，例如 Firebase |
| 工具運作方式 | 使用 ExponentPushToken |
第三方 SDK 產生的 Device Token |
| 基本推播通知 （標題、內文、點擊導頁） |
支援 | 支援 |
| 富通知 （圖片、大圖、互動按鈕） |
支援有限 | 支援 |
| 靜默通知 （Silent / Background Data） |
部分支援 | 支援 |
| 整合第三方服務 （Azure / OneSignal） |
不支援 | 可串接 REST API / SDK |
| 原生推播設定控制 （頻道、分類、優先級） |
部分支援，依 JS 設定 | 支援 |
| 整合與開發難度 | 最簡單、快速 | 較高，需原生知識 |
本篇主題是 React Native 小介紹。
因為先前在測試 Ionic + PWA 開發，對相機功能實在太失望，結果現在我開始用 React Native / Expo 了。
如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App，可以先閱讀 App 種類概述 。
1 | npx create-expo-app@latest |
此篇作為 此部落格 App 技術文 的前導介紹，概述 App 種類差異。
開發 App 的軟體有很多種，例如 Ionic、React Native、Flutter…。
不過我們在決定要使用哪一套工具前，可以先了解 App 要使用多少手機原生功能、人力技術、效能等資訊。
| 項目 | Native | Cross-platform | Hybrid | Web App / PWA |
|---|---|---|---|---|
| 使用技術 | 原生語言 | JS/Dart + 框架 | Web 技術 + WebView | 純 Web 技術 |
| 使用框架／平台 | Xcode、 Android Studio |
React Native、 Flutter、Xamarin |
Ionic、Cordova、Capacitor | Vue.js、React.js、Angular 以上搭配 PWA 支援 |
| 原生功能支援 | 完整 | 高 | 有限 | 有限 |
| 安裝方式 | App Store、 Google Play |
App Store、 Google Play |
App Store、 Google Play |
免安裝，直接開啟 |
| 效能 | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ | ⭐ |
| 推播通知支援 | 支援 | 支援 | 需設定 plugin | 限支援 PWA 瀏覽器 |
| 離線功能 | 支援 | 支援 | 視 plugin 支援 | 僅部分瀏覽器支援 |
| 學習曲線 | 高 | 中 | 相對低 | 低 |
關於 PWA 對原生功能支援的「有限」程度，請閱讀 PWA介紹 (Progressive Web App)，優、缺點及範例介紹。
因為我是 Web 開發者，最近才開始接觸 App 開發，知識認知上還是有限度。
附上更深入比較的文章提供參考。
更多關於我的研究，可藉由 tag: App 主題閱讀。
最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以
Vite 6 + React 18.3 + Tailwind 4.0 + prettier-plugin-tailwindcss 0.6.11安裝做記錄：
React 19 發布於 2024 年 12 月，但直到現在 2025 年 1 月底，還是有使用 create-react-app 安裝出錯的問題。
根據 網友解法 都是退回 18，或是用 Vite 安裝 React 18，所以這篇文章才會用這個框架組合。
PWA（Progressive Web App） 是一種可以在手機上偽裝成 APP 的網頁瀏覽技術，它不用上架到 store，很適合行銷工具使用，像是 Youtube （影音社交媒體）、Spotify（音樂串流平台）、Visit Japan Web（入境日本填寫資料）、一些個人品牌電商網站，都利用這個技術。
那麼如果作為開發者呢？我們會看到 PWA 對手機原生功能支援有限的文章，但不知道實際表現到底如何。以下文章是使用 Ionic Angular PWA 在各載體中，對於相機功能的比較紀錄：
在尋找解法時發現其他情境也可能跳出相同錯誤，此文針對 Ionic Angular 在安裝 PWA 功能報錯的訊息解決。
目前我的環境是以下版本，曾經安裝過最新的 angular/cli 19 又降版
1 | @ionic/cli: 7.2.0 |
依照 Ionic Angular 官方文件 安裝 PWA 的指示
ng add @angular/pwa
終端機會跳出請使用 "$id" 的提示
1 | NOT SUPPORTED: keyword "id", use "$id" for shema ID |
最近在研究做 APP 的方法，以 web 前端開發者的身分來說，第一優先會先選擇能用 HTML 和 JS 的框架出發。以下紀錄我使用 Ionic Angular 的使用紀錄：
在以下環境下，可能發生 R3InjectorError(Platform: core) 報錯
1 | @ionic/cli: 7.2.0 |
完整錯誤訊息如果是經由 Android Studio CatLog 查看，大概會是這樣：
1 | NullInjectorError: R3InjectorError(Platform: core)[t -> Ir] |
