タブがアクティブかどうかでタイトルを変更する方法

Akiflowのサイトで別タブを閲覧中の時、タイトルが「🥺 Come back」になっており、どのように実装しているのか気になって調べたのでご紹介します。

Akiflow閲覧中

Akiflow閲覧してない

コード

documentのvisibilitychangeイベントで、タブのアクティブが変更されたか監視できます。
また、document.visibilityStateでタブがアクティブかどうか判別できます。

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    document.title = '閲覧中';
    return
  }

  document.title = '🥺 閲覧してない';
});

おまけ

上記方法とは少し違いますが、ウィンドウのフォーカスが変更された時の判別方法もご紹介します。

window.addEventListener('focus', () => {
  document.title = 'フォーカス中';
});

window.addEventListener('blur', () => {
  document.title = '🥺 フォーカス外れた';
});

まとめ

タブがアクティブかどうかで、タイトルを変更する方法をご紹介しました。
あまり使用するイベントでは無いですが、ユーザーが閲覧してない時に重い処理を止めたい場合などに有効かなと思いました。

参考サイト

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。