Introduction
WWDC 23 於 06/06 隆重登場，相信大家最關切的莫過於 Vision Pro 的推出，一個全新且超級貴的的 xR 裝置究竟能激盪出多少火花？我其實不是很在乎，個人比較關切的唯有 web page 於 visionOS 下的 Safari 究竟有哪些要素需要注意，所以挑的第一個 session 便是 Meet Safari for spatial computing，讓自己可以快速地進入這嶄新的 platform。
影片中講述到這個在 visionOS 裡頭的 Safari 核心和其他平台是一樣的，並且都一樣遵循 W3C standard，我個人對於這樣的說法是存疑的！因為它當初也是說 Safari 在 iOS 以及 macOS 上的表現是一樣的，實際上更本就是放屁，有時候還會呼攏 developers 讓你以為有支援新穎的 web api，實際上更本就只是放個 key 但不具備任何功能！所以真的聽聽就好～
以下將會以記錄以理解並行的的方式來闡述筆者的理解，亦歡迎有興趣的朋友可以一起討論。
First look of Safari
如同 iOS 一樣，開啟 visionOS 後，一樣會有個 home screen 畫面，我們可以看到 Safari launch icon 於畫面上。
開啟 Safari 後，採取了 function bar 與 content 分離的樣式呈現世人，是的！前年標榜可以藉由 meta[name=theme-color] 的方式讓 web page 視野可以更加寬廣的優點已不復存，真的是話都是他們在講的，比政治人物還會唬爛～
由於 visionOS 透過使用者眼球注視的位置給予 feedback，我們可以看到當前的 user 注視著第一排最左邊的 Book I，所以該 link 的感應區就有了淡淡顏色的 feedback 樣式呈現。
如果我們今天開啟了 tab overview，那麼他就會以 3D 的樣式環繞著使用者，比較奇怪的是…關閉的按鈕怎麼從原本的右上角移動到左上角了，不確定是不是有慣用手的設計導致關閉按鈕也會跟著變更，抑或是 designer 的任性使然～
如果對於 window size 不滿意的話，也可以藉由手勢操作移動到 window 右下角的位置就可以進行 resize，筆者沒有相關的體驗，不確定要把 current pointer 移動到那個位置是否順暢？
Design Best practice
為了能讓 web page 可以在 visionOS 中完美呈現，所以 speaker 也講述了一些 best practice。
如下所示：
其實這些都是老生常談了，畢竟很多熟練的 web developers 針對 Responsive Web Design 早就暸若指掌、如數家珍。針對 visionOS 也只是多了一個 break point 需要 take care 罷了，裡頭比較特殊的莫過於 container queries 的支援，讓 module 於自身 size 的變化也能有不同的樣貌，搭配 media queries 的使用就可以有更多元的組合。
SVG 本身是向量格式，非常適用於 icon 的呈現，讓不同解析度下可以沿用同一張圖片而達到不失真的完美呈現。
對於 responsive images 的使用，可以使用 <picture /> 或是 img[srcset] 來針對不同 display ratio 設置，如果偏好使用 JavaScript 來進行動態置換的話，也可以把 window.devicePixelRatio 拿起來使用，看看當前 device 是幾倍解析度，換上最適宜的 image。
Nature Interactions
visionOS 主打的就是最自然無需額外學習操作，所以他主要的輸入媒介便由以下三個途徑來組成：
可以理解成追蹤眼球的注視變化來當作滑鼠軌跡，然後透過直接或者間接的手勢操作來完成 tap / click 以及 pinch 的行為操作。是的！最右邊那個像在捏葡萄乾的手勢操作其實想表達的就是 pinch 的呈現。
如同上圖，便是使用眼睛注視當作 pointer down 的 trigger，然後搭配 pinch 手勢變化當作 pointer move 來計算需要變化的位移量，最後就是 pinch 結束當作 pointer up 完成這一系列的動作。用說的很簡單，但是實際上的操作是否真的這麼般順暢？除了那些業配網紅外，我想沒人知道確切的答案。
這是直接的手勢操作，藉由手指點擊、滑動以及放開來完成 down、move 以及 up 動作後，再去 trigger 應該完成的 action。
講者似乎知道 developers 的憂慮，便信心喊話，要大家不用擔心這些 low-level 的操作行為，Safari 可以很精準的追蹤以及配發行為，讓 click 以及 scroll 都可以順常無礙地完成這些基本訴求以及操作。個人認為…還是聽聽就好，等真正有操作到實體機器再來讚嘆也不遲～
Web developers 可以藉由上述兩個 media queries 來針對 touchscreen device 做最佳化 element 的 feedback 呈現。
我個人的習慣比較簡單，基本上只會在有支援 hover 的的 dedia queries 中下相對應的 pseudo class，避免在 mobile device 上又不預期的行為發生（比方說基本的點擊可能就會變成需要點擊兩次，第一次觸發 hover 的樣式，第二個點擊才算真的 click）。照著自己的習慣來設計，不一定要像上面說的這麼八股。
文章一開始有說到透過眼睛注視來 highlight 關注的 element，這是怎麼做到的呢？Safari 其實是 follow W3C 的 standard 來設定 element 屬性及是否需要 feedback 樣式的呈現。只要 element 符合下列特徵，visionOS 便會做出相對的注視呈現。
- <button />、<a />、<menu />
- ARIA role 的 attribute 設置
- form elements
- 透過 CSS cursor: pointer 來強制告知需要 feedback
也就是說如果你平常的習慣良好，對於 HTML element 都使用時機都正確無誤的話，你所設計出來的 web page 就無需要任何更動便可以無縫的與 visionOS 接軌。
講者提了一個有趣的例子來跟大家解說，如下所示他造了個 custom element 來做一個 listing 的呈現。
從畫面中可以看到他語意化結構觀念不是很好，明明是可以點擊的元件，竟然是用 <div /> 進行包覆，為了有注視 feedback 的呈現，所以他透過 cursor:pointer 的屬性注入，來強迫 visionOS 認為這是可以點擊的元件，藉此獲得 feedback 的效果。
這個 session 並沒有講述該如何調整 feedback 的顏色，我個人認為應該可以透過 CSS > -webkit-tap-highlight-color 來進行顏色設置。
另外可以透過 CSS > border-radius 來改變 feedback 的形狀。
Simulator and debug
Thanks God！窮鬼如我買不起 Vision Pro 的人有福了，看來 XCode 也會有對應的 visionOS simulator 可以方便進行調試。透過這樣的配置，web developers 便可以知曉自身的 web page 於 visionOS 中的可能呈現。
講者透過一個 web page 的調適來跟大家講述怎麼修正與進行最佳化，首先他發現他 demo 的 web page 於 macOS 以及 visionOS 都沒有 highlight 的效果。
透過 web inspector 可以發現所有元件的 cursor 都被刻意洗成了 default 了，這也就是為什麼 highlight 沒有呈現的主要原因。
移除 cursor style，讓 <a /> 的 cursor 樣式沒有被改寫後，便可以清楚地看到 highlight 的效果出來了。不過美中不足的是頁面的結構沒有設計好，所以 highlight 的 region 並不如預期是整個 button 的範圍，很明顯可以看出這人的的基本功真是有夠差。
為了讓感應區可以覆蓋到整顆按鈕，所以這傢伙這麼做
他在 <ul /> 下把 <a /> 從 <li /> 裡頭拿出來進行反包覆，雖然達到了他要的呈現效果，卻搞了個 HTML 結構混亂且啼笑皆非的亂子出來，真真丟人現眼 orz。
Platform Optimization
web 已經大量的使用 pixel 作為基本的單位，所以不免俗地變透過這樣的陳述來讓大家可以知曉透過 web api 拿出來的數值亦是使用 pixel 作為基本單位，由上述範例可以得知，當 element 進行 fullscreen 化後，window.innerWidht 以及 window.innerHeight 已經和 window.screen 物件裡頭的 width / height 相同，由此可以推敲出 visionOS 的解析度可能落在 960 x 540。
如果有監聽 scroll 變化的 event，記得要搭配 passive listener 來優化 scrolling performance。另外如果需要透過 JavaScript 來作出 animation 的變化，則需要透過 requestAnimationFrame 來進行 non-blocking thread 進程。
我個人則比較好奇 web api > animate 的使用是否順暢？畢竟這也是 W3C standard 且比 requestAnimationFrame 來的更好維護與擴充。就讓我們拭目以待吧！
另外可以透過 Safari 自帶的 Web Inspector Timelines 來偵測 animation 的成效與效能是否如預期？（完美致敬了 Chrome ？？）
Integrating 3D content
在 Safari 中可以讓 web page 有 3D model 的驚人呈現。打從 iOS 12 起便支援了透過 a[rel=ar] 以及指向 usdz file 的宣告來進行 3D model 的置入。
如上所示，developr 還可以置入一個靜態圖片當作封面，最後再透過 OS 中的 RealityKit 來進行 render。
同一時間，Safari 亦提案推出一個嶄新的 HTML tag <model /> 來完成這項事務。讓他功能與語意化皆能並進。
帶提案過了，未來將可能可以透過下列的陳述法來進行 3D model 的宣告並且透過 expose 出來的 method 與 properties 來進行調試。
Conclusion
以上便是有關「Meet Safari for spatial computing」簡單的導讀與紀錄，藉由影片中的介紹，我們可以清楚地知道要讓 web page 可以在 visionOS 中完美呈現的一些重點項目。雖然 demo 的過程中荒腔走板，不僅名詞沒有校正 （xrOS ？！visionOS ？！），連 HTML 結構的亂入以及 JavaScript 撰寫都不盡人意，但勉勉強強意思到了，還是可以知道他們想要陳述的要點。
希望今天的分享可以幫助到大家如何快速地切入 visionOS，如果有任何問題也歡迎隨時和筆者一同討論分享～