Home

PageVisibilityEvent.js は、ページ/タブの open, close, show, hide といったイベントをハンドリングする手段を提供します。

Features

• PageVisibilityEvent.on でページの open, close, focus, blur イベントをハンドリングできます
  • ページを切り替えるタイミング(バックグラウンド ⇔ フォアグラウンド)で任意のアクションを起こすことができます
  • page hidden のタイミングでサウンドやBGMを一時停止し、 page showで再開することができます
  • page hidden のタイミングで通信を控えめにしたり、リソースの解放を行う事ができます

Browser compatibility

Browser	PageVisibilityEvent.on
Safari	6.1+
Chrome	33+
AOSP Browser	4.0+
Firefox	⭕
Edge	⭕
IE	10+

PageVisibilityEvent.js は page-visibility event が利用できない環境においても、 類似したイベント(focus, blur)をハンドリングすることで、同等の機能を提供しています。

以下は、テストページ から収集した、 ブラウザ毎のページを表示/非表示タイミングで発生するイベントの一覧です。

Browser	page open	page blur	page focus	page close
iOS 5.1 Safari	pageshow	pagehide	pageshow	(none)
iOS 6.1 Safari	pageshow	pagehide	pageshow	pagehide
iOS 7.0 Safari	pageshow	visibilitychange	visibilitychange	pagehide
Safari 6.0.4	pageshow	blur	focus	(none)
Safari 6.1.1	pageshow	visibilitychange	visibilitychange	pagehide
AOSP Browser 2.3.6	pageshow	(none)	(none)	pagehide
AOSP Browser 4.0.1	pageshow	blur	focus	pagehide
AOSP Browser 4.3.x	pageshow	blur	focus	pagehide
Chromium 33+	pageshow	visibilitychange	visibilitychange	pagehide
Chrome for Android 32	pageshow	visibilitychange	visibilitychange	(none)
Chrome for Android 39	pageshow	visibilitychange	visibilitychange	pagehide
Chrome	pageshow	visibilitychange	visibilitychange	pagehide

ページの切り替えでイベント(blur, focus)が発生しないブラウザ(Android Browser 2.x)では、 polyfill で機能を代替できないため PageVisibilityEvent.js を導入してもイベントをハンドリングできません。

Usage

window.onload = function() {
    if (PageVisibilityEvent.enable) {
        var hidden = PageVisibilityEvent.isHidden();

        PageVisibilityEvent.on(handlePageVisibilityEvent);
    }
};

function handlePageVisibilityEvent(hiddenState, eventType) {
    console.log(hiddenState ? "page hide" : "page show");

    if (hiddenState) {
        sound.pause();               // サウンドの再生を一時停止
        network.setBackgroundMode(); // 通信をバックグラウンドモードに
        pageResource.gc();           // 解放可能なリソースを解放する
    } else {
        network.setForegroundMode(); // 通信をフォアグラウンドモードに
        sound.play();                // サウンドの再生を再開
    }
});