蘋果手錶 Apple Watch 竟然可以開網頁了，RWD 又要多調一種 了嗎？

web 系統開發除了要把所有「人花一秒鐘」判斷的事情都寫成機器邏輯，滿足所有已存在＋所有使用者幻想的需求，然後只設計一版畫面，就能把所有的操作介面硬塞在一個小小的螢幕中，在所有裝置正常操作，那麼，現在要針對手錶做調整嗎？

我們先來調查一下 Apple Watch 手錶有多大尾，根據市場研究公司 IDC 的 2018 Q2 全球可穿戴裝置市場報告，今年的穿戴裝置出貨量比去年同時期上升了 5.5%，蘋果手錶的全球市佔率有 17%，目前佔第一位。

iPhone 手機 2017 年在台灣地區市佔率約 22.95%，也就是說幾乎每 4 個台灣人就有一人是拿 iPhone，而且是蘋果手錶的潛在購買者或是使用者。

目前可能的手錶網頁應用

本來企業要讓某種「資料展示」或「操作系統」透過 app 出現在使用者的貼身電子設備上，除了繳 Apple 開發者年費，花人力和時間開發另一個 app，上架送審時被刁，退件 N 次。 還得擔心 App 沒更新，或是違反新的上架政策規定，慘遭下架。或是系統太新，或硬體太舊，使用時 App 閃退或卡住的負評體驗。

只要手機升級到 iOS12，除了初代手錶之外，Series1~4 的手錶都可以在 9 月正式更新 watch OS5，但手錶由於軟硬體上天生的限制，應用有限，以購物來說，蘋果的購物網站 Apple Store 也有出手錶的 app ，但在手錶上也只能查訂單、看服務據點、看課程資訊、看喜好商品的售價，與運送預估時間。

手錶既沒有完整的中英文字母鍵盤，也沒有鏡頭可以掃 QR Code，開網頁要幹嘛呢？ 蘋果把手錶的這個瀏覽網頁功能叫做「更佳的通知功能」，而不是一個獨立的網頁瀏覽器，所以想像當使用者收到一則簡訊，從手錶上查看時，簡訊裡面附的網址可以在什麼場景，達成什麼任務？

• 問卷調查，例如收到帶網址的簡訊，點進去可填問卷。
• 刷條碼報到，例如收到帶網址的簡訊，點進去會顯示報到條碼，報到者可以少掏一次手機，或是少帶一張紙本報到卡。
• 貸款業者或是釣魚簡訊，都可以經由這功能再進化。

如果我們硬要超前部屬，預置兵力，把這玩意當成行動網頁瀏覽器，可以解決什麼問題呢？

• 貨到付款類的一鍵購物下單?
  Amazon 的 Dash Button 是黏在居家物品上，那現在手錶是黏在使用者手上的，理論上可以做出簡單的帳密登入、選商品、數量、送出訂單。但最大的麻煩是從手錶的錶面進到這個訂購頁，中途還要點很多下。用手錶 Siri 也無法直接叫出網頁。
  一定要更精簡的話，簡訊發出的網址可能就要帶有使用者的 uuid 之類的，連登入都不用登，只要選商品、數量、送出訂單。不過這樣一定很不安全。
• 門市值班人員的相關操作或通知應用?
  在某些條件下蘋果裝置互傳 iMessage 是免費的，也許可拿來代替櫃檯與廚房的連線點餐機，或代替電子服務鈴？
  或是有些門市的 ERP 或 POS 沒連網，但又想做雲端大數據區塊鍊跨境O2O碗糕…線上訂單通知門市店員？
  但如果這樣搞，大概只會看到櫃檯後面永遠有一排 Apple watch 在充電。–
• 物聯網設備的機器狀態?
  不論是營業用設備，還是消費性用品，現在很多廠商的產品都有遠端監控功能。既然貼身的智慧手錶現在可以開網頁了，那用來隨時顯示一些重要的設備狀態也是很適合的，至於背景執行，設備故障時跳出警告？想太多了，手錶頂多只能接到機器故障被 call 回去處理的來電通知。 
• 現行的 iPad 跟任何 Android 裝置，都是無法跟 Apple Watch 連線的。如果想讓小攤販小市集的人員僅靠一支手錶＋手機就能完成收款打單管庫存的任務，來搞個手錶 Web POS……這遊戲製作人瘋了吧？ 

