Handling Background Task UI

In this lesson, you will learn how to bridge the gap between invisible background processes and your user interface by implementing persistent notifications.

Bridging the Gap

When your application performs tasks like syncing large datasets, uploading media, or tracking geolocation, these processes continue to run even if the user minimizes your app. If the user doesn't know what’s happening, they might become confused or forcefully close the app, which can kill your background process. Persistent notifications act as the "UI thread" for your background tasks, keeping the user informed without requiring them to stay inside your app.

Communicating Status

To communicate status effectively, your background task needs to send updates to a notification service. You should treat this notification as a state-driven component that mirrors your background logic.

For example, when a file upload starts, you display a notification with a progress indicator. As the bytes transfer, you update the notification text. Once complete, you transition the notification to a success state. This prevents the user from wondering if the app has frozen.

// A conceptual update flow for a background process
const handleUpload = async (file) => {
  // Show the initial "Uploading..." notification
  await Notifications.displayNotification({
    title: 'Syncing Data',
    body: '0% complete',
    ongoing: true, // This makes the notification persistent
  });

  // Perform background logic
  uploadTask.on('progress', (percent) => {
    // Update the existing notification UI
    Notifications.updateNotification({
      body: `${percent}% complete`,
    });
  });
};

Keeping the User Informed

The key to good UX here is being proactive. If a task is "persistent," the notification should reflect that with an ongoing flag. This tells the operating system that this notification is tied to an active task and should not be dismissible by the user. When the task finishes, you remove or update the notification to a "Finished" state. By providing this visual feedback, you turn an invisible system event into a reliable, trustworthy part of your user's experience.

Key Takeaway: Persistent notifications serve as the primary UI for background tasks, ensuring users feel informed and in control even when your application is not in the foreground.