Mobile Platform as a Service:オフラインパッケージの概要

従来の HTML5 技術はネットワーク環境の影響を受けやすいため、HTML5 ページのパフォーマンスが低下する可能性があります。オフラインパッケージを使用することで、HTML5 のメリットを維持しながら、このような問題を解決できます。

オフラインパッケージとは、HTML、JavaScript、CSS、およびその他のページ内静的リソースを含むパッケージのことです。オフラインパッケージをダウンロードし、クライアントで開き、ローカルに読み込むことで、ネットワーク環境が HTML5 ページに及ぼす影響を排除できます。

HTML5 オフラインパッケージを使用する利点は次のとおりです。

• ユーザーエクスペリエンスの向上: オフラインパッケージを使用してページ内静的リソースをアプリケーションに埋め込み、アプリケーションをリリースします。アプリケーションを初めて起動するときに、ネットワーク環境に依存せずにリソースをダウンロードし、すぐにアプリケーションを使用できます。

• 動的更新の実現: 新しいバージョンをプッシュしたり、緊急リリースを行う場合は、変更されたリソースをオフラインパッケージに入れ、構成を更新してアプリケーションが自動的に更新をダウンロードできるようにします。そのため、App Store でアプリケーションの承認を得ることなく、ユーザーにできるだけ早く更新を提供できます。

オフラインパッケージのしくみ

このセクションでは、オフラインパッケージのしくみについて、次の点から説明します。

• オフラインパッケージの構造

• オフラインパッケージの種類

• レンダリングプロセス

オフラインパッケージの構造

オフラインパッケージは .amr 圧縮ファイルです。接尾辞 amr を zip に変更することで、含まれている HTML リソースと JavaScript コードを確認できます。HTML5 コンテナーが再起動すると、すべてのリソースとコードが WebView でレンダリングされます。

次のスクリーンショットは、一般的なリソースパッケージの構造を示しています。

• レベル 1 ディレクトリ: 20150901 などの一般的なリソースパッケージの ID。

• レベル 2 とそのサブディレクトリには、カスタムリソースファイルが含まれています。/www など、すべてのフロントエンドファイルを同じディレクトリに保存し、現在のオフラインパッケージのメインエントリファイル（例: /www/index.html）を設定することをお勧めします。

  

オフラインパッケージの種類

一般的に、HTML5 開発では、zepto や fastclick など、いくつかの基本的な共通ライブラリが使用されます。アプリ内の WebView については、キャッシュが信頼できない場合があります。場合によっては、ユーザーが一部のデバイスモデルから終了すると、キャッシュが無効になります。

HTML5 ページのパフォーマンスをさらに向上させるために、グローバルオフラインパッケージを使用して一連の共通リソースを特別なアプリパッケージにパッケージ化し、そのパッケージをクライアントに配信できます。

オフラインパッケージは、次の種類に分類されます。

• グローバルオフラインパッケージ: グローバルオフラインパッケージには、複数のアプリケーションで共有できるパブリックリソースが含まれています。

• プライベートオフラインパッケージ: プライベートオフラインパッケージは、1 つのアプリケーションだけが排他的に使用できます。

グローバルオフラインパッケージを使用すると、HTML5 ページにアクセスするたびに、システムはパッケージの読み取りを試みます。オフラインパッケージに対応するリソースがある場合、システムはネットワークに依存せずに、パッケージから直接リソースを取得します。ただし、グローバルオフラインパッケージのメカニズムは、共通ライブラリの使用を解決するように設計されています。

クライアントのカバー率と普遍性を確保するために、オフラインパッケージは通常、少なくとも 1 か月に 1 回更新され、パッケージサイズは厳密に制限されています。

レンダリングプロセス

アプリケーションがリソースリクエストを開始すると、ローカルリソースまたはオンラインリソースへのアクセスに使用される URL は同じです。

HTML5 コンテナーは最初にリクエストをインターセプトし、次に次の処理を行います。

• リクエストに対応できるローカルリソースがある場合、HTML5 コンテナーはそのローカルリソースを使用します。

• 適切なローカルリソースがない場合、HTML5 コンテナーはオンラインリソースを使用します。

したがって、ローカルリソースかオンラインリソースかに関係なく、WebView は影響を受けません。

オフラインパッケージのダウンロードは、オフラインパッケージの作成時の設定によって異なります。

• ダウンロード時間が Wi-Fi 経由でのみダウンロードに設定されている場合、オフラインパッケージは Wi-Fi ネットワークでのみバックグラウンドで自動的にダウンロードされます。

• ダウンロード時間が すべてのネットワーク経由でダウンロードに設定されている場合、Wi-Fi 以外のネットワークでは、オフラインパッケージはユーザーのモバイルデータを使用して自動的にダウンロードされます。そのため、注意して設定してください。

• ユーザーがアプリを使用しているときにオフラインパッケージが完全にダウンロードされていない場合は、代わりにフォールバックアドレスに移動してオンラインページが表示されます。

  フォールバック技術は、オフラインパッケージが完全にダウンロードされていない場合に発生します。システムは、オフラインパッケージをリリースするたびに、対応するオンラインバージョンを CDN で同期的にリリースします。オンラインパッケージは、オフラインパッケージと同じディレクトリ構造になっています。フォールバックアドレスは、オフラインパッケージと一緒にローカルに配信されます。オフラインパッケージが完全にダウンロードされていない場合、クライアントはページリクエストをインターセプトし、対応する CDN アドレスにリダイレクトして、オンラインページとオフラインページの間のランダムな切り替えを実現します。

オフラインパッケージの実行モード

オフラインパッケージを開くには、次の手順を実行します。

1. パッケージ情報の要求: サーバーからオフラインパッケージ情報を要求し、その情報をローカルデータベースに保存するまでのプロセスが含まれます。オフラインパッケージ情報には、ダウンロードアドレス、オフラインパッケージのバージョン番号などが含まれます。

2. オフラインパッケージのダウンロード: サーバーから携帯電話にオフラインパッケージをダウンロードします。

3. オフラインパッケージのインストール: ダウンロードディレクトリからモバイルインストールディレクトリにオフラインパッケージをコピーします。

仮想ドメイン

仮想ドメインはコンテナー独自のメカニズムであり、オフラインアプリケーションでのみ機能します。ページがクライアントに保存されると、WebView はファイルスキーマを使用してページを読み込み、アクセスします。このように、ユーザーはアドレスバーにファイルパスを表示できます。これにより、次の問題が発生します。

• ユーザーエクスペリエンス: ユーザーは、ファイルアドレスが表示されると、公開されたファイルアドレスについて不安を感じ、不快に思う可能性があります。

• セキュリティ: ファイルプロトコルにはローカルパスが含まれており、すべてのユーザーがファイルパスを表示できるため、潜在的なセキュリティリスクがあります。

上記の懸念事項を考慮して、純粋なファイルパスを使用するのではなく、仮想ドメイン名メカニズムを使用することをお勧めします。仮想ドメイン名は、URL スキーマ仕様に準拠した HTTP アドレスです（例: https://xxxxxxx.h5app.example.com）。親ドメイン名 example.com は、自分で登録したドメインである必要があります。

https://xxxxxxx.h5app.example.com

関連リンク

• オフラインパッケージを生成する