offlineダウンロード - offlineソースコードダウンロード

offline

その他のソースコード

Add Turkish + miscellaneous fixups

ダウンロード

このプロジェクトは積極的にメンテナンスされていません。

オフライン

0.6.0 より前のユーザーへの注意: オフラインでは、以前は接続ステータスを検出する方法の 1 つとしてクラウドフロントでホストされているファイルを使用していました。このメソッドは現在非推奨であり、イメージは削除されています。オフライン 0.7.0 以降にアップグレードしてください。

ユーザーが接続を失ったときのアプリのエクスペリエンスを向上させます。

Ajaxリクエストを監視して失敗を探します
画像または偽のリソースをリクエストして接続ステータスを確認します
接続がダウンしている間に行われた ajax リクエストを自動的に取得し、接続が復元された後にそれらを再作成します。
美しいテーマを備えたシンプルな UI
3kb 縮小圧縮

インストール

JavaScript、テーマの 1 つ、言語の 1 つをサイトに含めます。これで完了です。

UI インジケーターを使用せずに JavaScript API のみを使用するには、CSS ファイルを省略します。

サイト上でどのように表示されるかを確認したい場合は、インターネットを切断するか、シミュレーターを試してください。

高度な

オプションで、スクリプトを取り込んだ後にOffline.optionsを設定することで、何らかの構成を提供できます。

オプション (いずれも関数として提供可能) とそのデフォルト:

 { // ページの読み込み時にすぐに接続ステータスを確認する必要があります。  checkOnLoad: false, // 接続があるかどうかを判断するために、AJAX リクエストを監視する必要があります。  interceptRequests: true, // 接続がダウンしたときに定期的に自動的に再テストする必要があります (無効にするには false に設定します)。  reconnect: { // 再確認するまで何秒待つ必要があります。    InitialDelay: 3, // 再試行の間にどれくらいの時間待つ必要があります。    遅延: (1.5 * 最後の遅延、上限は 1 時間) }, // 接続がダウンしている間に失敗したリクエストを保存して再作成する必要がありますか。  request: true, // ユーザーを楽しませるために、接続がダウンしている間でもヘビ ゲームを表示する必要がありますか?  // 通常のビルドには含まれていないため、 // offline.min.js に加えて js/snake.js を導入する必要があります。  ゲーム: false}

プロパティ

Offline.check() : 現在の接続ステータスを確認します。

Offline.state : 接続の現在の状態「アップ」または「ダウン」

Offline.on(event, handler, context) : イベントをバインドします。イベント:

up: 接続がダウンからアップに移行しました
down: 接続がアップ状態からダウン状態になりました。
confirmed-up: 接続テストは成功しました。接続がすでに確立されている場合でも実行されます。
confirmed-down: 接続テストが失敗しました。接続がすでにダウンしている場合でも実行されます。
チェック中: 接続をテストしています
reconnect:started: 再接続プロセスを開始しています
reconnect:stopped: 再接続の試行が完了しました
reconnect:tick: チェックが行われていない場合、再接続試行中に 1 秒ごとに発生します
再接続:接続中: 現在再接続中です
reconnect:failure: 再接続チェックの試行が失敗しました
request:flush: 保留中のリクエストはすべて再作成されました
リクエスト:キャプチャ: 新しいリクエストが保留されています

Offline.off(event, handler) : イベントのバインドを解除します

チェック中

デフォルトでは、オフラインは/favicon.icoロードする XHR リクエストを作成し、接続を確認します。そのようなファイルがない場合、コンソールでは 404 と表示されますが、それ以外の場合は正常に動作します (404 であっても、接続が確立されていることを意味します)。ヒットする URL を変更できます (204 で応答するエンドポイントが最適です)。

 Offline.options = {checks: {xhr: {url: '/connection-test'}}};

チェックする URL がページと同じオリジンであることを確認してください (接続方法、ドメイン、ポートがすべて同じである必要があります)。そうしないと、CORS の問題が発生します。 Access-Controlヘッダーをエンドポイントに追加して最新のブラウザーで問題を修正できますが、IE9 以前では引き続き問題が発生します。

別のドメインでテストを実行したい場合は、イメージ方式を試してください。ドメインを越えることが許可されている画像を読み込みます。

 Offline.options = {チェック: {画像: {url: 'my-image.gif'}、アクティブ: '画像'}}

1 つの注意点は、イメージ方式では 404 と本物の接続の問題を区別できないため、どのようなエラーもオフラインでは接続の問題として表示されることです。

オフラインには、 'up'と呼ばれるチェックと'down'と呼ばれる別のチェックも含まれており、テストのためにそれぞれ稼働中または停止中であることを常に報告します。これらをアクティブにするには、 activeオプションを設定するか、 data-simulate名前と値'up'または'down'を使用してスクリプトタグに data 属性を追加するか、 localStorage.OFFLINE_SIMULATEを'up'または'down'に設定します。