WebClip完成IOS的Wap封装

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,这个是苹果官方提供的描述文件创建工具。

  1. 首先我们创建一个新的描述文件

《WebClip完成IOS的Wap封装》

  1. 我们先选择通用选项,来设置描述文件的一些基本信息
  • 名称为:描述文件设置名字,这个名字并不是快捷方式显示的名字
  • 标识符:我们直接使用默认就行,这个相当于软件的身份证
  • 组织:描述文件创建者,或者网址拥有者
  • 描述:安装描述文件时候显示的介绍信息

《WebClip完成IOS的Wap封装》

  1. 我们鼠标滚到最下面,找到WebClip选项,这边才是我们的重头戏
  • 标签: 这个才是桌面显示的名称
  • URL:这个填写我们需要创建快捷方式网站的地址
  • 可移除:选中它,我们就可以像删除应用一样在桌面删除它
  • 图标:在桌面上显示的图标
  • 全屏幕:网站是否全屏显示,如果不勾选将会出现状态栏,我们最好还是勾选下

《WebClip完成IOS的Wap封装》

  1. 设置完成我们保存描述文件,把它放到网站上,使他能够访问下载,值得注意的是,我们只能通过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 :不影响,代码只是单纯的阻止唤起浏览器。

    原文作者:Clown95
    原文地址: https://blog.csdn.net/yang731227/article/details/102943784
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