従来の HTML5 技術はネットワーク状態に影響されやすく、HTML5 ページのパフォーマンスが低下する可能性があります。オフラインパッケージは、HTML5 の利点を維持しながら、この問題に対処します。
オフラインパッケージは、HTML、JavaScript、CSS ファイルなどの静的リソースをバンドルした圧縮ファイルです。オフラインパッケージを事前にローカルデバイスにダウンロードできます。クライアントがパッケージを開くと、ローカルデバイスから直接リソースを読み込むため、ネットワーク状態が HTML5 ページに与える影響を最小限に抑えることができます。
HTML5 オフラインパッケージを使用すると、以下の利点があります。
ユーザーエクスペリエンスの向上：静的リソースをアプリケーションに埋め込んでリリースします。ユーザーが初めてアプリケーションを開くとき、ネットワーク経由でこれらのリソースをダウンロードする必要がなく、すぐにアプリケーションの使用を開始できます。
動的更新の有効化：新しいバージョンや緊急修正をリリースする際に、変更されたリソースをオフラインパッケージに配置します。構成を更新することで、アプリケーションは自動的に更新をダウンロードします。これにより、アプリストアのレビュープロセスを経る必要がないため、ユーザーはより早く更新を受け取ることができます。
オフラインパッケージの仕組み
このセクションでは、以下のトピックを含め、オフラインパッケージの仕組みについて説明します。
オフラインパッケージの構造
オフラインパッケージは、.amr フォーマットの圧縮ファイルです。.amr 拡張子を .zip に変更してファイルを解凍すると、HTML リソースと JavaScript コードが含まれていることがわかります。HTML5 コンテナーがこれらのリソースを読み込んだ後、WebView でレンダリングできます。
例えば、次の図は iOS システム上の一般的なリソースプランのフォルダ構造を示しています。
第 1 レベルのフォルダ：
20150901のような、一般的なリソースプランの ID を表します。第 2 レベルのフォルダとそのサブディレクトリには、カスタムリソースファイルが含まれています。すべてのフロントエンドファイルを 1 つのフォルダに保存します。フォルダには、
/wwwのようなカスタム名を付けることができます。また、オフラインパッケージがデフォルトで開くメインエントリファイル (例：/www/index.html) を設定します。
オフラインパッケージの種類
HTML5 開発では、Zepto や FastClick などの基本的な共通ライブラリを頻繁に使用します。アプリの WebView では、キャッシュの信頼性が低い場合があります。一部のデバイスモデルでは、アプリを閉じるとキャッシュが自動的にクリアされます。HTML5 ページのパフォーマンスをさらに向上させるには、グローバルオフラインパッケージを使用します。グローバルオフラインパッケージは、一連の共通リソースを特別なアプリパッケージにバンドルし、クライアントに送信します。
オフラインパッケージは、次の種類に分類されます。
グローバルオフラインパッケージ：複数のアプリケーションで共有できるパブリックリソースが含まれています。
プライベートオフラインパッケージ：単一のアプリケーションでのみ使用できます。
グローバルオフラインパッケージを使用する場合、システムは HTML5 ページにアクセスするたびに、このパッケージからの読み取りを試みます。パッケージにリクエストされたリソースが含まれている場合、システムはネットワークからではなく、パッケージから直接リソースを取得します。したがって、グローバルオフラインパッケージメカニズムの主な目的は、共通ライブラリの使用を管理することです。
幅広いクライアントカバー率と汎用性を確保するために、このパッケージは通常、少なくとも月に 1 回更新されます。オフラインパッケージのサイズも厳密にコントロールされます。
レンダリングプロセス
HTML5 コンテナーがリソースをリクエストするとき、ローカルリソースとオンラインリソースの両方に同じ URL を使用してアクセスします。
HTML5 コンテナーはまずリクエストをインターセプトします。リクエストがインターセプトされた後、次のいずれかが発生します。
ローカルリソースがリクエストを満たすことができる場合、HTML5 コンテナーはローカルリソースを使用します。
ローカルリソースがリクエストを満たすことができない場合、HTML5 コンテナーはオンラインリソースを使用します。
したがって、WebView はリソースがローカルかオンラインかを認識しません。
オフラインパッケージのダウンロードは、その構成に依存します。
[ダウンロードタイミング] が [Wi-Fi のみ] に設定されている場合、オフラインパッケージは Wi-Fi ネットワーク上でのみバックグラウンドで自動的にダウンロードされます。
[ダウンロードタイミング] が [すべてのネットワークでダウンロード] に設定されている場合、オフラインパッケージは Wi-Fi 以外のネットワークでも自動的にダウンロードされ、ユーザーデータを消費します。このオプションは注意して使用してください。
オフラインパッケージのダウンロードが完了する前にユーザーがアプリを開いた場合、アプリはフォールバックアドレスにリダイレクトしてオンラインページを表示します。フォールバック機能は、オフラインパッケージのダウンロードが完了していないケースを処理します。オフラインパッケージが公開されると、対応するオンラインバージョンも CDN に公開されます。オンラインバージョンのフォルダ構造は、オフラインパッケージと同じです。フォールバックアドレスは、オフラインパッケージ情報とともにローカルデバイスに送信されます。オフラインパッケージのダウンロードが完了していない場合、クライアントはページリクエストをインターセプトし、対応する CDN アドレスにリダイレクトします。これにより、アプリはいつでもオンラインページとオフラインページを切り替えることができます。
オフラインパッケージの実行モード
オフラインパッケージを開くには、次の手順を実行します。
パッケージ情報をリクエストします。クライアントはサーバーにオフラインパッケージ情報をリクエストし、ローカルデータベースに保存します。オフラインパッケージ情報には、パッケージのダウンロードアドレスとバージョン番号が含まれます。
オフラインパッケージをダウンロードします。クライアントはサーバーからモバイルフォンにオフラインパッケージをダウンロードします。
オフラインパッケージをインストールします。クライアントは、ダウンロードフォルダから携帯電話のインストールフォルダにパッケージをコピーします。
仮想ドメイン名
仮想ドメイン名は、オフラインアプリケーションでのみ機能する独自のコンテナーメカニズムです。ページがクライアントに保存された後、WebView は file スキームを使用してローカルデバイスからアクセスします。しかし、その場合、ユーザーはアドレスバーにファイルパスを見ることができます。これにより、次の問題が発生します。
ユーザーエクスペリエンス。ユーザーがファイルアドレスを見ると、公開されているアドレスが安全でない、または見慣れないと感じる可能性があります。
セキュリティ。file プロトコルにはローカルパスが直接含まれます。これは、どのユーザーでもファイルパスを見ることができることを意味し、セキュリティリスクを生み出します。
これらの理由から、ファイルパスを直接使用してアクセスする代わりに、仮想ドメイン名メカニズムを使用してください。仮想ドメイン名は、URL スキーム仕様に準拠した HTTPS ドメインアドレスです (例：https://xxxxxxx.HTML5app.example.com)。仮想ドメイン名の親ドメイン (例：example.com) は、お客様が登録したドメイン名である必要があります。
仮想ドメイン名の標準フォーマットは次のとおりです。
https://{appid}.HTML5app.example.com.