用h5做手机app要怎么操作？

目前，Web App 确实已经成为了移动互联网应用的一种重要形态，其最大的优点是运行于浏览器，无需安装即可使用。当然，Web App 很大的一个局限就是其离线缓存问题。虽然在HTML5中，加入了App Cache属性，允许开发者让Web App支持离线缓存；但是，其实这里的离线只是针对不联网的情况下，仍旧能够使用已经缓存的HTML、CSS、JS文件，而不是所有的Web App功能都可以离线使用。

针对这个问题，在2010年，苹果公司推出了“离线 Web App”的新特性，也就是他们所谓的 “Stah5制作软件app排行榜ndalone Apps”。该特性通过添加Apple-mobile-web-app-capable META 标签以及引入apple-touch-icon图标链接来实现（该图标链接必须是特定尺寸），另外还需要添加合法的.apple-mobile-web-app-status-bar-style META 标签。这样，在使用移动 Safari 浏览器打开时，会自动隐藏浏览器的导航栏和状态栏，让Web App获得更加原生的体验。

不过，对于Web App来说，至今还有一个让我们痛苦不已的诉求，那就是想要能够脱离浏览器独立运行，且不影响任何浏览器正常功能的方式，即「随开随用」。对于这个痛点，我们可以使用HTML5中的「应用缓存」和「Web Worker」来解决。

1. 应用缓存

HTML5 的应用缓存特性就是为了解决Web App在离线、网络环境差的情况下能够继续工作的问题。应用缓存相当于浏览器的一个快照，它会缓存App的资源文件和页面，这些文件包括 HTML、CSS、JavaScript、图片等等，缓存了这些文件后，Web App 就可以在没有网络连接的情况下进行访问。

2. Web Worker

Web Worker 主要用于Web App多线程处理，将运算量大的任务完全交由Web Worker去完成处理，这样就不会阻塞了主线程的处理。从而提升Web App的性能和用户体验。Web Worker 主要有两种类型：

Dedicated Worker：专用于应用程序的工作者，与主线程分离，不共享JS中的代码变量。

Shared Worker：用于多个网页应用程序之间的通信，共享JS中的代码变量，具有共用和复用的功能。

3. 框架

当然，在实际开发中，我们也可以使用一些自适应大小和方便移动端开发的框架来更快速地构建应用。最常用的是利用 React Native 和 Weex 这两个框架实现 Web App 的混合开发。React Native 是 Facebook 的一款移动应用开发框架，针对不同的设备 OS，React Native 会自动选择不同的实现方式。而 Weex 是阿里巴巴宣传的“一套代码多端运行”的跨平台框架，特别是最近推出的可离线使用的Weex小程序，受到了越来越多开发者的关注。

总体来说，利用 HTML5 技术开发手机应用程序可以实现“一次开发，多端通用”，运用 Web Worker 解决多线程问题和应用缓存以解决断网情况下的离线使用问题。目前在市场上，Facebook 的 React Native h5制作淘宝类app和阿里巴巴的Weex是应用非常广泛的两个跨平台解决方案。