在開發 Global 的網頁的時候，通常會去評估各種網頁的支援度，如果沒有通常會請放 Upgrade your Browser.

因為 UC Browser 在中國大陸其實還是有一些比較舊的手機在使用，剛好在開發 Vue 的時候遇到一些問題順便記錄下來

使用的 Framework and config

• Vue 3 with Vite
• Tailwind CSS 3 (Dark Mode)

想要支援舊版的 UC Browsr

瀏覽器支援度

一開始以為是 ES module 導致 Build 出來有問題
ES Module

Dynamic Import

所以針對這點我們有安裝了plugin-legacy plugin

但是還是遇到問題，基本上 UC 瀏覽器 13 以上 legacy plugin 才有用，但是當下發現 CSS 有跑版.. 然後回頭去看發現有這行敘述

Now instead of dark:{class} classes being applied based on prefers-color-scheme,
they will be applied whenever dark class is present earlier in the HTML tree.

再回頭去查詢發現 其實到最新版本的 UC 瀏覽器才有支援這個設定….
prefers-color-scheme

心得

Caniuse 的資訊不是最新的 實際支援的瀏覽器還是需要實測才知道… 如果用比較新的 framework 之類還是要考慮舊版的瀏覽器支援度
不然這個畫面都會是白色的.

在開發 App 的過程中，最常會遇到的幾個問題是

1. 在 Native App 中 鑲嵌的 Api Request 是否有送出到 Server Side
2. 在 Native App 中 發送 Request 的格式以及原始資料是什麼?
   (假定你想要觀看別人的 App 運作)

PreRequires

1. Charles 攔截 Http Request
2. Wifi with App Device

Steps

打開 Charles 後

1. 先去 Proxy =>Proxy Setting
   指定你想要的 port 以及把設定都打勾

   

2. Help=> Local IP Address
   確定自己的 IP

   

3. 回到手機 填上你的 Proxy 根據 1 &2 的 ip & port

   

4. 接著應該會跳出下圖 點選 Allow (如果選錯的話請重開 Charles 並且讓手機重新連線)

   

5. 那接著就可以選取你手機上面的 App 去觀察 Request

   

6. 接著去 Charles 這裡就可以點開 Request 觀察

   

心得

從一些小地方可以看到 在 App 開發中 為了讓 User 不一直重複登入

會發給類似 Token 的東西 以及 Device ID 去判斷此帳號是否登入

我們也可以透過 Postman ….方式直接拿取 App 背後的 Api 資訊