這篇文章將完成把 Android 裝置註冊到 Azure 通知中樞的程式碼。
前置準備
在這篇文章中，你需要事先準備
- 完成 【Expo Android 推播整合 02】 專案建置：設定 Firebase、Azure 中的所有設定和安裝。
- Ajax 套件，ex：這篇範例是使用 Axios。
【套件筆記 - JS】頁碼 Pagination.js
Pagintaion 套件 + Axios API 請求範例
【套件筆記 - Vue】輪播 Swiper.js
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。我的 Vue3 專題中也有使用這套套件呈現，但因為 Swiper.js Vue 版是由 Composition API 寫成，但我當時只會 Options API，花了很多時間了解撰寫方式。今天目標就是介紹 Swiper.js 在 Vue3 Options API 的用法和元件化小撇步。
【Expo Android 推播整合 02】 專案建置：設定 Firebase、Azure
以下流程是針對 Android 推播通知設定，請在 windows 電腦上執行！
這次的主題是 Expo 串接 Firebase 和 Azure，Azure 運行流程、編譯 App 和除錯會放在之後的文章。
前置準備
在這篇文章中，你需要事先準備
- Google 帳號
- Firebase 帳號
- Azure 帳號
- 一個 React Native / Expo 專案（安裝方法參考）
- 安裝指令
npx create-expo-app@latest - 使用
npx expo prebuild生成 android 資料夾 - 修改專案 app.json 檔案中的
android package名稱
- 安裝指令
- 安裝 Android Studio
Firebase 設定
1. 建立 Firebase Android 應用程式
在 Firebase 建立一個新專案後，新增 Android 應用程式
【Expo Android 推播整合 01】 基礎概念：認識 Firebase 與 Azure Notification
在進入與 Firebase 和 Azure 串聯之前，這篇文章會先做知識前導。
React Native / Expo 推播通知
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 / Expo 介紹
本篇主題是 React Native 小介紹。
因為先前在測試 Ionic + PWA 開發，對相機功能實在太失望，結果現在我開始用 React Native / Expo 了。
如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App，可以先閱讀 App 種類概述 。
React Native & Expo 概述
- React Native 是一個由 Facebook 開發的 開源框架，讓開發者可以使用 JavaScript（通常是搭配 React）來開發 原生 iOS 和 Android App。它會將 JS/React 程式碼轉換為原生的 UI 元件。
- Expo 是一個基於 React Native 的應用程式開發平台，提供即時預覽（Expo Go）和線上建置（EAS build）、原生模組功能（推播、相機、GPS）等好用功能。
安裝 React Native & Expo
- 開啟 VS code 終端機輸入安裝指令
1 | npx create-expo-app@latest |
App 種類概述
此篇作為 此部落格 App 技術文 的前導介紹，概述 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 主題閱讀。
Vite React + Tailwind 4.0 + prettier-plugin-tailwindcss 安裝
最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以
Vite 6 + React 18.3 + Tailwind 4.0 + prettier-plugin-tailwindcss 0.6.11安裝做記錄：
▍ 為什麼不是直接安裝 React 19
React 19 發布於 2024 年 12 月，但直到現在 2025 年 1 月底，還是有使用 create-react-app 安裝出錯的問題。
根據 網友解法 都是退回 18，或是用 Vite 安裝 React 18，所以這篇文章才會用這個框架組合。
Ionic 7 + Angular：PWA camera 相機功能比較
PWA（Progressive Web App） 是一種可以在手機上偽裝成 APP 的網頁瀏覽技術，它不用上架到 store，很適合行銷工具使用，像是 Youtube （影音社交媒體）、Spotify（音樂串流平台）、Visit Japan Web（入境日本填寫資料）、一些個人品牌電商網站，都利用這個技術。
那麼如果作為開發者呢？我們會看到 PWA 對手機原生功能支援有限的文章，但不知道實際表現到底如何。以下文章是使用 Ionic Angular PWA 在各載體中，對於相機功能的比較紀錄：
▍ PWA 相機 & 手機相機，功能比較
Ionic 7 + Angular：除錯 NOT SUPPORTED: use "$id" for schema ID
在尋找解法時發現其他情境也可能跳出相同錯誤，此文針對 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 |
