KnowHub

ページライフサイクル API

Android、iOS、および最新の Windows システムは、いつでも自律的にバックグラウンド プロセスを停止し、システム リソースを適時に解放できます。言い換えれば、Web ページはいつでもシステムによって破棄される可能性があります。以前のブラウザ API ではこの状況がまったく考慮されていなかったため、開発者はシステムがページを破棄したときを検出する方法がありませんでした。

この問題を解決するために、W3C は新しいページ ライフサイクル API を開発しました。これは、Web ページの誕生からアンインストールまでの動作モデルを統一し、開発者が Web ページのステータスのさまざまな遷移に対応できるようにする新しいイベントを定義します。

この API を使用すると、開発者は Web ページの次の状態を予測し、ターゲットを絞ったさまざまな処理を実行できます。 Chrome 68 はこの API をサポートしています。古いブラウザの場合は、Google が開発した互換性ライブラリ [PageLifecycle.js] (https://github.com/GoogleChromeLabs/page-lifecycle) を使用できます。

ライフサイクルの段階

Web ページのライフサイクルは 6 つの段階に分かれており、各瞬間はそのうちの 1 つの段階にのみ存在します。

(1)アクティブステージ

アクティブフェーズでは、Web ページが表示され、入力フォーカスがあります。

(2)受動段階

パッシブ段階では、Web ページは表示されますが、入力フォーカスがなく、入力を受け入れることができません。 UI の更新 (アニメーションなど) は引き続き実行されます。この段階は、デスクトップ上に同時に複数のウィンドウがある場合にのみ発生します。

(3)隠しステージ

非表示ステージでは、ユーザーのデスクトップは他のウィンドウによって占有されており、Web ページは表示されませんが、まだフリーズされていません。 UI の更新は実行されなくなりました。

(4)終了ステージ

終了ステージでは、ユーザーが積極的にウィンドウを閉じるか、同じウィンドウ内の他のページに移動するため、現在のページがブラウザーによってアンロードされ、メモリからクリアされ始めます。このフェーズは常に非表示フェーズの後に発生することに注意してください。つまり、ユーザーが現在のページから積極的に離れると、常に最初に非表示フェーズに入り、次に終了フェーズに入ります。

このフェーズでは Web ページがアンロードされ、このフェーズでは新しいタスクは開始されず、実行中のタスクが長時間実行されると終了する可能性があります。

(5) 凍結ステージ

Web ページが非表示ステージに長時間留まり、ユーザーが Web ページを閉じなかった場合、ブラウザーは Web ページをフリーズして、Web ページを凍結ステージに移行させる可能性があります。ただし、長期間操作がなかった場合、表示状態のページが凍結状態に移行する可能性もあります。

この段階の特徴は、Web ページに CPU コンピューティング リソースが割り当てられなくなることです。タイマー、コールバック関数、ネットワーク リクエスト、DOM 操作は実行されませんが、実行中のタスクは完了します。ブラウザでは、少数のタスクを実行できるように、凍結ステージのページを短期間定期的に復活させ、一時的に非表示状態に戻すことを許可する場合があります。

(6)廃棄ステージ

Web ページが長期間凍結ステージにあり、ユーザーがページを起動しない場合、破棄ステージに入ります。つまり、ブラウザーは自動的に Web ページをアンロードし、Web ページのメモリ使用量をクリアします。ただし、Passive ステージの Web ページが長期間操作されなかった場合、直接 Discarded ステージに入る可能性があります。

これは通常、ユーザーの介入なしにシステムによって強制されます。通常、リソースは限られているため、このフェーズでは新しいタスクやいかなる種類の JavaScript コードも実行できません。

Web ページがブラウザによって自動的に破棄された後も、そのタブ ウィンドウはそのまま残ります。ユーザーがこのタブ ページに再度アクセスすると、ブラウザはサーバーにリクエストを再送信し、Web ページを再度リロードして、アクティブ ステージに戻ります。

一般的なシナリオ

以下は、いくつかの一般的なシナリオにおける Web ページのライフサイクルの変更です。

(1) ユーザーは Web ページを開いた後、他のアプリに切り替えますが、しばらくしてから初めて Web ページに戻ります。

Web ページがアクティブから非表示に変わり、再びアクティブに戻ります。

(2) ユーザーが Web ページを開いた後、別のアプリに切り替えて長時間使用すると、システムが Web ページを自動的に破棄します。

Web ページが [アクティブ] から [非表示] に変わり、次に [凍結] に変わり、最後に [破棄] に変わります。

(3) ユーザーは Web ページを開いた後、別のアプリに切り替え、タスク マネージャーからブラウザーのプロセスをクリアします。

Web ページがアクティブから非表示に変わり、その後終了します。

(4) システムがタブ内のページを破棄した後、ユーザーはタブを再度開きます。

Web ページが破棄からアクティブに変わります。

イベント

ライフサイクルの各段階には、開発者がリスニング機能を指定するための独自のイベントがあります。これらのイベントのうち、新しく定義されたイベントは 2 つだけ (freeze イベントと resume イベント) で、その他は既存のものです。

Web ページのライフサイクル イベントは、基礎となるフレームであるか埋め込まれたフレームであるかに関係なく、すべてのフレームでトリガーされることに注意してください。つまり、埋め込まれた <iframe> Web ページは、トップレベル Web ページと同時に次のイベントをリッスンします。

注目のイベント

「focus」イベントは、Web ページがパッシブ ステージからアクティブ ステージに変化するときなど、ページが入力フォーカスを取得したときにトリガーされます。

ブラーイベント

「blur」イベントは、Web ページがアクティブ ステージからパッシブ ステージに変化するときなど、ページが入力フォーカスを失ったときにトリガーされます。

可視性変更イベント

visibilitychange イベントは、Web ページの可視性ステータスが変化するとトリガーされます。これは通常、次のシナリオで発生します。

  • ユーザーがページを非表示にし (タブを切り替え、ブラウザを最小化する)、ページはアクティブ ステージから非表示ステージに変わります。
  • ユーザーが非表示ページに再度アクセスすると、ページは非表示ステージからアクティブステージに変わります。
  • ユーザーがページを閉じると、ページは最初に非表示ステージに入り、次に終了ステージに入ります。

このイベントのコールバック関数は、document.onvisibilitychange プロパティを通じて指定できます。

フリーズイベント

「フリーズ」イベントは、Web ページが凍結ステージに入るとトリガーされます。

凍結フェーズに入るときに呼び出されるコールバック関数は、document.onfreeze プロパティで指定できます。

関数ハンドルフリーズ(e) {
  // FROZEN への遷移を処理します
}
document.addEventListener('freeze', handleFreeze);

# または
document.onfreeze = function() { … }

このイベントのリスニング機能は最大 500 ミリ秒しか実行できません。また、すでに開かれているネットワーク接続のみを再利用でき、新しいネットワーク要求を開始することはできません。

Frozen ステージから Discarded ステージに入るときにはイベントはトリガーされず、コールバック関数は Frozen ステージに入るときにのみ指定できることに注意してください。

イベントを再開

「再開」イベントは、Web ページが凍結ステージを終了し、アクティブ / パッシブ / 非表示ステージに変わるときにトリガーされます。

「document.onresume」プロパティは、ページが凍結ステージを出て使用可能な状態になるときに呼び出されるコールバック関数を指します。

関数ハンドル再開(e) {
  // 状態遷移を処理します FROZEN -> ACTIVE
}
document.addEventListener("再開", handleResume);

# または
document.onresume = function() { … }

ページショー イベント

pageshow イベントは、ユーザーが Web ページをロードするとトリガーされます。このとき、ロードされた新しいページである場合もあれば、キャッシュから取得されたページである場合もあります。キャッシュから取得した場合、イベント オブジェクトの event.persisted プロパティは true、それ以外の場合は false になります。

このイベントの名前は少し誤解を招きますが、ページの表示とはまったく関係がありません。ブラウザーの履歴レコードが変更されるだけです。

ページ非表示イベント

pagehide イベントは、ユーザーが現在の Web ページを離れて別の Web ページに入ったときにトリガーされます。その前提は、Web ページが表示されているかどうかに関係なく、ブラウザーの履歴レコードが変更される必要があるということです。

ブラウザが現在のページを後で再利用できるようにキャッシュに追加できる場合、イベント オブジェクトの event.persisted プロパティは true になります。 「本当」の場合。ページがキャッシュに追加されると、ページは凍結状態になり、追加されない場合は終了状態になります。

###アンロードイベント前

beforeunload イベントは、ウィンドウまたはドキュメントがアンロードされようとしているときにトリガーされます。このイベントが発生しても、ドキュメントは表示されたままであり、この時点でもアンインストールをキャンセルできます。このイベントの後、Web ページは終了状態になります。

アンロードイベント

unload イベントは、ページがアンロードされるときに発生します。このイベントの後、Web ページは終了状態になります。

現在のステージを取得する

Web ページがアクティブ、パッシブ、または非表示ステージにある場合は、次のコードを通じて Web ページの現在のステータスを取得できます。

const getState = () => {
  if (document.visibilityState === 'hidden') {
    「非表示」を返します。
  }
  if (document.hasFocus()) {
    「アクティブ」を返します。
  }
  「パッシブ」を返します。
};

Web ページが凍結および終了状態にある場合、タイマー コードは実行されないため、状態はイベント リスニングを通じてのみ判断できます。 Frozen ステージに入ると、「freeze」イベントを聞くことができ、Terminated ステージに入ると、「pagehide」イベントを聞くことができます。

文書.は破棄されました

タブが Frozen ステージにある場合、タブはいつでもシステムによって破棄され、Discarded ステージに入る可能性があります。ユーザーが後でタブを再度クリックすると、ブラウザはページをリロードします。

このとき、開発者はdocument.wasDiscardedプロパティを判断することで、以前のWebページが破棄されたかどうかを判断することができます。

if (document.wasDiscarded) {
  // この Web ページは元の状態ではなくなり、ブラウザによって破棄されました。
  //前の状態に戻す
  getPersistedState(self.discardedClientId);
}

同時に、破棄前の状態に戻すために、「window」オブジェクトに 2 つのプロパティ「window.clientId」と「window.discardedClientId」が追加されます。

参考リンク

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章