如何搭配前端框架設計出支援IE/Edge的網頁

隨著前端框架越來越成熟，舊版的網頁也逐漸被新技術給淘汰，但是如果產品的客戶群佔使用舊瀏覽器的用戶還是多數的話，真的要認真考慮是否要支援的議題了。

先前發表了關於判斷瀏覽器是否為IE/Edge的方式，有興趣可以參考

以下介紹的內容適用各個前端框架，這邊以React為例

小建議

1. 大部分的網站已停用TLS1.0

在2018年已宣布TLS1.0擁有危險的資安漏洞，因此大部分的網站已停止支援，光是這點，就可以說服自己的產品能夠不需要往下支援了，因為IE10以下的版本，基本上只支援TLS1.0。

請參考維基百科

2. 引導使用者安裝瀏覽器

有些使用者可能不太會用電腦，或是自己的電腦已經是古董級的，但是一直無限期的支援下去是沒有辦法的，所以我建議可以設計一些彈跳視窗引導使用者如何使用新瀏覽器，這樣也能提升產品的服務品質。

3. 目前已有不少套件支援舊版瀏覽器

儘管如此，使用上還是會有部分不支援的問題，所以在使用上需要特別注意

Edge對ES6的支援度

如果只看caniuse的話，會發現支援的程度其實蠻高的，但是神奇的是，我之前用React寫個簡單的Modal呈現在頁面，發現頁面竟然不會re-render，一打開console發現這段錯誤

unble to get property “includes” of undefined or null reference

但是打開caniuse查看，includes是有支援Edge的，有可能是import的問題。

修正Edge無法取得includes

1. 我這邊使用在package.json內的dependencies加入

"@babel/polyfill": "^7.8.3"

2. 安裝

npm install

之後就不會有這個錯誤產生了！

React本身內建react-app-polyfill支援IE

事實上React本身就有支援這個套件，但是我在使用上的時候還是會遇到相容性的問題，因此我這邊是沒有使用到它。但是有想嘗試的話，也可以使用看看。

1. 在package.json的browserslist補上ie 11（因開發環境而異）

"browserslist": [
"not ie < 11",
"not op_mini all",
"ie 11"
]

2. 安裝

npm install react-app-polyfill

3. 在index.js加入

import 'react-app-polyfill/ie11' 
import 'react-app-polyfill/stable'

4. 再來測試看看是不是想要的結果

推薦的支援IE瀏覽器方法

這邊我推薦支援舊版IE瀏覽器的方法，使用babel-polyfill。

首先請看官方網站的講解：

React 16 依賴 Map 和 Set 集合類型。如果你需要支援舊瀏覽器和設備，它們原生並沒有支援（例如 IE < 11）或是沒有兼容的實作（例如 IE 11），請考慮於應用程式加入一個全域的 polyfill，例如 core-js 或 babel-polyfill。

官方提到原生並沒有支援，所以還是建議使用其他middleware。

使用babel-polyfill的方式其實也很簡單，只要照著官方的步驟做

1. 安裝

npm install --save @babel/polyfill

2. index.js加入

import '@babel/polyfill';

理論上來說，這樣就可以用了，但是我後來請別人幫我測試舊版IE瀏覽器，發現babel還是有一些相容性問題，例如：無法支援ES6原生的fetch。

以@babel/polyfill的例子來說，經過測試只解決了includes的問題

所以這邊我要再另外特別介紹支援Polyfills 的 Fetch API：Unfetch

3. 安裝Fetch API

這是一個輕量又實用的套件，最低可以支援到IE8以上的版本

以下是截自作者的介紹

安裝方式也非常簡單

3.1 安裝

npm install --save unfetch

3.2 index.js加入

import 'unfetch/polyfill'

再來什麼都不用動，因為套件是globally，請參考作者這段話：

This automatically "installs" unfetch as window.fetch() if it detects Fetch isn't supported...

再來就可以用了！

後記

雖然目前沒有那個必要支援這麼多瀏覽器，但是對想要設計情境引導功能的開發者來說，蠻實用的，這邊推薦給大家一些設計上的建議。