[Nuxt3] 如何支援 iOS13 InApp WebView

閱讀時間約 5 分鐘

前言

近期用 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 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 configuration

總結

比較驚訝的是現在新的框架更傾向支援瀏覽器的最新版本,因為以前的框架都是主打支援度。

我想應該是為了加速技術的推進,畢竟這些都會影響到 資安、版本支援的開發成本…等等。

最後,雖然最後只是加了短短幾行的設定,過程中真的找了很久 ( Nuxt3 文件真的很不完整,看到不少人抱怨XD)。

希望內容能幫助到你,有任何問題還請提出糾正~~

參考

Announcing 3.0 · Nuxt

Nuxt Configuration Reference · Nuxt

Building for Production | Vite (vitejs.dev)

1會員
4內容數
紀錄閱讀Vue3框架思維、設計實戰的過程
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
長期支援和維護是台灣軟體程式開發項目的不可或缺部分。透過建立支援團隊、定期升級、安全性審查和使用者培訓,您可以確保軟體長期運作並能夠應對未來的挑戰。這將有助於確保您的投資得到最大的價值,並持續滿足用戶需求。
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
Thumbnail
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
作者身為前參謀總長,寫的這本書幾乎涵蓋了臺灣國防事務的所有層面,對於想了解我國國防軍事的讀者來說是很好入門的一本書。 因為我也是第一次讀這種軍事相關的書籍,所以就像作者所說,將重點放在國家安全及臺灣是否會發生戰爭上。
Thumbnail
心想事成是每個人都想達到的狀態,但為什麼我們每次都和願望失之交臂?為什麼好像越渴望到最後卻離它越遠?本書用神經醫學及心理學的角度教你如何突破這種窘境、如何活出你理想中的人生。
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
這個展覽的名稱、海報圖片與視覺色系既熟悉又陌生,讓我很難一眼看透,於是決定動身探訪一下(跳!)。原來展名並非來自電影......
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
長期支援和維護是台灣軟體程式開發項目的不可或缺部分。透過建立支援團隊、定期升級、安全性審查和使用者培訓,您可以確保軟體長期運作並能夠應對未來的挑戰。這將有助於確保您的投資得到最大的價值,並持續滿足用戶需求。
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
Thumbnail
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
作者身為前參謀總長,寫的這本書幾乎涵蓋了臺灣國防事務的所有層面,對於想了解我國國防軍事的讀者來說是很好入門的一本書。 因為我也是第一次讀這種軍事相關的書籍,所以就像作者所說,將重點放在國家安全及臺灣是否會發生戰爭上。
Thumbnail
心想事成是每個人都想達到的狀態,但為什麼我們每次都和願望失之交臂?為什麼好像越渴望到最後卻離它越遠?本書用神經醫學及心理學的角度教你如何突破這種窘境、如何活出你理想中的人生。
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
這個展覽的名稱、海報圖片與視覺色系既熟悉又陌生,讓我很難一眼看透,於是決定動身探訪一下(跳!)。原來展名並非來自電影......