PWAでバックグラウンドに回ったことを検知する方法 #JavaScript

PWAでバックグラウンドに回ったことを検知する方法になります。

PWAでバックグラウンドに回ったことを検知する方法

if (window.matchMedia('(display-mode: standalone)').matches) {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
     console.log('PWAでバックグラウンドに回りました')
     /* PWAでバックグラウンドに回った時に実行する処理を記述 */
    }
  })
}

解説

PWAの判定について

PWAの判定はmatchMediaでおこなっています。
manifest.jsonで設定したディスプレイモードによって変わります。

window.matchMedia('(display-mode: fullscreen)')

window.matchMedia('(display-mode: minimal-ui)')

バックグラウンドに回ったかの判定について

バックグラウンドに回ったかの判定はvisibilitychangeでおこなっています。

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
   console.log('バックグラウンドに回りました')
  }
})