ios制作h5的桌面webapp的详解

时下app的解决方案大概分以下几种

1.原生ios以及android app（需要两端程序员 复杂度高 学习成本高 可扩展性无）

2.通过native系列衍生物产生的各种js混合app，如react native，phone gap ，cordova等（需要混合开发经验的程序员 复杂度较高 学习成本较高 可扩展性较高）

3.通过ios以及android原生webview原理制作壳内嵌普通h5网页来实现的app（需要web前端网页开发人员即可 复杂度低 学习成本低 需要两端程序员做壳或第三方平台 扩展性高）

4.轻量级webapp（不需要写壳 需要前端网页开发程序员 兼容性目前很低  ）

这几种app针对的领域以及用途已经可以通过如今的项目结构和方向来进行选择和区分了

比如按照app执行效率 1-4是从高到低的

但是如今的硬件水平对于这四种app在使用阶段已经看不出太多的差异，比如一个内容比较轻量的前端功能不是很重度的app对于这四种方式都可以实现

所以针对项目公司们往往会选择一个性价比最高的方式进行开发，

目前选择2，3的公司为主

今天我们着重说一下4，因为这个相对来说是一个未来的趋势，

由于h5的功能以及灵活性越来越高，可实现功能越来越趋近于本地app

那么在未来的发展中如果webapp套壳的步骤省略的话对于移动开发是一个飞跃性的助力

目前ios系统的safari浏览器中有这样一个功能可以将网页保存到桌面，看似收藏夹的效果，但是它实际是一个生成webapp微端的功能

这就是保存到桌面之后的效果，

但是这种webapp保存之后经过开发打开以后是这样的

经过简单的加工之后，点击图标他不会再打开safari浏览器并且不会自带地址栏以及工具栏，

是以一个单独app形式存在并且运行的

也就是说他的使用与安装式的app无异

那么我们来简单的说一下如何进行ios桌面webapp的开发

首先我们看一下常用的标签

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

<meta name="apple-mobile-web-app-status-bar-style" content="black">

 

<link rel="apple-touch-icon-precomposed" href="img/icon.png" />

<link rel="apple-touch-startup-image"  href="img/bg1.png" />

<link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="img/bg1.png" />

<link rel="apple-touch-startup-image" media="screen and (orientation: landscape)" href="img/bg1.png" />

有了这几个标签就可以让生成的webapp打开之后呈现一个app的效果并且附带开场画面

但是单单使用这几个元素是不够的

因为我们的网页中如果使用了超链接

那么打开的新页面会自动调用浏览器打开

为了防止弹出浏览器我们还需要使用js来强制页面在webapp中跳转

//解决ios webapp子链接跳页弹回浏览器的问题

if(('standalone' in window.navigator)&&window.navigator.standalone){  

    var noddy,remotes=false;  

    document.addEventListener('click',function(event){  

            noddy=event.target;  

            while(noddy.nodeName!=='A'&&noddy.nodeName!=='HTML') noddy=noddy.parentNode;  

            if('href' in noddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){  

                    event.preventDefault();  

                    document.location.href=noddy.href;  

            }  

    },false);  

}  

加入后我们可以测试一下效果

效果如此

尾声：

也就是说，如今的移动端开发已经不是过去我们耳熟的几种技术来实现的，

你在使用一款app的时候是感觉不出来他到底是用什么技术来实现的，

新技术层出不穷，旧技术面临淘汰或改变

这种webapp虽然没什么人使用兼容性也不好，这次提起他只是个人觉得

桌面webapp未来可能也会成为一种趋势

就像pc端端游进化到页游页游生成微端一样

就像微信支付宝相继推出小程序一样

移动app也在悄悄的产生一种过度，未来应该会发展到免安装app的时代

所以介绍一下免安装app的概念