目录:
- 将图标添加到程序中
- 删除Safari工具栏
- 现在你的程序看起来很像一个应用程序，除非它只在连接到Internet时才运行。 HTML5有一个非常棒的功能，可以让您在第一次运行时在本地存储整个网页。然后，如果用户试图访问该程序并且系统不能上网，则运行本地游戏副本。从本质上说，程序在第一次被激活并下载到本地设备时被下载。
视频: 《从零玩转HTML5前端+跨平台开发》课时99 背景图片练习理解（编程开发 前端开发） 2024
现在每个人都想制作移动应用程序。这是一个很大的秘密。许多应用程序都是用HTML5，CSS和JavaScript编写的。您已经知道了使您的移动设备能够使用的应用程序所需的一切。更好的是，您不需要像学习本地应用程序那样学习新的语言，也不需要获得应用商店的许可或购买许可证。
iOS用户可以使用一些精彩的技巧。您可以设计程序，以便用户可以直接将图标添加到桌面。用户可以像任何其他应用程序一样启动程序。您还可以使浏览器隐藏正常的浏览器装备，以便您的程序看起来不像在浏览器中运行！
<！ - 1 - >原来这些效果很容易做到。
将图标添加到程序中
现代版本的iOS（iPhone / iPad操作系统）已经可以在桌面上存储任何网页。只需在Safari中查看网页，然后点击共享按钮。您将找到一个选项将网页保存到桌面。你可以指导你的用户这样做，他们将能够像普通的应用程序一样启动你的程序。
然而，保存的应用程序的默认图标是相当丑陋的。如果你想要一个漂亮的图标，你可以保存一个小图像作为一个。 PNG文件，并将其放在与您的程序相同的目录。然后，您可以将此行添加到您的页面（标题中），当用户保存程序时，该图像将出现在桌面上：
作为额外的好处，iPhone或iPad会自动调整图像以使其看起来像苹果图标，添加适合iOS安装版本的效果（在iOS6中四舍五入，在iOS7中保持平滑）
当然，这个图标技巧是苹果专用的机制。使用大多数Android版本时，您已将用主浏览器指定的书签添加到桌面，但没有自定义图标选项。如果您使用其他操作系统，则只会忽略apple-touch-icon指令。
删除Safari工具栏
虽然您的程序在主屏幕上看起来不错，但当用户激活程序时，程序仍然是Web浏览器的一部分。你可以很容易地用标题中的另一行隐藏浏览器工具栏：
除非从桌面调用程序，否则这段代码不会做任何不同的事情。但是，在这种情况下，它隐藏了工具栏，使程序看起来像一个成熟的应用程序。作为一个额外的好处，这个程序在全屏模式下运行，给你更多的游戏空间。再次，这是一个苹果专用的解决方案。在Android设备上实现相同的效果并不容易。
离线存储你的程序
现在你的程序看起来很像一个应用程序，除非它只在连接到Internet时才运行。 HTML5有一个非常棒的功能，可以让您在第一次运行时在本地存储整个网页。然后，如果用户试图访问该程序并且系统不能上网，则运行本地游戏副本。从本质上说，程序在第一次被激活并下载到本地设备时被下载。
这是一个相对简单的实现：
使程序稳定：
在使用脱机存储机制之前，您需要确保程序已经接近准备好了。至少，你需要确保你知道游戏所需的所有外部文件。
-
只能使用本地资源： 对于这种类型的项目，您不能依靠外部Internet，因此您需要将所有文件都放在本地。这意味着你不能真正使用PHP或外部文件。您需要拥有服务器上所有内容的本地副本。
-
建立一个cahce。清单文件： 查看包含您的游戏的目录，并创建一个名为的新文本文件。
-
写第一行： 缓存的第一行。清单文件应该只包含文本CACHE MANIFEST（全部用大写字母）。
-
制作目录中每个文件的列表： 写出目录中每个文件的名称，每行一个文件。小心你的大小写和拼写。
-
添加清单属性： 标签有一个名为manifest的新属性。使用它来向服务器描述可以找到缓存清单的地方：
-
正常加载页面： 您需要以正常的方式加载一次网页。如果全部设置正确，浏览器将悄悄地复制文件。
-
离线测试： 测试离线存储的最佳方法是临时关闭计算机上的无线访问，然后尝试访问该文件。如果事情解决了，你应该能够看到你的网页，就好像你还在线。
-
检查服务器设置： 如果脱机存储无效，则可能需要检查服务器管理。文本/清单MIME类型需要在服务器上配置。您可能不得不要求您的服务器管理员在中设置此选项。您帐户的htaccess文件：
-
addtype text / cache-manifest。清单 请注意，它可以采用缓存清单机制几个小时来识别更改，所以当您更改页面时，这些更改不会自动更新到本地浏览器。这就是为什么在项目开发周期结束时最好保存离线存档。
