前言
對一般使用者 (end user) 來說，瀏覽器 (browser) 是很稀鬆平常的軟體，就是一個用來上網看網頁的工具。瀏覽器本身是免費的，如果對現有的瀏覽器不滿意，上網抓另一個瀏覽器也相當簡單。
但對網頁程式開發者來說，瀏覽器是相當重要的軟體，因為瀏覽器可視為網頁程式的發佈平台 (deployment platform)。網頁程式是否能順利執行，還得看瀏覽器支援的程度。
對於一般使用者層級的軟體 (end-user software) 來說，網頁程式 (web application) 和行動程式 (mobile application) 是兩種最重要的載體。當我們透過上網或下載 app 能解決的問題，就不會開桌面軟體 (desktop software) 來用。
瀏覽器有那些功能？
瀏覽器內部其實做了很多事，讓網頁程式能順利執行，包括：
- 解析 HTML 文件以決定網頁的內容 (content) 和版面 (layout)
- 解析 CSS 樣式表以決定網頁的外觀和版面
- 解析和處理 JavaScript 程式碼，讓網頁具有動態行為，又可分為
- 和頁面相關的網頁 API
- 和頁面無關的網頁 API
- 處理多媒體檔案，包括圖片 (image)、影片 (video)、聲音 (audio) 等
此外，由於使用者和開發者對網頁程式的需求增加，瀏覽器得不斷地新增功能才能滿足不同的應用情境。What Web Can Do Today 網站列出使用者目前的瀏覽器所能達到的新穎特性。這些特性都是先前沒有的新功能。
雖然我們使用 JavaScript 去呼叫網頁 API，但這些 API 實際上是以 C、C++、Rust 等語言所寫的程式來執行各個相關的任務。只是這些程式開放給 JavaScript 用的 API，所以我們可以用 JavaScript 去呼叫這些功能。這些實作的內部是瀏覽器供應商 (browser vendor) 的工作，網頁程式設計師甚少需要去關心這些細節。
全球資訊網在多年發展下來，已經是全世界流通最廣的應用程式載體。不像行動軟體有集中管理的軟體市集 (software market)，全球資訊網不受單一公司把持，只要有好的想法，每個開發團隊都可以試著把這些相法做成網頁程式。
JavaScript 是前端技術的實質 (de facto) 標準
HTML 文件是靜態的內容，CSS 樣式表是靜態的外觀設定，兩者都沒有應用程式的特性。而 JavaScript 則是讓網頁從靜態文件變成動態應用程式的程式語言。
雖然在前端技術的發展中，曾經有多個 JavaScript 以外的前端技術，這些技術最後都未能存活下來。Flash 曾經一度很成功，但最後因種種問題，連 Flash 的老東家 Adobe 都放棄 Flash 在網頁前端程式的應用。目前來說，JavaScript 仍是網頁程式的實質標準。
由於 JavaScript 本身在設計上的缺陷，Google 曾經想用 Dart 來取代 JavaScript。但網頁技術由單一科技公司所把持的年代已經結束了，這個提案最後就無疾而終。雖然 JavaScript 本身不完美，但 JavaScript 已經累積了許多社群資源，而且也是各大科技巨頭所能接受的共識。
WebAssembly 對網頁程式帶來的改進
我們先前提過，JavaScript 是網頁程式的實質標準。除了 JavaScript 外，WebAssembly 也是值得關注的技術。WebAssembly 本身是中性的二進位格式，已經在現代瀏覽器中獲得支援 (參考這裡)。
WebAssembly 的意義在於網頁程式所用的程式語言不再受限於 JavaScript。我們可以用 C、C++、Rust 或其他語言寫網頁程式，再用特定編譯器編譯成 WebAssembly 的二進位格式，就可以在瀏覽器中執行該程式。
即使 WebAssembly 出現，JavaScript 也不會完全消失 (參考 WebAssembly 的 FAQ)。現階段來說，WebAssembly 和 JavaScript 是互補的角色。網頁程式的 UI 仍然是由 JavaScript 負責，而 WebAssembly 則是在關鍵步驟加強網頁程式的運算速度，或是操控畫布元素 (canvas) 相關的功能。
如何確認瀏覽器的網頁 API？
既然瀏覽器是網頁程式的發布平台，確認瀏覽器可用的網頁 API 是相當重要的任務。由於發佈網頁程式時，至少要考慮四大主流瀏覽器 (Chrome, Safari, Firefox, Edge)，除此之外，視專案需求還可能得支援其他瀏覽器。
網路上有數個瀏覽器 API 的線上資料庫，可以簡化資料查詢的動作：
MDN 是 Mozilla 基金會的官方網站，算是網頁技術的綜合教學網站。在每個 API 的教學頁面的末端會附上該 API 的瀏覽器相容性的表格，可用來確認該 API 在目標瀏覽器上是否可用。MDN 的頁面有多種語系 (locale) 的版本，建議一律切到英文 (en-US) 版本的頁面，以取得最新的資訊。
Can I Use 則是另一個查網頁 API 的網站，不會有 API 的教學，但使用介面比較簡潔。
由於網頁 API 時常會變動，實體書籍的資料很容易過時，不建議為了查詢網頁 API 購買實體書籍。
該支援那些瀏覽器？
筆者以為，每個網頁程式都應該支援 Chrome、Safari、Firefox、Edge 等四大瀏覽器，再加上行動裝置上的 Chrome 和 Safari，這六種瀏覽器應足以涵蓋大部分的使用者。至於是否要支援其他的瀏覽器，則視專案本身的需求而定。
現代瀏覽器多採滾動更新 (evergreen) 的升級模式，所以不用刻意找很舊版本的瀏覽器來測相容性，除非專案本身有特殊需求。一般來說，只要測最後兩個主版本號的瀏覽器即可。
瀏覽器支援度並不是越多越好。為了刻意支援 Internet Explorer (IE) 等舊軟體 (legacy software)，會讓網頁技術的選擇受到額外的限制，專案的難度也會變高。
由於現代瀏覽器易於取得，除非客戶指定要支援 IE 或其他舊瀏覽器，不需要刻意去支援這些舊軟體。
如何測試瀏覽器相容性？
由於瀏覽器有很多種，且部分瀏覽器限定特定系統才有，是不是得買實體機器才能測瀏覽器相容性呢？其實現在有許多雲端平台可以用來測瀏覽器相容性，讓我們用相對便宜的價格來完成這項任務。
以下是一些常見的選項：
這些方案在價格上差異很大，因為不同方案所支援的特性有差。像是各方案支援的瀏覽器有所不同，使用模擬器或實體機器來跑也會有價差，有些較高檔的方案能用 Selenium 等軟體自動化測試流程等。讀者可以自己試著比較適合自己的方案。
測試瀏覽器相容性的策略
一般來說，建議在測試瀏覽器時，將其分為三級：
- A 級：要完全支援
- B 級：部分支援或不支援。對於不支援的項目要加上適當提示訊息
- C 級：可完全忽略
每個瀏覽器要列在那一級沒有標準答案，這要看專案本身的需求而定。
使用這個策略的好處是明確訂出要支援的目標瀏覽器，減少不必要的測試，節省開發者或測試者寶貴的時間。
結語
雖然網頁 (web pages) 本身是靜態文件，透過網頁 API，網頁成為網頁程式 (web applications) 的界面。瀏覽器是充滿異質性的 JavaScript 運行環境，要廣泛地支援多種瀏覽器相當困難。我們應該根據使用網頁程式的客群，來選擇網頁程式所要支援的目標瀏覽器。