標籤: Safari

分類
程式技術

有趣的iOS上Safari播放mp4問題

今天在測試一個 nginx reversed proxy 上, 代理 upstream server mp4 檔案時的播放問題.

之前沒特別有這個狀況, 但今天開始不能播放(感覺應該是在ios 12.4起發生), 十分有趣, 從 nginx server log 也看不出來原因, 只知道 nginx server 在 ios safari request 時, sent-byte 大小小於原始的 mp4 檔案, 所以也只能從 ios safari 的 developer mode 來著手.

先進行 ios safari developer mode, 可以參考:

https://unrealnavigation.com/blog/web-inspector-with-ios-simulator

然後發現原來 safari 會 request byte-range 0-1 這樣的狀況, 難怪都不會送出完整結果, 這樣一來原因就明確了, 實務上的狀況可以參考這篇:

https://www.stirtingale.com/guides/2018/10/mp4-not-working-cloudflare

若是原本的 server 沒有支援 byte-range 時, 會導致 status 200 而非 safari 預期的 206, 而導致失敗. 接下來就可以來找解決方案.

以 nginx proxy_pass 的反向代理結構來看, 可以利用這個方案:

https://stackoverflow.com/questions/22728016/nginx-is-not-accepting-range-of-bytes

使用 proxy_force_ranges on; 即可.

當然, 原本的 upstream 也需要有支援才能解決.

如此一來, 便能在 ios safari 於 request mp4 資源時, 下達的 byte-range 於快取或未快取內容皆可正常工作.

PS. 於查找過程找到一篇介紹 nginx revered proxy hash key 算法資料可供參考:
https://tomme.me/nginx-proxy-cache-server/

分類
好用軟體

Safari5發佈

之前 safari 4發佈時, 曾下載試用過, 不過效果真的不好, 不僅排版問題, 再加上相容性似乎也不是很好. 在這次 WWDC 大會上的重頭戲是 iphone 4, 不過還有另一個重要的新版本, 就是 Safari 5, 同樣地, 也下載來玩看看.

安裝檔約33MB, 內建多國語言了, 這次感覺比上次的 4版好太多了, 無論是相容性及介面的呈現效果, 另外有個重要的改變, 就是 apple 力挺的 HTML5, 不知是不支援 flash 後, 必須的狀況, 還是什麼著, 不過無論如何, 新的 HTML 5是一個很重要的標準, 但反過來說, Developer 就累了.

接著來測一下 javascript 的效能: http://www.101asian.com/webtest.htm, 效能不錯.

另外也測試一下 ACID3: http://acid3.acidtests.org/, 拿了滿分耶:

有機會可以用看看 Safari 5的效果, 相信會有個不錯的使用者經驗. 連結在此: http://www.apple.com/safari/

另外還有一些相關資料也可以參考一下:
http://www.bnext.com.tw/focus/view/cid/103/id/15092
http://www.techbang.com.tw/posts/2741-the-new-safari-5-built-in-read-mode-obediently

分類
手機大未來

iphone safari的書籤icon如何設定?

iphone上的 safari 瀏覽器一直有著很不錯的使用者經驗的手機瀏覽器.

而且可以很方便的把常用的網站 bookmark 到桌面上, 但是那個 icon 若是沒有經過設定的話, 將會是一個小的預覽縮圖放在桌面上(應該說主畫面上).

那如何設定這個 icon 呢? 可以參考這篇資料: http://vjarmy.com/archives/2008/01/howto_iphone_webclip_icons.php , 其實就是建立一個 57*57 的 PNG 圖, 並且檔名命名為 apple-touch-icon.png 放在 web 目錄的根目錄下即可. 這個 57*57 的 PNG 圖就會是”加入主畫面螢幕”上的那個 icon 了.

若不方便放這個檔案到 web server 的網站根目錄, 也可以使用 meta tag 來指定, 如下:

<head>  
    ...  
    <link rel="apple-touch-icon" href="/images/my.png"/>  
    ...  
</head>

這樣的效果也是一樣的. 在 apple.com 開發者網站上也有詳細的說明:

