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"的荒谬观点是正确的