如何搭配前端框架設計出支援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 依賴 MapSet 集合類型。如果你需要支援舊瀏覽器和設備,它們原生並沒有支援(例如 IE < 11)或是沒有兼容的實作(例如 IE 11),請考慮於應用程式加入一個全域的 polyfill,例如 core-jsbabel-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...

再來就可以用了!

後記

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

--

--

--

https://blog.yyisyou.tw/ — Web developer, Travel

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yang Yang

Yang Yang

https://blog.yyisyou.tw/ — Web developer, Travel

More from Medium

Perfection is half Infinity and half Singularity

The Glory in the Ordinary

Pro-Life Choices

Thoughts from a Burnt Out Mental Health Worker