title: WebClip完成IOS的Wap封装
tags: WebClip,IOS
author : Clown95
背景
当我们使用PC频繁访问某一个网站的时候，大部分人的做法是创建一个书签或者直接创建一个快捷方式。但是我们在使用移动设备的时候，好像并没有创建桌面快捷方式这么一个功能，是不是只能使用书签来访问呢？
又或者我们想要把我们的wap站点封装成IOS应用，直接使用IOS原生封装开发成本上升，使用第三方应用封装，基本上通过不了AppStore的审核，只能使用企业签名才能让用户使用APP，这无疑使成本又增加，而且第三方提供的企业签名经常不稳定，导致软件无法使用造成用户流失。
IOS为我们提供了WebClip的一个描述文件，它可以把我们的网站创建成桌面快捷方式，并且可以自定义图标，帮我们省去打开浏览器的步骤，当然值得注意的是它只能调用Safari打开网页。
Tip: 现在签名市场上说的永不掉签封装，用的就是这个方法。
步骤
生成WebClip
前提条件是你有一个Mac或者你有一个Mac系统，然后通过Appstore下载Apple Configurator 2，这个是苹果官方提供的描述文件创建工具。
- 首先我们创建一个新的描述文件
- 我们先选择
通用选项，来设置描述文件的一些基本信息
名称为：描述文件设置名字，这个名字并不是快捷方式显示的名字
标识符：我们直接使用默认就行，这个相当于软件的身份证
组织：描述文件创建者，或者网址拥有者
描述：安装描述文件时候显示的介绍信息
- 我们鼠标滚到最下面，找到
WebClip选项，这边才是我们的重头戏
标签： 这个才是桌面显示的名称
URL：这个填写我们需要创建快捷方式网站的地址
可移除：选中它，我们就可以像删除应用一样在桌面删除它
图标：在桌面上显示的图标
全屏幕：网站是否全屏显示，如果不勾选将会出现状态栏，我们最好还是勾选下
- 设置完成我们保存描述文件，把它放到网站上，使他能够访问下载，值得注意的是，我们只能通过Safari浏览器来访问它，否则安装不了。
解决WebClip自动跳转Safari问题
如果你开始使用刚刚制作的描述文件，你是不是发现了一个很严重的问题？当网站跳转的时候，会自动打开Safari跳转网站，并且会丢失之前的动作，比如说登录状态，用户体验极差。
现在我们就来解决这个问题：
将下面代码复制到每个网页的＜head ＞标签中，请务必确保所有网页均写有此代码。
<script>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);
}</script>
Tip :使用此代码签请自行测试网站功能的完好性。
Q：代码有什么作用？
A ：此段代码主要是阻止网页唤起Iphone手机Safari浏览器
Q：添加代码后描述文件需要重新生成吗？
A ：不需要生成
Q ：代码会对网站安全产生影响吗？
A ：不影响，代码只是单纯的阻止唤起浏览器。