所以說，想利用 Apple watch 辦行銷活動，iBeacon 的地理定位推播通知應該可以塞網址，放更多資料。
如果要辦網路行銷活動，那起手式大概就是要讓瀏覽者在手機網頁或電腦網頁上輸入手機號碼，讓系統寄出簡訊，當 Apple watch 收到通知簡訊，然後使用者手錶點進去之後，可以…？

手錶的網頁瀏覽器無法做什麼事?

手機開網頁的步驟是先開啟 Safari，輸入網址，看到網頁。手錶則完全不一樣，是要在支援開啟網頁的手錶 app 收到網址，然後使用者點擊後，會在專為手錶設計的 Safari 瀏覽器內顯示網頁。
再複誦一次教主說的，手錶的這個瀏覽網頁功能叫做「更佳的通知功能」，而不是一個獨立的網頁瀏覽器，

寫這篇文章的時候，除了 iMessage 之外，其他 Line, 微信, FB Messenger 之類的都還不支援上述這個動作，收到含有網址的訊息還是顯示成純文字的樣子，不會有如上圖右的網頁標題預覽，也不能點，更無法開啟網頁。

手錶的網頁瀏覽器也跟手機/電腦的瀏覽器不同，許多功能沒法支援，以 Series 3＋watch OS 5.0.1  試了一下網頁常用的功能。(文章最後面有測試頁)

首先，手錶並沒有甚麼特別的 UserAgent 字串

• 無法下載檔案存在手錶本地端(JPG會直接開啟，其他 pdf 之類的會顯示 Apple Watch 不支援此內容)
• file input 無法選擇檔案
• window.print() 列印視窗方法沒有反應
• JS 原生 alert, confirm 視窗無法顯示，要自己用 SweetAlert 之類的做
• 開新視窗(_target=”_blank”)、JS 開新彈跳視窗沒有反應
• 需要額外彈跳視窗、開新視窗的，如常見的選擇取貨超商、FB快速登入、FB 分享 dialog 也是沒有反應
• 滑鼠移入/移出的操作事件不支援
• HTML5 audio/video、播 Youtube，通通不支援
• 有網址列，但無法讓使用者在網址列自己輸入網址
• Universal Links 無法開啟對應的手錶 app
• iframe 顯示不出來
• 無法讓使用者把網頁釘選到手錶的錶面捷徑 / 主畫面 / 加到書籤 / Dock
• 手錶的 Siri 無法幫人開網頁
• 無法使用手錶網頁 Apple Pay 付款
• 網頁輸入信用卡用卡號，有些銀行的刷卡頁面連用手機都很難瀏覽，更遑論要在手錶上輸入信用卡卡號、日期、驗證碼。
• web font 無法載入
• Flash 當然也無法載入
• 網頁內文章段落太多時，會強制以黑底白字的閱讀模式顯示(如蘋果日報的新聞內文頁)，版面跟 js 會非常不正常。
• 無法被 GA 記錄，用 js 印出 window.ga 不會有 undefined，但是在 GA 即時報表或網頁內容瀏覽報表，都查不到痕跡。

手錶的網頁可以做到什麼事

手錶雖然螢幕很小，輸入中英文要用講的或是用寫的，但輸入欄位時還是可以讀取 Apple ID 存的欄位自動完成資訊，蘋果全家餐的使用者又可以感到一絲方便之處。

• 手錶會吃到跟 iPhone SE 一樣的解析度寬度 @media screen and (max-width:320px){….} 內的 CSS，但是文字斷行方式理所當然跟手機不一樣。
• 手錶有個自動畫面縮放值 0.49，可以加 meta name=”disabled-adaptations” content=”watch” 讓網頁更會跑版。
• 用小鍵盤輸入數字 –
• 陀螺儀可以跑出三軸的數值
• 基本網頁漢堡收合選單的 JS 操作可正常
• 可進入臉書網頁版，並登入、搜尋
• 使用 meta og:image 顯示連結預覽圖
• 若網頁含有
  HTML 標籤，使用者可長壓螢幕，選擇變成黑底白字的閱讀模式來顯示。

手錶與手機的網頁操作方式差異

延伸閱讀

• watchOS 5 – Apple (台灣)
• Designing Web Content for watchOS – WWDC 2018 – Videos – Apple Developer
• 手錶網頁功能測試頁