1. 如何通過WebView監控提升WebAPP性能
WebAPP所顯示的Web頁面都是由一個叫做WebView的組件渲染出來的,每個網頁都有一個鏈接即URL,首先將URL轉換成NSURLRequest,然後用載入網頁的類WebView載入Request,使用 - (void)loadRequest:(NSURLRequest *)request這個方法,就能將網頁載入顯示出來。
目前iOS中有兩個載入網頁的類,分別是UIWebView和WKWebView,UIWebView是UIKit框架中的一個類,而WKWebView是WebKit框架中的類,從性能上來說WKWebView的性能高、穩定性好、佔用內存小,完全優於UIWebView。但由於WKWebView是iOS8提供的組件,因此系統版本低於iOS 8.0的iPhone/iPad用戶就無法正常使用WKWebView組件開發出來的APP。所以目前大部分開發人員還在使用性能、穩定性並不理想的UIWebView進行WebAPP開發,而本文所說的雲智慧透視寶WebView性能監控也是以UIWebView為主要優化目標。
要進行性能監控必須獲得WebAPP頁面載入全過程的性能數據,透視寶是通過向當前載入鏈接的html5、jsp、php網頁代碼中注入獲取數據的JS代碼,然後通過OC與JS交互,將數據傳遞給OC,然後再將數據整理發送到透視寶後端。
監控哪些WebView性能數據
透視寶能監控四大類數據:
♦ 行為數據:抓取用戶在移動端網頁點的行為操作,也就是點擊網頁的內容,分析用戶的行為
♦時間相應數據:分解一個鏈接從載入開始到完成這段時間內,每個階段的耗時
♦ Ajax請求數據:抓取終端用戶響應時間,響應數據下載時間,數據響應成功的callback執行時間和ajax錯誤數據
♦ JS錯誤數據:抓取載入鏈接的代碼錯誤信息
2. 響應式設計與webapp的關系或區別,webapp是響應式設計嗎
實際上webapp相當於把響應式網站外面套了個殼
3. 如何通過WebView監控提升WebAPP性能
web app實際就是安卓殼加傳統web的方式,native app是調用安卓sdk實現的,web app是B/S結構,native app是C/S結構,殼程序其實就是調用的Webview,來載入頁面,phonegap是個開源的框架,實現了殼的功能,並提供了很多對安卓native控制項的調用方法
4. 如何區別一個 App 是 Native App,Web App 還是 Hybrid app
什麼叫做原生App?
原生App是專門針對某一類移動設備而生的,它們都是被直接安裝到設備里,而用戶一般也是通過網路商店或者賣場來獲取例如 The App Store 與 Android Apps on Google Play . 隨便說幾個原生App的例子,比如iOS 的 Camera+ 以及Android 的 KeePassDroid
什麼叫做移動Web App?
一般說來,移動Web App都是都是需要用到網路的,它們利用設備上的瀏覽器(比如iPhone的Safari)來運行,而且它們不需要在設備上下載後安裝。
什麼是混合app?
Hybrid App是指介於web-app、native-app這兩者之間的app,它雖然看上去是一個Native App,但只有一個UI WebView,裡面訪問的是一個Web App,比如街旁網最開始的應用就是包了個客戶端的殼,其實裡面是HTML5的網頁,後來才推出真正的原生應用。再徹底一點的,如掌上網路和淘寶客戶端Android版,走的也是Hybrid App的路線,不過掌上網路裡面封裝的不是WebView,而是自己的瀏覽內核,所以體驗上更像客戶端,更高效。
綜合一下就是:「Hybrid App同時使用網頁語言與程序語言開發,通過應用商店區分移動操作系統分發,用戶需要安裝使用的移動應用」。總體特性更接近Native App但是和Web App區別較大。只是因為同時使用了網頁語言編碼,所以開發成本和難度比Native App要小很多。因此說,Hybrid App兼具了Native App的所有優勢,也兼具了Web App使用HTML5跨平台開發低成本的優勢。
5. webapp套用android的webview的殼子.怎麼做數據交互
(1) js調用android的方法:
WebView wView;
wView. addJavascriptInterface (Object obj, String interfaceName);
是實例化一個對象,在html的js中調用,第二個參數是實例化對象的別名,如果要使用這個obj,則在js中使用的名字
就是interfaceName。
public class jsWebDemo extends Activity {
WebView wView;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
wView = (WebView)findViewById(R.id.wv1);
WebSettings wSet = wView.getSettings();
wSet.setJavaScriptEnabled(true);
ProxyBridge pBridge = new ProxyBridge();
wView.addJavascriptInterface(pBridge, "AliansBridge");
wView.loadUrl("file:///android_asset/index.html");
}
private class ProxyBridge {
public int one () {
return 1;
}
}
}
來看一下index.html的內容:
<html>
<mce:script language="javascript"><!--
/* This function is invoked by the activity */
function wave() {
alert("1");
document.getElementById("droid").src="android_waving.png";
alert("2");
}
// --></mce:script>
<body>
<div id="output">Test page.</div>
<a onClick="window.demo.clickOnAndroid()">
<div style="width:100px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>
Click me!
</div>
</a>
<input type="submit" value="change to 1" onclick="document.getElementById('output').innerHTML
=AliansBridge.one()" />
</body>
</html>
這里的AliansBridge即是調用的JAVA對象。
要注意的是,如果你只有一個方法需要被js調用只new一個對象就行:
ProxyBridge pBridge = new ProxyBridge();
wView.addJavascriptInterface(pBridge, "AliansBridge");
如果你需要調用好多個方法,就要把整個android程序所在的類本身實例化傳遞進去:
wView.addJavascriptInterface(this, "AliansBridge");
(2) android調用js的方法:wView.setWebChromeClient (WebChromeClient client)
要用到Handler更新UI,Handler mHandler = new Handler();
mWebView.setWebChromeClient(new MyWebChromeClient());
mWebView.addJavascriptInterface(new Object(){
/**
* This is not called on the UI thread. Post a runnable to invoke
* loadUrl on the UI thread.
*/
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
mWebView.loadUrl("javascript:wave()");
}
});
}
}, "demo");
同理,在html中必須有一個名為demo的對象調用clickOnAndroid()方法。
/**
* Provides a hook for calling "alert" from javascript. Useful for
* debugging your javascript.
*/
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
result.confirm();
return super.onJsAlert(view, url, message, result);
}
}
6. 開發一個WEBAPP可以同時在IOS和安卓上運行嗎還是說要分別開發
看你用什麼語言寫了。。假如用html開發web,可以在安卓和ios上同時運行的,ios只需創建一個webView
7. 移動網頁點擊打開app中,有這樣的代碼就可以實現喚醒原生app
什麼是跨平台app?所謂的跨平台app開發就是一套代碼寫完以後可以多端發布運行到各個平台,比如:安卓、iOS、 JSSDK、web、網路直達號、360流應用..解決方法:WEBAPP。所謂的webapp就是給web站打了個包加了個殼,我們看起來像是一個app可以上傳到應用商店,可以從上面下載,但是我們在手機上打開之後看到的實際上還是網頁,只不過寫成的是自適應的網頁能夠在手機上顯示的也比較好,能夠唬人,做到跟原生app神似!WebApp從實現角度是不是可以分為幾種:1、直接使用移動設備瀏覽器使用;2、使用本地封裝EmbedBrowser來調用Web介面;3、使用Web技術(HTML,JavaScript,CSS)直接構建本地應用;從這個角度講,後兩種很難分清Web和Native的區別,由於HTML5的支持以及現在JavaScript/CSS/DOM等性能和穩定程度越來越高,他們的表現不一定會跟Native差別太大。跨平台app開發的UI就是基於html5css3和js的,工程師只需要會前端就可以輕松學會跨平台app開發,大大降低了app開發的成本。
8. 封裝app和原生的app的區別是什麼
一、開發模式不同
1、封裝APP:又稱webapp,是一種框架型APP開發模式。
2、原生APP:又稱Native App,開發針對蘋果IOS封閉、Android開源等不同的手機操作系統用不同語言進行開發。
二、優勢不同
1、封裝APP:開發方式擁有跨平台的優勢,該模式通常由「HTML5雲網站+APP應用客戶端」兩部份構成。
2、原生APP:可以直接對接所有手機埠相應條件滿足下甚至可以獲得手機最高許可權,對於延伸控制升級發展有著天然優勢。
三、特點不同
1、封裝APP:通過訪問數據進行直接運作,像網頁直接打開的方式直接訪問,這種方式跟h5連接訪問是一樣的,所以封裝的APP大多數也多由網頁端h5系統封裝而來。
2、原生APP:運行的處理能力較快,視頻,圖形等處理比較完美。手機的適配度較高有靈活的的埠匹配。
9. 如何選擇Web APP與Native App原生開發模式的區別,APP開發模式比較
webAPP就是網站套殼打包的APP,和網站一樣沒有區別,載入看網路快慢,每個頁面都需要網路載入,每個頁面都需要緩沖,所以對流量要求較高,用戶體驗感較差;
原生APP一些圖片等資料都存在APP裡面,所以對網路和緩沖要求低,也不會卡頓,用戶體驗會比較好。
如果是要做的話,資金許可的話建議原生的,與其套殼做,不如不做,套殼的錢做個某信端的,這樣後期資訊足夠還能同步做個APP,這樣對發展更有利。
10. 蘋果真的要在 AppStore 里封殺 WebApp 嗎
最近幾個月, 蘋果AppStore似乎加強了對WebApp的管控, 很多過去能上架的 使用WebApp+Native殼的應用陸陸續續的都被拒了.
於是 很多人開始拋出了"蘋果要封殺WebApp"/"蘋果要像當初對待Flash一樣對HTML5說不"一類的觀點.
作為一個HTML5開發人員 + 蘋果產品用戶, 我也想表達一下自己對這個問題的看法.
我的觀點不一定對 但是,即使我錯了,也不能證明那些認為"蘋果要封殺WebApp"的荒謬觀點是正確的