
當我們打開瀏覽器、輸入網址、看到一個漂亮的頁面時,你知道背後的技術與架構是什麼嗎?
想學網站開發,首先就要理解這些關鍵基本概念!
本篇將從網站與網頁的基礎定義開始,一路講到網站架構演進、Web App 與原生 App 的比較,最後再簡單介紹網頁是如何在網路上被傳送與執行。讓你一次掌握核心知識!
1. 網站與網頁是什麼?差在哪裡?
網頁 Web Page
網頁是較小的單位,就是你目前正在看的這個畫面。
每個網頁都有自己的網址(URL),內容通常是文字、圖片、影片組成的展示頁面。
例子:
關於我們 / 聯絡我們 / 服務內容等頁面
網站 Web Site
網站由多個網頁組成,透過域名(Domain)作為主要入口,依靠網路主機空間進行運作。
例子:
google.com、youtube.com、wingzero.tw
URL(網址)
全名:統一資源定位符
格式通常包含伺服器位置與檔案路徑,例如:
https://example.com/products?id=10
簡單說,有 URL 才找得到網頁。
2. Website vs Web App vs 原生 App
到底 Web App 是什麼?一句話解釋:
Web App = 不用下載 + 像 App 的網站
| 比較項目 | 靜態網站 Website | Web App | 原生 App |
|---|---|---|---|
| 核心目標 | 「看」資訊 | 「用」功能 | 高效使用手機硬體 |
| 安裝方式 | 不需安裝 | 不需安裝 | 商店下載與安裝 |
| 開發成本 | 最低 | 中等,通常跨平台 | 最高(iOS/Android 各一套) |
| 更新方式 | 重新整理即更新 | 用戶永遠最新版本 | 上架審核且須下載更新 |
| 硬體取用 | 幾乎無 | 部分支持 | 支援最完整(像相機、NFC) |
PWA:Web App 的進化型
PWA(漸進式網頁應用程式)雖然是網站,但可以:
加到手機主畫面
支援離線使用
推播通知
但 iOS 支援較受限
例如:推播功能很晚才支援(iOS 16.4 後)
綜合比較後可以發現,靜態網站、Web App 與原生 App 各有其定位與優勢,沒有絕對的好與壞。
對多數想提供線上服務、但預算與人力有限的新創或公司而言,Web App 是進可攻、退可守的策略選項——可以先用較低成本快速推出 MVP(最小可行產品)並驗證市場反饋。
只有當產品對效能要求極高,或必須取用手機底層硬體能力(例如藍牙、NFC、Face ID),才需要投入更高開發成本考慮原生 App。