How can I detect that my a website/PWA has been loaded into the foreground?

I have a Progressive Web App for Ipad written in React, and I’d like to detect when a user reloads the app after switching to another. Is there a browser event or serrvice worker event I can subscribe to for when the app is reloaded?

Along a similar thread, is there a way to tell that a progressive web app has been force closed and reopened?

Thanks

1 thought on “How can I detect that my a website/PWA has been loaded into the foreground?”

  1. You can use the GoogleChromeLabs/page-lifecycle library for a cross-browser method of subscribing to page lifecycle events.

    import lifecycle from 'page-lifecycle'
    
    lifecycle.addEventListener('statechange', ({ oldState, newState }) => {
      console.log(`${oldState} -> ${newState}`)
    })
    

    In my testing, iOS PWA is limited in which events fire:

    • Switch away: active → passive, passive → hidden
    • Switch to: hidden → passive, passive → active
    • Activate app switcher and back: no change

    I did not find any way to detect that the app was force closed and reopened.

    Reply

Leave a Comment