The Mysterious Life of Web Apps in the Background
A research to understand what happens with our sites and PWAs when they are not visible on desktop or not active on mobile
by Maximiliano Firtman
Session delivered during CityJS Conference 2020 (online), September 2020.
Do you know what happens with your code when the user presses the home button, or reply to a WhatsApp message while using your web app or website? Let's spy on the lifecycle of web apps today and uncover the secrets of their mysterious life in the background.
When coding web apps, understanding the life cycle is crucial to offer the best possible experience. In this session, we will analyze the lifecycle of a web app on the desktop, Android, and iOS in different scenarios, such as what happens in the background on standalone PWAs, and browser's tab.
We will analyze the Page Visibility API and the Page Lifecycle API with real-world examples, including how to save and restore the app's state using new DOM events (resume and freeze).
Understanding this mysterious life in the background will help us understand how to save battery, how to deal with games, timer-based tasks, and animations. We will see examples in real-time on how different browsers react with standard timers, requestAnimationFrame calls, Web Workers and Service Workers when the web app goes to the background.