[補充說明 2010/1/6 11:15]
在上面的關於 apple-touch-icon.png 這個檔名, 若是命名為 apple-touch-icon-precomposed.png 的話, 則加入主畫面螢幕時, 不會再對該圖做任何特效處理, 已知的特效應該是一個 3d 效果的圓弧及加上 4個角的圓角. 可以參考這篇上面有圖做比較: http://uxhero.com/how-to/how-to-keep-mobile-safari-from-adding-gloss-to-home-screen-bookmark-icons/

分類
程式技術

IE6還這麼多人用耶

剛在看這篇文章: IE 6在臺市占率仍超過5成 (http://www.ithome.com.tw/itadm/article.php?c=56054), 發現其實我的想法比較偏向所謂的用戶原始的瀏覽器用什麼, 就會持續用下去的這個狀況, 也就是說, 用戶應該在 XP 就會用 IE6, 在 Vista 就會用 IE7, 在 Windows 7自然用 IE8, 而其中的許多數據也都相當耐人尋味.

用戶自己會選擇使用什麼瀏覽器的, 自然是比較了解電腦, 或是會自己安裝軟體的用家, 而且通常應該要原來固定使用的瀏覽器發生什麼大問題, 或效能不好, 或速度慢等原因, 才會面臨升級或是換瀏覽器的狀況.

不過這也讓我想看一下這個網站的比例狀況(2009/07), 我列出來給大家參考:
狀況如下:

IE6 29.1%
IE7 17.9%
IE8 9.6%
FX3.5 6.8%
FX3.0 10%
SAFARI 3.5%
OTHER 23.1%

其中果然 IE6 佔了大多數, 到 29.1% (相對於上文的報導是沒有那麼高), 而整個 IE 也有 56.6%, 另外 Firefox 則是有 16.8%, Safari 則是 3.5%, 其他的部分包含較小量版本的 IE, FX, 及一些有的沒的, 共有 23.1% (這個也還蠻多的, 真有趣), 整理或圖形如下:

基本上, 網站其實就是要照顧到所有用戶使用的環境來設計功能及呈現, 才不會影響用戶的來訪, 不過, 最重要的是大家都要依照標準來做就對了, 才不會顧此失彼, 這樣也就沒什麼太大的相容性問題!

順便附上 OS 比例也供參考:

分類
好用軟體

在IE下也能用FireBug!?

FireBug, 有在用 FireFox 也在寫網頁程式的人應該不陌生, 若還是真的不清楚, 可以先看看本站之前的介紹:

很好用的javascript除錯工具FireBug (firefox)
FireBug更新功能-Network Monitoring

但是這是一個 FireFox 的網頁工具, 在 IE 下, 甚至 Opera, Safari 下都沒有這麼方便好用的工具, 現在 FireBug Lite 版本提供了這樣的功能了, 可以在 IE 下使用 FireBug 的精簡功能, 請參考官方資料說明:

FireBug Lite

它的使用方式有幾種, 一種是掛入他的 javascript ,

<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>

第二種方式是使用 Bookmarklet 的方式, 將它的一組 javascript bookmark 起來備用

第三種方式是 Offline 方便使用, 其實就是把第一種方式的相關 javascript 及 css 整個拿回來, 放在自家網站下使用.

若對 End User 來說, 其實是第二種最為方便, 因為不需要做任何前置作業即可直接使用. 說到這裡, 其實這組 FireBug Lite 是利用 javascript 撰寫的, 所以可以直援 IE, 而且是在 runtime 下執行, 真的很不錯的設計, 不過是這樣的工作原理, 所以功能也相對較少了(所以叫做 Lite), 而 Network Monitoring 也沒有 (當然不會有, 因為它是後來才執行的), 不過 XHR (XML HttpRequest) 仍然有支援囉, 另外觀察 html, css, javascript 等功能也都有.

不過實際上使用時, 仍會有相當多的狀況, 因為原始頁面的內容會影響這個 FireBug Lite 的執行狀況, 導致許多問題發生, 不過也已經相當方便了!

繼續閱讀:
http://www.stevesouders.com/blog/2008/07/25/firebug-lite-12-released/