這篇文章將完成把 Android 裝置註冊到 Azure 通知中樞的程式碼。
前置準備
在這篇文章中,你需要事先準備
- 完成 【Expo Android 推播整合 02】 專案建置:設定 Firebase、Azure 中的所有設定和安裝。
- Ajax 套件,ex:這篇範例是使用 Axios。
這篇文章將完成把 Android 裝置註冊到 Azure 通知中樞的程式碼。
在這篇文章中,你需要事先準備
Pagintaion 套件 + Axios API 請求範例
Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。我的 Vue3 專題中也有使用這套套件呈現,但因為 Swiper.js Vue 版是由 Composition API 寫成,但我當時只會 Options API,花了很多時間了解撰寫方式。今天目標就是介紹 Swiper.js 在 Vue3 Options API 的用法和元件化小撇步。
以下流程是針對 Android 推播通知設定,請在 windows 電腦上執行!
這次的主題是 Expo 串接 Firebase 和 Azure,Azure 運行流程、編譯 App 和除錯會放在之後的文章。
在這篇文章中,你需要事先準備
npx create-expo-app@latest
npx 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 |