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

前言

隨著前端框架越來越成熟，舊版的網頁也逐漸被新技術給淘汰，但是如果產品的客戶群佔使用舊瀏覽器的用戶還是多數的話，真的要認真考慮是否要支援的議題了。
先前發表了關於判斷瀏覽器是否為IE/Edge的方式，有興趣可以參考
以下介紹的內容適用各個前端框架，這邊以React為例

小建議

大部分的網站已停用TLS1.0
在2018年已宣布TLS1.0擁有危險的資安漏洞，因此大部分的網站已停止支援，光是這點，就可以說服自己的產品能夠不需要往下支援了，因為IE10以下的版本，基本上只支援TLS1.0。
請參考維基百科
引導使用者安裝瀏覽器
有些使用者可能不太會用電腦，或是自己的電腦已經是古董級的，但是一直無限期的支援下去是沒有辦法的，所以我建議可以設計一些彈跳視窗引導使用者如何使用新瀏覽器，這樣也能提升產品的服務品質。
目前已有不少套件支援舊版瀏覽器
儘管如此，使用上還是會有部分不支援的問題，所以在使用上需要特別注意

Edge對ES6的支援度

如果只看caniuse的話，會發現支援的程度其實蠻高的，但是神奇的是，我之前用React寫個簡單的Modal呈現在頁面，發現頁面竟然不會re-render，一打開console發現這段錯誤
unble to get property “includes” of undefined or null reference
但是打開caniuse查看，includes是有支援Edge的，有可能是import的問題。

修正Edge無法取得includes

我這邊使用在package.json內的dependencies加入
“@babel/polyfill”: “^7.8.3”
安裝
npm install
之後就不會有這個錯誤產生了！
React本身內建react-app-polyfill支援IE
事實上React本身就有支援這個套件，但是我在使用上的時候還是會遇到相容性的問題，因此我這邊是沒有使用到它。但是有想嘗試的話，也可以使用看看。
在package.json的browserslist補上ie 11（因開發環境而異）
1
2
3
4
5
"browserslist": [
"not ie < 11",
"not op_mini all",
"ie 11"
]

在index.js加入

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

再來測試看看是不是想要的結果
推薦的支援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
index.js加入
1
import '@babel/polyfill';
理論上來說，這樣就可以用了，但是我後來請別人幫我測試舊版IE瀏覽器，發現babel還是有一些相容性問題，例如：無法支援ES6原生的fetch。
以@babel/polyfill的例子來說，經過測試只解決了includes的問題
所以這邊我要再另外特別介紹支援Polyfills 的 Fetch API：Unfetch
安裝Fetch API
這是一個輕量又實用的套件，最低可以支援到IE8以上的版本
以下是截自作者的介紹

安裝方式也非常簡單
1 安裝
1
npm install --save unfetch