2015年12月21日 星期一

HTML5 - web app 研究

最近研究 HTML5 最終也是想玩玩 web app ,真是個有趣的東東,web app 是直接利用 html5 做出的跨平台行動版網頁,但又多了 app 的功能,例如可以建立在手機桌面上小圖示,點下去時會產生歡迎頁面,另外加入離線網頁技術還可以讓瀏覽器保有快取的頁面,就算無線 wifi 關閉時也能開啟網頁,這時若是整合 RWD 的技術,開發 web 專案時更可以讓使用者無感跨平台障礙使用,當然若是考量效能與手機功能使用時,或許要針對開發的規劃而選擇原生 app 或者是使用其他的混合 app (cordavo) 等技術來考量,本編則先討論 web app 的技術心得。
優化 Web Content
為了區分手機跟桌面版本不同的 content,我們可以使用 Media Queries 來區分,在加上 max-device-width 和 min-device-width 去偵測整個頁面大小 (screen size)。 舉例來說,偵測 iPhone and iPod touch 裝置,可以透過底下載入 CSS

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
另外如果是 Desktop 版本可以加入底下

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
另外或者是直接在 CSS 裡面判斷:
   
@media screen and (min-device-width: 481px) { ... }
另外針對 screen 或 print 可以直接在 head 裡面寫入
   
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
或者在 CSS 裡面寫入
  
@media screen {
    #text { color: white; background-color: black; }
}

@media print {
    #text { color: black; background-color: white; }
    #nav  { display: none; }
}
Viewport Meta Tag 設定
開發 iPhone 手機版 Web,為了符合 device 真正寬度,必須設定 viewport 的 width 等於 device-width。
  
<meta name="viewport" content="width=device-width" />
另外可以針對使用者可否放大或縮小螢幕,以及是否可以縮放
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
initial-scale: 畫面初始化倍率 maximum-scale: 畫面最大倍率 minimum-scale: 畫面最小倍率 user-scalable: 用戶是否可以縮放畫面
設定 Web Applications
設定將網頁儲存為 home screen icon 的圖片路徑,預設值為 57×57

<link rel="apple-touch-icon" href="/custom_icon.png"/>
定義其他裝置 size 圖片
   
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
設定載入頁面時 loading 圖片
  
<link rel="apple-touch-startup-image" href="/startup.png">
隱藏底部 iPhone button bar,看起來更像 iPhone App
   
<meta name="apple-mobile-web-app-capable" content="yes" />
更改 status bar 樣式
   
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
另外一個重點,當網頁載入完成後,可以隱藏 URL bar
   
window.onload = function(){
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 100);
}
如果旋轉裝置,則必須在加上 resize event
 
// jQuery resize event
$(window).resize(function() {
  window.scrollTo(0, 1);
});
如果不想讓使用者滑動網頁,可以加入底下
   
document.addEventListener("touchmove", function(event){
    event.preventDefault();
}, false);

以上就是 web app 的語法技巧,另外離線網頁技術請參考另外 HTML5 的分享,下面則提供範例程式:

index.html

<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>test</title>
<style>body[orient="portrait"]>#main{min-height:480px;}body[orient="landscape"]>#main{min-height:320px;}#main{height:800px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--iphone網址隱藏-->
<link rel="icon" type="image/x-icon" href="ic_launcher.png"> <!-- 57×57px -->
<link rel="apple-touch-icon" sizes="72×72" href="images/Icon-72.png"> <!-- 72×72px ipad-->
<link rel="apple-touch-icon" sizes="114×114" href="images/Icon@2.png"> <!-- 114×114px iphone4-->
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="url.js"></script>
<script src="resize.js"></script>
<script src="prevent.js"></script>
</head>
<body>
<div id="main">
web app hello world!
</div>
</body>
</html>

offline.manifest

CACHE MANIFEST
#This is a comment

CACHE:
index.html
url.js
resize.js
prevent.js
favicon.ico
ic_launcher.png

url.js


    window.addEventListener("load",function() { 
    setTimeout(function(){
    window.scrollTo(0, 1); }, 10);
});//隱藏網址

resize.js

    window.addEventListener("load",function() { 
    setTimeout(function(){
    window.scrollTo(0, 1); }, 10);
});//旋轉裝置

prevent.js

document.addEventListener("touchmove", function(event){
    event.preventDefault();
}, false);//不想讓使用者滑動網頁

.htaccess
AddType text/cache-manifest .manifest
 開啟網頁另存在桌面上會產生 app 圖示
 當開啟 app 圖示時並不會產生網址,也無法讓使用者觸控螢幕放大(對於固定圖片非常好用)
顯示為網路應用程式(而非網頁),另外該 web app 已經加入離線網頁功能,關閉無線 wifi 時點選 web app 圖示,仍然會開啟快取的網頁讓使用者進行離線流覽。


沒有留言:

張貼留言