オフライン最優先

インターネット接続は不安定であったり、存在しないこともあるため、まずオフラインを検討する必要があります。 インターネットに接続していないかのようにアプリを作成します。アプリがオフラインになったら、 アプリがオンラインのときにさらに多くのことを行なうために必要なネットワーク機能の数を表します。以下のヒントをお読みください。 実装する方法を学びました

概要

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 と 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_enabledfalse に設定します。 以下を使用します。

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

データのローカル保存

次の表に、データをローカルに保存するためのオプションを示します(データの管理もご覧ください)。

API最適な用途メモ
Chrome Storage API少量の文字列データ設定や状態に適しています。リモートで簡単に同期(必須ではありません)。割り当ての関係上、大量のデータには適していません。
IndexedDB API構造化データデータを高速検索できるようにします。unlimitedStorage 権限で使用します。
ファイルシステム APIその他ファイルを保存できるサンドボックス領域を提供します。unlimitedStorage 権限で使用します。

データのリモート保存

一般的に、データをリモートで保存する方法は任意ですが、一部のフレームワークや API が役立ちます(MVC アーキテクチャをご覧ください)。Chrome Storage API を使用する場合、同期可能なデータはすべて自動的に アプリがオンラインで、ユーザーが Chrome にログインするたびに同期されるようになります。ユーザーがログインしていない場合は ログインを求められます。ただし、ユーザーが同期済みのデータを共有した場合、 ユーザーがアプリをアンインストールします。{QUESTION: true?}

ユーザーのパスワードを保存するデータを収集し、ユーザーがそのデータを ユーザーはアプリを再インストールしても 快適に利用できます

UI をデータから分離する

MVC フレームワークを使用すると、データを完全に統合するようにアプリを設計、実装できます。 アプリのデータビューとは別に考えられますMVC フレームワークのリストについては、MVC アーキテクチャをご覧ください。

アプリがカスタム サーバーと通信する場合、HTML のチャンクではなく、サーバーからデータが提供される必要があります。検討する 詳しく解説します。

データをアプリから分離すると、データの別のビューを提供しやすくなります。 たとえば、一般公開データのウェブサイト ビューを提供できます。ウェブサイトビューだけでなく ユーザーが Chrome を使用していないときに便利ですが、検索エンジンがデータを見つけられるようになります。

テスト

次のような状況でアプリが正常に動作するようにしてください。

  • アプリがインストールされ、すぐにオフラインになる。つまり、アプリの初回使用は、 はオフラインです。
  • アプリが 1 台のパソコンにインストールされてから、別のパソコンに同期されます。
  • アプリがアンインストールされてすぐに再インストールされる。
  • アプリは、同じプロファイルの 2 台のパソコンで同時に実行されています。アプリは動作する必要があります。 1 台のパソコンがオフラインになっても ユーザーはそのパソコンでさまざまな操作を行い パソコンがオンラインになります
  • アプリの接続は断続的であり、多くの場合、オンラインとオフラインが切り替わります。

また、ユーザーの あります。