iT邦幫忙

2026 iThome 鐵人賽

DAY 2
0
Software Development

SyncETA 開發日記:手把手打造你的智慧出發時間推薦 PWA系列 第 2

【Day 02】PWA 是什麼?為何選它當開發框架

  • 分享至 

  • xImage
  •  

昨天說明了 SyncETA Lite 想解決的問題,今天來談談我們的技術選型:為什麼是 PWA(Progressive Web App,漸進式網頁應用),而不是原生 App?


PWA 的三個關鍵優勢

  1. 免上架、免審核: 原生 App 要上架 App Store / Google Play,審核往往要好幾天,對於一個實驗性、快速迭代的專案來說太慢。PWA 只要一個網址就能使用。
  2. 可安裝到主畫面: 使用者在瀏覽器打開網頁後,可以選擇「加入主畫面」,之後就像原生 App 一樣有獨立圖示、全螢幕體驗,不會有瀏覽器網址列。
  3. 離線能力: 透過 Service Worker,PWA 可以快取資料,在網路不穩定時仍提供部分功能(例如上次查詢過的路線資訊)。這對「通勤」情境特別重要,因為捷運地下化路段訊號常常不穩定。

PWA vs 原生 App vs 一般網頁

特性 一般網頁 PWA 原生App
需要上架
可安裝到主畫面
離線使用 是(部分)
推播通知
開發成本

對於一個學生專案/研究原型來說,PWA 是甜蜜點:開發成本接近網頁,但體驗接近原生 App。這也是我在做碩論相關系統時選擇 PWA 的原因之一——降低受測者的安裝門檻,對使用者研究招募也很友善。


今天的小結

PWA 本質上就是一個「加了三樣東西」的網頁:

  • HTTPS: 安全連線是 PWA 的基本要求。
  • Web App Manifest: 一個 JSON 檔案,描述你的 App 名稱、圖示、啟動畫面等。
  • Service Worker: 一段在瀏覽器背景執行的 JavaScript,負責快取、離線、推播等能力。

明天我們就要動手,把開發環境建起來,並規劃好整個 syncetalite-pwa/ 專案的資料夾結構。


上一篇
【Day 01】為什麼要做「智慧出發時間推薦」?
下一篇
【Day 03】開發環境建置:專案初始化與資料夾結構規劃
系列文
SyncETA 開發日記:手把手打造你的智慧出發時間推薦 PWA8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言