Skip to main content

功能偵測跟瀏覽器填充工具

一、功能偵測（Feature Detection）​

概念​

功能偵測是先檢查瀏覽器是否支援某個特定功能，再決定是否使用它，而不是直接依賴瀏覽器的名稱或版本。

為什麼需要​

瀏覽器版本繁多，僅依賴「User-Agent 判斷瀏覽器」的方法不可靠。功能偵測能確保程式碼只在支援的環境下執行，減少錯誤。

常見做法​

  1. 原生 JS 檢查
if ('fetch' in window) {
  // 瀏覽器支援 fetch API
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
} else {
  // 不支援 fetch，使用傳統 XMLHttpRequest 或其他替代方案
  console.log('瀏覽器不支援 fetch');
}
  1. 使用功能偵測函式庫
  • Modernizr：最知名的 JS 功能偵測庫，能幫你檢查 HTML5、CSS3 等各種功能。
if (Modernizr.flexbox) {
  console.log('支援 flexbox');
} else {
  console.log('不支援 flexbox');
}

二、瀏覽器填充工具（Polyfill）​

概念​

Polyfill 是一段程式碼或函式庫，提供瀏覽器原生不支援的功能，讓開發者可以使用新 API 或標準功能，即使瀏覽器舊版本也能正常運作。

舉例​

  1. ES6 Promise
  • 舊瀏覽器不支援 Promise，我們可以引入 polyfill：
<script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>

這樣即便瀏覽器不支援原生 Promise，也能正常使用：

new Promise((resolve) => resolve('Hello Polyfill'))
  .then(msg => console.log(msg));
  1. Fetch API
import 'whatwg-fetch';

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

與功能偵測的關係​

  • 功能偵測通常先檢查瀏覽器是否支援某個功能。

  • 若不支援，再使用 polyfill 來「填補缺失」，確保程式碼能運作。

三、實務建議​

  1. 盡量使用功能偵測
    不要依賴瀏覽器名稱或版本判斷，因為可能會錯過某些支援的功能。

  2. 必要時加入 Polyfill
    對於核心功能且必須支援舊瀏覽器時，才使用 polyfill，避免增加不必要的檔案大小。

  3. 配合打包工具
    在 React、Vite 或 Webpack 專案中，可以使用 core-js 或 @babel/preset-env 自動加入 polyfill，根據目標瀏覽器自動選擇。