App Lifecycle

App Lifecycle

App: Lifecycle Events, State and URL Open Hooks

The App plugin describes the app itself: getInfo() returned "version":"1.0","build":"1" from build.gradle (Gradle Files), and getState() "isActive":true. Its events matter more; BookNest listens for them in the Framework7 572,986 init hook of app.js, on native platforms only:

Lifecycle, URL and back-button listeners in src/js/lab.jsJavaScript

export function watchApp(f7) {
  const router = () => f7.views.current.router; // the visible tab's view
  App.addListener('appStateChange', ({ isActive }) => show('appStateChange', { isActive }));
  App.addListener('appUrlOpen', ({ url }) => {
    show('appUrlOpen', { url });
    router().navigate(url.replace('booknest://', '/')); // booknest://lab/ -> /lab/
  });
  App.addListener('backButton', ({ canGoBack }) => {
    const pages = router().history.length; // registering this disables the default back action
    show('backButton', { canGoBack, pages });
    if (pages > 1) router().back(); else App.minimizeApp();
  });
}

appUrlOpen needs an intent filter for the booknest scheme on MainActivity in the manifest (Links and Push with FCM covers verified App Links). Driving the emulator from the shell exercises every listener:

Home, relaunch, a deep link and two Back pressesShell

adb -s emulator-5558 shell input keyevent KEYCODE_HOME
adb -s emulator-5558 shell am start -n com.example.booknest/.MainActivity
adb -s emulator-5558 shell am start -a android.intent.action.VIEW -d booknest://lab/
adb -s emulator-5558 shell input keyevent KEYCODE_BACK
adb -s emulator-5558 shell input keyevent KEYCODE_BACK

Output

LAB appStateChange {"isActive":false}
LAB appStateChange {"isActive":true}
LAB appUrlOpen {"url":"booknest://lab/"}
LAB appStateChange {"isActive":true}
LAB backButton {"canGoBack":false,"pages":2}
LAB backButton {"canGoBack":false,"pages":1}
LAB appStateChange {"isActive":false}

The link opened the lab page, the first Back returned home, and the second minimized the app. canGoBack stayed false because it reports the WebView's history, which Framework7's router does not use, so the handler asks the router. Use appStateChange to pause polling and save drafts, since Android may kill a backgrounded app. minimizeApp() and backButton are Android-only.

MENU