The Mysterious Life of Web Apps in the Background
Max Firtman at CityJS 2020
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, browser's tab, and WebViews. We will analyze the Page Visibility API and the recent Page Lifecycle API with real-world examples, including how to save and restore the app's state using new DOM events (resume and freeze) and polyfills for non-compatible browsers, creating hooks and React design patterns.
We'll also cover what's possible with the Clients API within a Service Worker in terms of detection, messaging, and notifications.
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, AND how to announce our server or service worker that our context might disappear or that it went back from a frozen state. We will see examples in real-time on how different browsers react with standard timers, requestAnimationFrame calls, and pending network requests when the web app goes to the background.
Bio
Max Firtman (@firt) is a mobile + web developer, trainer, speaker, and writer. He has authored many books, including Programming the Mobile Web and High Performance Mobile Web published by O’Reilly Media, and many online courses at Lynda, LinkedIn Learning, PluralSight, O'Reilly Learning, Udemy and more publishers. He is a frequent speaker at conferences worldwide and he has been widely recognized for his work in the mobile-web community. He teaches mobile (Android & iOS), HTML5, PWA and web performance trainings for top companies around the world.
We'll also cover what's possible with the Clients API within a Service Worker in terms of detection, messaging, and notifications.
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, AND how to announce our server or service worker that our context might disappear or that it went back from a frozen state. We will see examples in real-time on how different browsers react with standard timers, requestAnimationFrame calls, and pending network requests when the web app goes to the background.
Bio
Max Firtman (@firt) is a mobile + web developer, trainer, speaker, and writer. He has authored many books, including Programming the Mobile Web and High Performance Mobile Web published by O’Reilly Media, and many online courses at Lynda, LinkedIn Learning, PluralSight, O'Reilly Learning, Udemy and more publishers. He is a frequent speaker at conferences worldwide and he has been widely recognized for his work in the mobile-web community. He teaches mobile (Android & iOS), HTML5, PWA and web performance trainings for top companies around the world.