[Nuxt3] 如何支援 iOS13 InApp WebView
前言
近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。
測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD
坑
第一坑 Nuxt3 Announcing
Nuxt 3 officially supports evergreen browsers only. The "core browser set" is what we (And web.dev team) believe most developers need to support most of the time in the absence of specific constraints. It takes into account usage numbers, developer expectations, and existing support in the ecosystem. The core browser set targets the 2 most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis.
On the server side, Nuxt 3 supports Node.js 14, 16, 18, and 19 at the moment. We encourage everyone to use the latest LTS releases of Node.js, we push them once widely adopted by major deployment platforms. This means we keep supporting Node.js versions as long as they are supported by the Node.js team on a rolling basis in non-major releases of Nuxt. Since 14.x is being end-of-life soon, we highly encourage you to update to the latest 18.x whenever possible.
這是我找到 Nuxtjs 發布 Nuxt3 版本時其中一段 “The browser and Node.js support” 聲明內容，讀完前兩段我就知道我踩到坑了，而其意思大概就是說: 「我們會以支援瀏覽器最新版本為主」。所以，只好去找 Nuxt3 如何自己調整支援度的設定。
補充說明:
- Evergreen browser: 會自我升級至新版的瀏覽器 (e.g., Chrome, Edge …)
- core browser set: 針對 Chrome、Firefox 和 Edge 的最近兩個主要版本以及每年針對 Safari 進行更新
第二坑 Nuxt3 Vite Build 參數說明
Nuxt3 Configuration 官方文件中會以 Vite 的預設設定進行打包，並且不是所有 Vite 設定都支援
vite configuration
Vite 官方預設瀏覽器支援
- Firefox ≥ 78
- Safari ≥ 14
- Edge ≥ 88
- Chrome ≥ 87
官方文件: Vite default browser support
因此，最後只需要再 Nuxt3 中增加以下設定即可
// nuxt.config.js
vite : {
build: {
target: [‘safari13’, …]
}
}
<aside> 💡 這邊的 safari 版本是指 iOS版本的頭兩位數字，e.g. iOS14.xxx.xx ⇒ safari14
</aside>
補上這邊坑點， Nuxt3 Configuration Vite 參數說明中 build 參數只有 assetDir、emptyOutDir，加上前面還特別提說不是所有參數都支援，真的哭….
Nuxt3 configuration
總結
比較驚訝的是現在新的框架更傾向支援瀏覽器的最新版本，因為以前的框架都是主打支援度。
我想應該是為了加速技術的推進，畢竟這些都會影響到 資安、版本支援的開發成本…等等。
最後，雖然最後只是加了短短幾行的設定，過程中真的找了很久 ( Nuxt3 文件真的很不完整，看到不少人抱怨XD)。
希望內容能幫助到你，有任何問題還請提出糾正~~
參考
