iOS平台一直是封闭的生态圈，iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试，所开发的APP需要上传到App Store经过苹果审核以后才可对外发布。如果要开发企业内部应用，则要缴纳更高的费用购买企业账户才可以。

对于现在火如荼的HTML5应用，我们可以借助PhoneGap对其打包，然后像原生APP一样发布它们；或者要求用户直接通过浏览器访问。前一种方式的优点是用户体验好，用户可以像使用原生APP那样使用它们，缺点是发布很繁琐，而且要等待苹果审核。后一种方式则完全不用考虑发布的问题，但是用户体验比较差，毕竟让用户打开浏览器，自行输入网址对用户操作水平要求较高。今天我们介绍另外一种方式，这种方式综合了前面两种方式的优点，特别适合部署企业内部应用。

手边有iPhone或iPad的同学可以先按照下面的方式实验：

1、用iPhone或iPad上的Safari浏览器打开链接：http://pattern.dk/sun/，点击底部的发送按钮

2、 点击发送到主屏幕

3、确认添加

4、查看主屏上新增加的APP图标

大家可以看到我们的主屏幕上已经多了一个”APP”，如果细心优化，用户完全无法区分这是一个原生应用还是HTML5应用，极大提升了用户体验。

是不是很神奇？接下来我们以HT for Web的拓扑应用为例，试着实现这样一个”高仿”的APP，先看一下我们的页面在iPhone浏览器中的效果：

为了使这个页面看起来像原生APP，我们需要在HTML页面中加入一些特殊标记：

<!--页面缩放方式-->

<meta name="viewport" content="user-scalable=0, initial-scale=1.0”>

<!--是否全屏显示-->


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

<!--状态栏透明-->


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

<!--APP在主屏上显示的名字-->


<meta name="apple-mobile-web-app-title" content="ht" />


<!--App在主屏上显示的图标-->


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


<!--启动画面-->


<!-- iPhone5-->


<link rel="apple-touch-startup-image" href="res/girl_iphone5.png">


<!-- iPhone6-->


<link rel="apple-touch-startup-image" href="res/girl_iphone6.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />

viewport的设置可以参考苹果的官方文档，写的非常棒。

其它meta标签的用法也有很好的参考文档，推荐大家仔细阅读：

1、配置Web应用程序

2、支持的Meta标签

还有一个细节需要注意，如果页面中的资源(JS脚本，图片等)非常多，每次打开重新加载也会影响到用户体验，这时我们可以将一些资源缓存起来：

<!--指定缓存控制文件-->

<html manifest="cache.manifest">

这个文件的内容如下：

CACHE MANIFEST

CACHE:

ht.js

res/girl_iphone5.png

res/girl_iphone6.png

res/1.png

res/2.png

res/icon.png

在这个文件中，我们缓存ht.js和一堆图片文件，这些资源只会加载一次，第二次打开页面时不会重复从网络加载，所以显示非常快，这样我们的页面看起来就非常像一个原生应用了！

缓存的用法也有两篇很好的文档：

1、HTML5离线缓存

2、在客户端存储数据

最后上一段操作视频，看一下最终效果，优酷链接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2

iOS平台快速发布HT for Web拓扑图应用的更多相关文章

  1. HT For Web 拓扑图背景设置

    HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择: divBackground:通过css设置graphView对应的div背景 Painter:通过graphV ...

  2. iOS平台 | 快速集成华为AGC认证服务

    介绍 如何让用户根据已有的账号来进行登录注册呢?在应用中集成华为AGC认证服务SDK来轻松快速地实现这个功能. 本篇内容根据官网文档指导集成过程总结完成,关于集成步骤,官网的资料写的有点多,现在我总结 ...

  3. ECharts整合HT for Web的网络拓扑图应用

    ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是 ...

  4. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  5. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  6. 关于Unity发布iOS平台代码混淆问题

    之前在越狱手机里找到<永恒战士3>的程序发现是用Unity做的,拷出资源出来看的时候发现里面有游戏程序集,立马抽出来反编译了一下,发现里面的代码只有方法签名,没有方法体,还以为用什么高端混 ...

  7. 如何利用Typora编写博客，快速发布到多平台？

    在不同的平台发布同样的文章,最让人头疼的就是图片问题,如果要手动一个个去重新上传,耗时耗力,还容易搞错.下面分享的方法,可以将Typora编写的文章快速发布到CSDN.微信公众号.博客园.简书等平台. ...

  8. 基于HT for Web 快速搭建3D机房设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

  9. 基于HT for Web 3D技术快速搭建设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

随机推荐

  1. 开源库Magicodes.ECharts使用教程

    目录 1    概要    2 2    Magicodes.ECharts工作原理    3 2.1    架构说明    3 2.1.1    Axis    4 2.1.2    CommonD ...

  2. Apache Marmotta 3.1.0-incubating 发布

    Apache Marmotta 3.1.0-incubating 发布了,Apache Marmotta 项目的目的是提供 Linked Data Platform 的开源实现,可让组织轻松的使用.扩 ...

  3. Android下集成Paypal支付

    近期项目需要研究paypal支付,官网上的指导写的过于复杂,可能是老外的思维和中国人不一样吧.难得是发现下面这篇文章: http://www.androidhive.info/2015/02/andr ...

  4. 《C#图解教程》读书笔记之四：类和继承

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.万物之宗:Object (1)除了特殊的Object类,其他所有类都是派生类,即使他们没有显示基类定义. ( ...

  5. 冲刺阶段 day 9

    项目进展 昨天终于完成了教师部分的内容,今天我们又重新开始对之前系部设置不能实现的内容进行了编写,之前缺少删除和查询也做了补充,在与数据库的连接上也做了修改和更新. 存在问题 由于是之前遇到困难没做完 ...

  6. [nRF51822] 3、 新年也来个总结——图解nRF51 SDK中的Button handling library和FIFO library

    :本篇是我翻译并加入自己理解的nRF51 SDK中按钮相关操作的库和先进先出队列库.虽然是nRF51的SDK,但是通过此文你将更多地了解到在BSP(板级支持)上层嵌入式程序或OS的构建方法. 1.按钮 ...

  7. GLFW初体验

    GLFW - 很遗憾,没有找到FW的确切含义,Wiki上没有,GLFW主页也没有.猜测F表示for,W表示Window GLFW是干啥用的? 一个轻量级的,开源的,跨平台的library.支持Open ...

  8. JavaScript正则表达式下——相关方法

    上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...

  9. 【重要更新】Senparc.Weixin SDK v4.4 升级说明

    本次更新同时影响以下所有Senparc.Weixin相关版本的dll: Senparc.Weixin.dll 升级到 v4.4.2(重要) Senparc.Weixin.MP.dll 升级到 v13. ...

  10. XMPie Tracking 操作

    XMPie Tracking 操作 1.1    打开页面 我们随便打开一个页面,这里打开landing.aspx 我们想要跟踪页面,选中DW上面的TrackingàTracking Page Vis ...