インターネット接続は不安定であったり存在しない場合もあるため、まずオフラインを考慮する必要があります。つまり、インターネットに接続していないかのようにアプリを作成します。アプリがオフラインでも動作するようになったら、アプリがオンラインのときにより多くの動作を実行するために必要なネットワーク機能を追加します。オフライン対応アプリを実装する際のヒントをご覧ください。
概要
Chrome アプリでは、以下を無料で利用できます。
- アプリのファイル（JavaScript、CSS、フォントのすべてとその他必要なリソース（画像など））は、すでにダウンロードされています。
- アプリで Chrome Storage API を使用して、少量のデータを保存し、必要に応じて同期できます。
- アプリでオンライン イベントとオフライン イベントをリッスンすることで、接続の変化を検出できます。
ただし、こうした機能だけでは、アプリがオフラインで動作することは保証できません。オフライン対応アプリは、以下のルールに従う必要があります。
- 可能な限りローカルデータを使用してください。
- インターネットのリソースを使用する場合は、
XMLHttpRequestを使用してリソースを取得し、データをローカルに保存します。Chrome Storage API、IndexedDB、Filesystem API を使用して、データをローカルに保存できます。 - アプリの UI をデータから分離する。
- UI とデータを分離することで、アプリのデザインを改善し、オフラインでの使用を可能にするタスクを容易にするだけでなく、ユーザーデータの他のビューを提供することもできます。MVC フレームワークを使用すると、UI とデータを分離できます。
- アプリはいつでも閉じることができると仮定します。
- アプリケーションの状態を（可能であればローカルとリモートの両方で）保存し、ユーザーが中断したところから再開できるようにする。
- アプリを十分にテストします。
- 一般的なシナリオと難しいシナリオの両方でアプリが正しく動作することを確認します。
セキュリティ制限
Chrome アプリでは、リソースを配置できる場所が限られています。
- ローカルデータはユーザーのマシン上で可視となり、安全に暗号化できないため、機密データはサーバー上に残す必要があります。たとえば、パスワードやクレジット カード番号を現地の地域に保存しないでください。
- アプリが実行するすべての JavaScript は、アプリのパッケージに格納する必要があります。インラインにすることはできません。
すべての CSS スタイル、画像、フォントは、最初はアプリのパッケージ内またはリモート URL に配置できます。リソースがリモートリソースの場合、HTML で指定することはできません。代わりに、
XMLHttpRequestを使用してデータを取得します（外部リソースを参照するをご覧ください）。次に、blob URL でデータを参照するか、（可能であれば）Filesystem API を使用してデータを保存してから読み込みます。
ただし、外部のサイトから動画や音声など、サイズの大きいメディア リソースを読み込むことはできます。このルールの例外の理由の 1 つは、アプリの接続が制限されているか、接続がない場合に、<video> 要素と <audio> 要素が適切にフォールバック動作をするからです。また、XMLHttpRequest URL と blob URL を使用したメディアの取得と提供では、ストリーミングや部分バッファリングが現在許可されていないことも理由です。
サンドボックス化された iframe を提供するには、<webview> タグを作成します。コンテンツをリモートにできますが、Chrome アプリの API に直接アクセスすることはできません（外部ウェブページを埋め込むをご覧ください）。
Chrome アプリに対する制限の一部は、コンテンツ セキュリティ ポリシー（CSP）によって適用されています。このポリシーは常に以下にあり、Chrome アプリでは変更できません。
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
Offline_enabled の指定
アプリがオフラインで適切に動作することが前提となります。そうでない場合は、その事実をアドバタイズし、ユーザーがオフラインのときに起動アイコンがグレー表示になるようにします。これを行うには、アプリ マニフェスト ファイルで offline_enabled を false に設定します。
{
"name": "My app",
...
"offline_enabled": false,
...
}
データのローカル保存
次の表に、データをローカルに保存するオプションを示します（データの管理もご覧ください）。
| API | 最適な用途 | メモ |
|---|---|---|
| Chrome Storage API | 少量の文字列データ | 設定や状態に適しています。リモートで簡単に同期できます（必須ではありません）。割り当てがあるため、大量のデータには適していません。 |
| IndexedDB API | 構造化データ | データの迅速な検索を可能にします。unlimitedStorage 権限で使用。 |
| ファイルシステム API | それ以外 | ファイルを保存できるサンドボックス領域を提供します。unlimitedStorage 権限で使用。 |
データをリモートに保存する
一般的に、データをリモートで保存する方法は任意ですが、一部のフレームワークや API が役立つ場合があります（MVC アーキテクチャをご覧ください）。Chrome Storage API を使用する場合は、アプリがオンラインになってユーザーが Chrome にログインするたびに、同期可能なすべてのデータが自動的に同期されます。ユーザーがログインしていない場合は、ログインを求められます。ただし、ユーザーがアプリをアンインストールすると、同期されたデータは削除されます。{質問: 本当ですか？}
ユーザーがアプリを再インストールした場合に優れたユーザー エクスペリエンスを提供できるよう、ユーザーのデータはアンインストール後少なくとも 30 日間は保存しておくことをおすすめします。
UI をデータから分離する
MVC フレームワークを使用すると、データに対するアプリのビューから完全に分離するようにアプリを設計して実装できます。MVC フレームワークの一覧については、MVC アーキテクチャをご覧ください。
アプリがカスタム サーバーと通信する場合、サーバーは HTML のチャンクではなく、データを提供する必要があります。RESTful API の観点から考えてください
データをアプリから分離すると、データの別のビューを簡単に提供できるようになります。たとえば、一般公開データのウェブサイト ビューを提供できます。ウェブサイト ビューは、ユーザーが Chrome を離れているときに役立つだけでなく、検索エンジンがデータを見つけやすくなります。
テスト
次のような状況でもアプリが正常に動作することを確認します。
- アプリはインストールされたが、すぐにオフラインになる。つまり、アプリの初回使用はオフラインです。
- アプリは、あるパソコンにインストールされてから、別のパソコンに同期されます。
- アプリがアンインストールされた後、すぐに再びインストールされます。
- アプリは、同じプロファイルの 2 台のパソコンで同時に実行されています。1 台のパソコンがオフラインになり、ユーザーがそのパソコンで大量の処理を行い、その後再びオンラインになったときに、アプリは妥当な動作をしなければなりません。
- アプリの接続が断続的で、オンラインとオフラインが頻繁に切り替わる。
また、アプリがユーザーのマシンにユーザーの機密情報（パスワードなど）を保存しないことを確認します。