ブラウザに戻ってきたことを検知する

はじめに

ブラウザからスマホアプリに遷移した後、アプリから再度ブラウザ（特定のページ）に戻ってきた時に処理を行うという場面があったのでその際の解決方法について記録します。

PageVisibilityAPI

調べてみたところ、PageVisibilityAPIを使うことで検知できそうなことがわかりました。
Page Visibility APIについては以下通りです。

タブを使って閲覧している場合、どのウェブページもバックグラウンドにあってユーザーから見えていない場合があります。 Page Visibility API では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。
引用元:Page Visibility API - MDN Web Docs

PageVisibilityAPIによりウィンドウが最小化されたり、他のタブに切り替えた時にvisibilitychangeイベントを送信し、ページ変化を検知します。

こちらがPageVisibilityAPIを用いたデモサイトです。
このデモサイトの動画再生中に、別タブを開いたりブラウザを最小化するとそれを検知し動画は一時停止状態になります。また、デモサイトのタブに戻るとそれを検知し動画を再生します。

実装

if (document.hidden !== undefined) {
  document.addEventListener('visibilitychange', onVisibilityChange);
} else if (document.webkitHidden !== undefined) {
  document.addEventListener('webkitvisibilitychange', onWebkitVisibilityChange);
}
function onVisibilityChange() {
   if (!document.hidden) {
    //ブラウザに戻ってきた際に行いたい処理
  }
}

function onWebkitVisibilityChange() {
  if (!document.webkitHidden) {
    //ブラウザに戻ってきた際に行いたい処理
  }
}

こちらの記事を参考にしました。

不明点について調べる

document.hiddenとは？

Document.hidden は読み取り専用のプロパティで、ページが非表示になっているとみられるかどうかを示す論理値を返します。
引用元：Document.hidden - Web API | MDN

ページがユーザーから隠された状態である場合trueを、そうではない場合はfalseを返します。

document.webkitHiddenとは？

おそらくdocument.hiddenのprefixがついたものだと思います。
ブラウザーの対応表を見ると一部ブラウザの対象バージョンについては、Implemented with the vendor prefix: webkitと記載があるのでこのように実装しています。

参考