画布 2D Web 应用程序/iOS Web 应用程序
本章讨论了针对桌面浏览器和 iOS 设备的 HTML Web 应用程序之间的基本区别。假设您熟悉上一章 HTML Web 应用程序入门。如果您尚未阅读该章节，则应先阅读该章节。
要打开 iOS 设备上的 Web 应用程序，您只需使用 iOS 设备上的 Safari 网页浏览器（或其他浏览器）打开 HTML 文件。因此，如果您要为 iOS 设备开发 Web 应用程序，则应将 HTML 文件放到 Web 上，以便您可以使用 Safari 访问它。（如果您没有访问 Web 服务器的权限，您可以使用诸如 Dropbox 帐户的公共文件夹之类的服务。）
如果您使用上一章 HTML Web 应用程序入门 中的示例进行尝试（您可以 在线 访问），您可能会发现一些区别
- 您可以通过倾斜 iOS 设备来更改其方向，Web 应用程序会相应旋转；但是，Web 应用程序随后可能不再填充整个显示屏，因为它使用了不正确的视窗。
- 在 iOS 设备上，您可以使用默认的触控手势来平移和缩放 Web 应用程序，这对于标准网页很有意义，但对于 Web 应用程序通常没有太大意义。
- 您可以通过点击共享图标，然后点击“添加到主屏幕”来将 Web 应用程序的链接添加到 iOS 设备的主屏幕。但是，此链接只会使用 Safari 打开 Web 应用程序，因此如果您的 iOS 设备未连接到互联网，则它将无法正常工作。
本章解释了如何解决这些问题；即，它展示了如何设置正确的视窗大小、如何处理方向变化、如何禁用默认触控手势以及如何配置 Web 应用程序，以便用户可以将其下载到他们的设备并在离线时像任何其他应用程序一样使用它（而无需表明它在 Safari 中运行）。
本章末尾介绍了一个集成了所有这些技术的示例。
为了设置不应由用户缩放或平移的 Web 应用程序的正确视窗大小，您应该在 head 标签之后立即使用此 HTML meta 标签
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no" >
这告诉 iOS 设备上的 Safari 浏览器始终将视窗设置为设备的完整宽度、禁用用户缩放并从不缩放开始（即缩放系数为 1.0）。（请注意，高度不应设置为设备高度，因为这会导致问题。）
方向变化可用于调用事件函数（类似于 onresize，但使用 onorientationchange）；但是，方向变化通常也会导致调整大小事件。因此，仅更新画布的内容以适应新的宽度和高度就足够了。如果您想为纵向和横向方向渲染不同的内容，您可以检查宽度是否大于高度（横向方向）或高度是否大于宽度（纵向方向）。
Apple 开发人员可以在 Apple 的 Safari Web 内容指南 中的 配置视窗 下找到有关设置视窗的更多信息。有关处理方向变化的更多信息，请参见 处理事件。
为了禁用所有默认鼠标和触控手势，必须在 JavaScript 中定义一个自定义事件处理程序
function ignoreEvent(event) {
event.preventDefault();
}
event.preventDefault(); 行禁用了特定事件的默认行为。要针对所有鼠标点击和多点触控事件调用事件处理程序 ignoreEvent，可以使用以下 body 标签
<body bgcolor="#000000" onload="init()" onresize="update()"
style="-webkit-user-drag:none; -webkit-user-select:none; "
onclick="ignoreEvent(event)" ontouchstart="ignoreEvent(event)"
ontouchmove="ignoreEvent(event)" ontouchend="ignoreEvent(event)"
ontouchcancel="ignoreEvent(event)">
此外，此标签还包括属性 style="-webkit-user-drag:none; -webkit-user-select:none; " 以禁用与 Web 应用程序的 HTML 元素的任何用户交互。
Apple 开发人员可以在 Apple 的 Safari Web 内容指南 中的 处理事件 下找到有关阻止默认行为的更多信息。
有几种方法可以让 Web 应用程序看起来更像 iOS 设备上的标准应用程序。这些方法包括
- 自定义用户主屏幕上的图标
- 自定义 Web 应用程序的启动图像
- 隐藏 Safari 界面
- 更改状态栏的外观
- 指定离线使用的资源（特别是图像）
该图标应为大小完全为 57 × 57 像素的 PNG 文件。如果该文件位于与 HTML 页面相同的目录中，并且文件名是 filename.png，则可以这样指定
<link rel="apple-touch-icon" href="filename.png">
对于 Apple 开发人员，有关更多信息，请参见 Apple 的 Safari Web 内容指南 中的 配置 Web 应用程序。
启动图像应为大小完全为 320 × 460 像素的 PNG 文件（纵向方向）。如果文件名是 filename.png，则可以这样指定
<link rel="apple-touch-startup-image" href="filename.png">
有关 Apple 开发人员的更多信息，请参见 配置 Web 应用程序。
Safari 界面被一个 `meta` 标签隐藏，该标签应放在 `head` 标签之后。
<meta name="apple-mobile-web-app-capable" content="yes">
如果添加了此行，则还可以更改状态栏的外观；例如更改为黑色。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
其他选项包括 `default` 和 `black-translucent`。
有关 Apple 开发人员的更多信息，请参见 配置 Web 应用程序。
为了允许用户在未连接互联网的情况下使用 Web 应用，您必须指定一个清单文件，该文件列出了应与 Web 应用一起下载的所有资源文件（特别是图像）。（这并不包括清单文件本身、Web 应用的 HTML 文件、上面提到的 Web 应用图标或启动图像。）
清单文件是一个纯文本文件，文件扩展名为 `manifest`，并且行分隔符符合 MacOS 约定。（在 MacOS X 计算机上，可以使用 `TextEdit` 创建此类文件。在 Windows 上，可以使用允许自定义行分隔符字符的编辑器，例如 geany。）第一行必须为 `CACHE MANIFEST`。接下来的行必须包含资源文件的名称（每行一个名称）。如果操作不正确，Web 应用将无法在没有互联网连接的情况下工作，但不会出现任何错误消息。（还要注意，当 Web 应用首次从主屏幕启动时，iOS 设备必须连接到互联网。）
一个名为 `mywebapp.manifest` 的清单文件示例，它指定了两个图像：
CACHE MANIFEST
image1.jpg
image2.jpg
清单文件本身必须在 Web 应用的 `html` 标签中指定
<html manifest="mywebapp.manifest">
对于 Apple 开发者，Apple 的 Safari Web 内容指南 中的 在客户端存储数据 部分提供了更多信息。HTML5 指定了相关的 离线 Web 应用。Mozilla 开发者网络提供了有关 使用应用程序缓存 的良好介绍。
为了应用所述技术，您必须下载 Web 应用所需的所有图像文件。例如，我从维基百科公共资源库下载了一个 PNG 图像 并将其命名为 `HTML5_Shiny_Icon.png`。然后，我（在 Mac 上使用 TextEdit）创建了一个名为 `ios_basic.manifest` 的清单文件，以指定图像文件。清单文件的内容如下：
CACHE MANIFEST
HTML5_Shiny_Icon.png
清单文件 `ios_basic.manifest` 随后在 HTML 文件的 `html` 标签中指定。此外，我创建了一个简单的 320×460 像素的启动 PNG 图像，名称为 `startup.png`，以及一个 57×57 像素的图标，名称为 `icon.png`。这两个文件由 HTML 文件中的 `link` 标签指定。请注意，HTML 文件、清单文件和图像文件都在同一个目录中。此示例基于上一章 HTML Web 应用入门 的示例，但添加了本章中讨论的内容。（完整的示例，包括所有文件，可 在线 获取。）HTML 文件如下所示
<!DOCTYPE HTML>
<html manifest="ios_basic.manifest">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png">
<link rel="apple-touch-startup-image" href="startup.png">
<title>my web app</title>
<script>
var myImage = new Image();
function init() {
myImage.onload = update; // call update when image is loaded
myImage.src = "HTML5_Shiny_Icon.png";
}
function ignoreEvent(event) {
event.preventDefault();
}
function update() {
// get canvas and context
var myCanvas = document.getElementById("mycanvas");
var myContext = myCanvas.getContext("2d");
// set canvas size to window size
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
// clear context to transparent black
myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
// render in front-to-back order
myContext.globalCompositeOperation = "destination-over";
// write some text in black
myContext.fillStyle = "#000000";
myContext.font = "bold 48px Helvetica, sans-serif";
myContext.textAlign = "center";
myContext.textBaseline = "middle";
myContext.fillText("Hello, world!", 170, 60);
// draw the image (behind the text)
myContext.drawImage(myImage, 10, 20, 50, 51);
// fill the background of the canvas with light blue
myContext.fillStyle = "#C0C0FF";
myContext.fillRect(0, 0, myCanvas.width, myCanvas.height);
}
</script>
</head>
<body bgcolor="#000000" onload="init()" onresize="update()"
style="-webkit-user-drag:none; -webkit-user-select:none; "
onclick="ignoreEvent(event)" ontouchstart="ignoreEvent(event)"
ontouchmove="ignoreEvent(event)" ontouchend="ignoreEvent(event)"
ontouchcancel="ignoreEvent(event)">
<canvas width="400" height="300" id="mycanvas"
style="position:absolute; left:0px; top:0px; "></canvas>
</body>
</html>
完整的示例可 在线 获取，以便您轻松尝试。请注意，还有一个 `title` 标签，它指定了将 Web 应用下载到 iOS 设备（通过点击分享图标）时的默认名称。将 Web 应用添加到 iOS 设备的主屏幕后，您应该在有活动互联网连接的情况下启动它一次。之后，即使 iOS 设备处于离线状态，您也应该能够启动它。
当您在 iOS 设备上为 Safari 开发时，请记住在每次编辑后将文件保存为新名称，并在新文件中使用新文件，以确保 Safari 不会使用文件的缓存版本（不包含您的更改）。