最近將全部精力都放在由JavaScript驅動的Web應用程序開發上，JavaScript負責驅動前端和后端，這是一個很奇特的方法，特別是那些在傳統服務器端技術(如PHP)沉浸了十多年的技術老人感覺有點不可思議，幾個***技術的出現打開了構建真正身臨其境的交互式Web應用程序的大門，這種Web應用程序和桌面應用程序在很多方面都有相似之處。

即使有這些很有潛力的新功能，但要忽視房間里的大象(iPad，以及不斷增多的競爭對手，如XOOM)還是相當困難的，在不到三年的時間里，其應用程序銷售額就超過了10億美元，很明顯，單純通過瀏覽器訪問網絡內容的日子已經結束了。

iPad/iPhone應用程序開發和開發網站相比，需要完全不同的技巧，也許你過去多年的技術積累現在一點用場也派不上。但我們必須明白一個道理，只有接受改變才能獲得成功，你可能會想，如果能使用現有的技能為iPad開發Web應用程序該多好，恩，這個真可以，不信的話請接著往下看。

向iPad圖標菜單添加一個圖標

我想以一個本末倒置的方式開始，因為很多開發人員開始都喜歡問一個問題，如何將Web應用程序和iPad界面緊密集成?這個問題其實就是問，在應用程序菜單上，單擊某個應用程序的圖標，如何啟動這個應用程序?不管你信不信，答案比你想象的要簡單，因為iPad的Safari瀏覽器已經內置了這樣的功能，如圖1所示。

▲圖 1 向iPad啟動菜單添加一個Web應用程序

點擊“Add to Home Screen(添加到主屏幕)”選項時，iPad將會為網站創建一個應用程序圖標，使用當前頁面的截屏，然后使用網站域名作為圖標的標題，如圖2所示。

▲圖 2 在iPad上創建一個Web應用程序啟動圖標

創建好圖標后，它將會添加到應用程序菜單中，如圖3所示。

▲圖 3 iPad Web應用程序啟動圖標

從邏輯上講，你可能希望給你的Web應用程序關聯一個自定義啟動圖標，當然這也是可以辦到的，通過apple-touch-ico鏈接元素，你可以指定一個自定義圖標來覆蓋iPad的默認行為，但這個功能只對Safari瀏覽器開放，例如，將下面的鏈接元素嵌入到WJGilmore.com布局模板將會導致使用名為wjgilmore.png的圖標，不管用戶是否決定將站點添加到他們的應用程序啟動菜單。

順便提一句，iPad標準圖標大小是72x72像素。

由于安全原因，Web開發人員不能自動化這個過程，但是，你可以使用友好的提醒提示用戶如何做。#p#

從iPad移除Safari界面元素

即使通過啟動圖標可以方便地訪問Web應用程序，但iPad應用程序和Web應用程序之間的脫節還是一目了然的，當Safari瀏覽器啟動時，你的Web應用程序在熟悉的瀏覽器界面區域內打開，這個感覺是不是有點坑爹呢，有辦法，你可以使用apple-mobile-web-app-capable元數據元素告訴iPad以全屏模式啟動應用程序，圖4顯示了WJGilmore.com在iPad上全屏運行的狀態，注意屏幕頂端的工具欄永遠都會顯示，不會被網頁給擋住了。

▲圖 4 全屏模式運行Web應用程序

在iPad上查看HTML源代碼

iPad Safari瀏覽器與其桌面版本相比，缺少了很多功能，甚至連查看網頁源代碼的功能都木有，在測試Web應用程序時，如果沒有這個功能那是相當讓人郁悶的，你通常希望與特定瀏覽器相關的功能被正確地包含進來，并正確地得到了渲染，雖然Safari沒有開放查看網頁源代碼的功能，但我們還有其它解決辦法，讓你可以閱讀任何頁面的HTML，辦法就是創建一個書簽，當它啟動時執行一段JavaScript代碼就可以看到網頁源代碼了。具體步驟請移步這里。

iPad瀏覽器注意事項

Safari瀏覽器移動版本在擁抱***標準方面一直處于領先地位，因此，它所支持的一些功能可能會讓你大吃一驚，我們一般都認為移動設備基本上都是步履蹣跚的設備，但是，Safari移動版讓人意想不到地加入了連桌面版也沒有的功能，例如，iOS 4.2附帶的Safari包括對HTML 5和WebSocket的增強支持。

iOS 4.2也增加了對iPad加速計的支持，它使構建真正***界面的Web應用程序成為可能，Alberto Sarullo發布了一個加速計Demo(只支持iPad和iPhone)，真正把這個功能演示到家了，我也建議你閱讀一下他對新加速計功能的分析。

從iOS 3.0開始就內置了地理定位功能，這些JavaScript擴展讓開發人員可以輕松識別用戶的位置，原理就是根據用戶如何連接到互聯網來判斷的。

如何開始?

基于Web的iPad應用程序開發是一個充滿機遇的領域，但它得到的關注卻太少，如果你對這個話題感興趣，我建議你從蘋果公司的Safari官方開發文檔開始，其中包含了大量與Safari移動版相關的信息。