iOS平台快速发布HT for Web拓扑图APP应用

时间 2019-11-21

标签 ios 平台快速发布 web 拓扑 app 应用栏目 iOS 繁體版

原文原文链接

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

对于如今火如荼的HTML5应用，咱们能够借助PhoneGap对其打包，而后像原生APP同样发布它们；或者要求用户直接经过浏览器访问。前一种方式的优势是用户体验好，用户能够像使用原生APP那样使用它们，缺点是发布很繁琐，并且要等待苹果审核。后一种方式则彻底不用考虑发布的问题，可是用户体验比较差，毕竟让用户打开浏览器，自行输入网址对用户操做水平要求较高。今天咱们经过采用Hightopo的HT for Web组件，介绍另一种方式，这种方式综合了前面两种方式的优势，特别适合部署企业内部应用。
手边有iPhone或iPad的同窗能够先按照下面的方式实验：ios

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

二、点击发送到主屏幕
浏览器

三、确认添加
缓存

四、查看主屏上新增长的APP图标
网络

你们能够看到咱们的主屏幕上已经多了一个”APP”，若是细心优化，用户彻底没法区分这是一个原生应用仍是HTML5应用，极大提高了用户体验。app

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

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

<!--页面缩放方式-->
<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标签的用法也有很好的参考文档，推荐你们仔细阅读：
一、配置Web应用程序
二、支持的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和一堆图片文件，这些资源只会加载一次，第二次打开页面时不会重复从网络加载，因此显示很是快，这样咱们的页面看起来就很是像一个原生应用了！
缓存的用法也有两篇很好的文档：
一、HTML5离线缓存
二、在客户端存储数据

最后上一段操做视频，看一下最终效果，优酷连接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y...