畫布 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 不會使用檔案的快取版本（不包含您的更改）。