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

      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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOSDevLog

生意参谋 App 需求 分析 编码 GUI 交付 Licence

还有一个登录的问题,我这里用最简单的,获取 Chrome 的 cookie,放到请求头中。

982
来自专栏CRPER折腾记

VS Code 折腾记 - (10) 你想发布自己捣鼓的snippets到VSCode插件市场!

em..自认为英文不错和自学能力灰常好的大佬,到这里可以停止阅读了,省的浪费时间!

892
来自专栏黑白安全

黑客怎样用谷歌查找信息?

黑客去入侵一个网站的时候往往需要搜集它的很多信息,这其中包括利用网站漏洞,社工,还有就是用搜索引擎进行搜索,而常被我们利用的搜索网站——谷歌就是一个非常好的信息...

1124
来自专栏ytkah

微信小程序开发教程第九章:微信小程序拍照收纳开发以及删除名片等

第九章:微信小程序拍照收纳开发以及删除名片等 还是先来看看我们今天的主题——拍照收纳。 拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍...

3008
来自专栏葡萄城控件技术团队

Webpack4干货分享(二),使用loader处理scss,图片以及转换JS

今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

1142
来自专栏信安之路

Windows下优雅地书写MarkDown

自从将博客搬到Hexo之后,书写MarkDown文档的频率就大大提高了,在享受着免排版的语法优势的同时又深深地受插入图片所困扰。找图床、加链接,大大降低了写文档...

1000
来自专栏学海无涯

Android开发之社会化分享功能集成

现在越来越多的应用都集成了社交分享功能,国内用的比较多的就是 友盟和Mob 分享,今天以Mob分享为例,来完整介绍一个集成的案例。 1. 获取ShareSDK的...

3568
来自专栏菩提树下的杨过

Web开发感悟:数据绑定是一种技术,更是一门艺术

1、前言 作为一个多年从事b/s开发的程序猿,曾先后使用过asp、asp.net做为主要服务端语言。不管是相对低级的asp也好,还是高级的asp.net也罢,都...

1855
来自专栏FreeBuf

Kali 2.0教程 | 如何安装Veil-Evasion

Veil Evasion是Veil超级项目Veil-Framework的一部分,我们强烈建议用户们安装它。 Veil Evasion简介 Veil Evasio...

2246
来自专栏hightopo

iOS平台快速发布HTML5拓扑应用

902

扫码关注云+社区