もちろん、このアプリケーションにはワークスペースにアイコンがあり、オフラインで作業する必要があります。 インターネットに接続せずに、次の画像のようになります。
まず、構成済みのWebサーバーが必要です。その後、既にキャッシュを操作できます。 iPhone自体を設定します。Settings.app> Safari> Developerで、デバッグコンソールを有効にします。
アイコン57x57とウェルカム画面の画像320x460を作成しましょう。 PNGまたはJPG形式である必要があります。
HTML
index.html
<! DOCTYPE HTML> <html manifest='tetris.manifest'> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <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" /> <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"> <title> </ TITLE> </ HEAD> <body> <! - -> <script type="text/javascript" src="tetris.js"> </ SCRIPT> </ BODY> </ HTML>
次のことに注意してください。
DOCTYPEではHTMLを記述しますが、HTML5は記述しません。
manifest = "cache.manifest"、apple-mobile-web-app-capable-これはキャッシュ用です。
apple-mobile-web-app-status-bar-style-ステータスバーとナビゲーションバーを非表示にします。
apple-touch-iconは、アプリケーションアイコンの画像へのポインターです。
apple-touch-startup-image-これは、ようこそ画面の画像を示します。
マニフェスト
tetris.manifestファイルには、キャッシュ用のファイルのリストが含まれている必要があります。
キャッシュマニフェスト
＃バージョン3
tetris.css
index.html
tetris.js
＃オフラインアイコン
icon.png
startup.png
CSS
body { overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}
Javascript
スクリプトはhttps://github.com/daltonridenhour/DOM-Tetrisから取得されました。
しかし、それは普通のブラウザ用に作られたため、キーボードのないデバイスで使用するための小さなドピレンでした。
スクリプトには、アプリケーションのすべての機能が含まれています。
Teterisの作業バージョンへのリンク：
http://tetris.alexkessinger.net/
アプリケーションの機能は、データウェアハウス（localStorageまたはwebdatabase）を操作して、たとえばゲームの結果を保存することで拡張できます。
ドキュメントリンク
http://dev.w3.org/html5/spec/offline.htmlのキャッシュについて
Safariの開発http://developer.apple.com/library/safari/navigation/
iPhoneイベント記事
http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html
Webデータベースのドキュメントhttp://dev.w3.org/html5/webdatabase/
PS 原作への長い道のりを失ったアキラに感謝