Mobile Web #5 判斷網路連線狀態

image

為了判斷網路連線的狀態,各家瀏覽器都有支援判斷的 js 語法,不過 IE 並不跟著走。

Internet explorer

這邊有很詳細的介紹

http://help.dottoro.com/ljcuiwad.php

Other Browsers

利用 navigator.onLine 可以抓到網路卡的狀態,不過並不一定是實際網路,如果是中間的 router 掛掉,或是伺服器真的有問題就沒這麼容易判斷囉。

    <script>
var
statusElem = document.getElementById('status')

setInterval(function () {
statusElem.innerHTML = navigator.onLine ? 'online' : 'offline';
}, 250);
</script>


http://html5demos.com/nav-online

http://help.dottoro.com/ljcuiwad.php

Mobile Web #4 利用 application caching 減少網路延遲

一直以來 Web 都有一個問題,就是網路連線的問題,連線的品質確實影響了 Web User Experience,以往在這情況下,我都會說”去怪你的網路公司吧”。但是到了 Mobile 裝置上,這個情況更顯得嚴重了,並不是罵一罵 3G 廠商就能解決的,就算稍微好心增加一點頻寬,也並不能消除連線問題。只能想辦法讓 User Experience 盡可能提升。

browser caching & application caching

既然如此要提升User Experience 的話當然就是在本機資源上作手腳,瀏覽器本身也就包含了 caching 的功能,不過以往的 browser caching 是不容易控制的,在 HTML5 之後把 cache 動作演變成可以從 application 去控制,也可以透過 javascript 去得知以及控制狀態。

manifest

manifest 是 HTML5 的新屬性,負責定義有關於整個網站 cache 的動作,利用 manifest 的設定相關網路 cache 還有連線離線的處理。目前五大瀏覽器除了 IE 之外,其他的最新版本都支援 manifest 。

CACHE MANIFEST
# VERSION 1.0

CACHE:
/favicon.ico
/Content/Images/desktop-icon.png
/Content/Images/startup-icon.png

在 CACHE 之後定義需要 CACHE 的檔案,在 manifest 中定義的 cache files 除非 manifest 檔案有更改,不然都會被視為是同樣的檔案,所以如果在這邊的資源有更改過,那你也必須修改 manifest 檔案(可以在#後面加上版本編號),不然瀏覽器還是會認為是同一份檔案。

NETWORK:  /Home/Member
/Report/

在 NETWORK 的區塊定義需要網路連線的部分,特定檔案或是包含子路徑,在這邊定義的部分不會被 cache 。

FALLBACK:
/Home/Offline

FALLBACK 這邊則是如果網頁在離線的狀態下被開啟(而且並沒有存在 cache 中),則會顯示這個頁面。


http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.pluralsight-training.net/microsoft/

Mobile Web #3 如何設定桌面捷徑&啟動 Loading 圖示

IMG_0127

繼上一篇Mobile Web #2 如何在 Mobile 上面呈現 App 般的效果手機在瀏覽網頁的時候,都可以將喜歡的網頁加入桌面捷徑,就是會有一個很像你的 APP 的路徑在桌面上,當你執行的時候就會啟動瀏覽器去開啟這個網頁。

<link rel="apple-touch-icon" href="Content/Images/desktop-icon.png" />

在利用桌面連結啟動之後,連結到頁面。在 iOS 上有區分為使用 Safari 開啟,或是重新啟動一個新的執行續,一樣是使用 Safari 核心,可是包括多執行的下方小清單,都會改成 icon 的圖示。在一開始的版本限制大小為 57×57 , iPad 為 72×72 在 iOS4 之後的高畫質螢幕都支援到 114×114,如果放的是高畫質但是較舊的裝置上瀏覽也會自動降低解析度。

如果要想要在桌面連結執行的時候是一個獨立執行的網頁,而並非用 Safari 開啟的話

<meta name="apple-mobile-web-app-capable" content="yes" />

在獨立執行的時候開啟會比直接加載在 Safari 多一段載入的時間,這時候也可以設定載入時候的 loading 畫面圖片,除了沒有在 AppStore 上架之外,這真的就很像一個 Natïve App 了(還缺少了 push message 的功能)

<link rel="apple-touch-startup-image" href="Content/Images/startup-icon.png">


Reference

這篇有很完整的介紹

http://answers.oreilly.com/topic/2123-how-to-create-a-website-icon-for-the-iphone-and-other-mobile-devices/

How to Create a Website Icon for the iPhone and other Mobile

Mobile Web #2 如何在 Mobile 上面呈現 App 般的效果

最近整個栽在行動版網頁的開發中,看起來小小的螢幕,困難程度卻比一般網頁麻煩多了

1. Mobile 裝置上面的可顯示區域小的多,要如何顯示出真正重要的東西,用一般網頁去設計的話,光是 banner 就佔掉了一大塊空間,還有一大堆東西要放,又是選單又是標題的,還不能太小不然手指頭點不到。

2. Mobile 裝置現在做的真的都很不錯,好到讓人忘記他的硬體完全不能跟一般電腦相比,電腦上跑的好好的 jquery animate 動畫效果 ,在 Mobile 上面看是讓人想哭的慢。

3. 不穩定的連線,有誰用 Mobile 上網的環境都是確定很順暢的,如果在不穩定的環境下上網,丟回來一直發生 404 的畫面,相信大家一定直接關掉了吧。

4.各種機型解析度瀏覽器版本,這原本電腦版網頁也會發生的問題,只是 1960 的螢幕可以接受只有 1280 的畫面,但是 ipad 使用者應該不能接受 iphone 的畫面吧。

綜合以上各點,已經開始逼近解答了,就是 css3 。利用 transform 取代  jquery animate 甚至用 translate3d 做 3d 效果,或是加上 media queries 動態改變排版,只是以台灣目前產業生態來說,css3 這塊到底是網頁設計師還是工程師,css 3 畢竟也只是單純的效果,還是要有 js 的觸發動作,還有很多細節的效果狀態要控制,或許之後 Mobile 不會再有網頁設計師,而是改成前端設計師,將  js 獨立出來一層架構(現在的 ExtJS 就是在做這件事)還要加上設計師的美感跟排版功力。

還有一個問題是並不是每個瀏覽器都可以完整支援 css3 ,不過好險的是目前的 android 跟 iOS 都是預設 webkit 核心瀏覽器,近來很有野心的 Windows Phone7 呢 .. .. 反正聽說 ie10 快出了對吧。

image

(iOS Only) 個人很愛的 app.ft.com ,Financial Times 推出的 Mobile Web ,簡單的畫面,豐富的內容,又很容易上手,連我這個看不太懂英文的都馬上就會用了。利用了 media queries 的功能,在 iphone ipad 或是電腦螢幕上(需要利用 User Agent 模擬)都會看到不同的頁面呈現方式。

image

(Webkit Only) Windows Phone7 推出的 Demo 網頁版,為了讓其他裝置使用者可以體會一下 Metro UI 的魅力,特效炫到一個爆炸,這也是我第一次發現 ie 不能瀏覽的 microsoft 網頁。


Reference