How to support Background Queue Processing in React Native

Anchal Srivastava
Technogise
Published in
3 min readApr 20, 2020

Recently, my colleague Varun Shukla and I developed an open source library to support background queue processing for React Native applications.

We call this library rn-background-queue-processor.

We developed this library while creating an offline first application in React Native where we needed our jobs to be processed in a queue in background.

Instead of using HeadlessJS, we used WorkManager API for background processing. This is because in HeadlessJS, tasks run in the same JS thread as UI code which means doing expensive operations would degrade user experience.

With this library, users can add and process different kinds of jobs in a queue with background persistence, i.e. they can process jobs in the background even if the app is closed. It is only supported in android as of now.

Jobs can include API calls, email jobs, downloading content for offline access, printing documents etc.

Features

  • Persistent queues

This library has an inbuilt, in-memory adapter which is non-persistent. But to achieve persistence, we designed it in such a way that users can use their own database.

As an example, we created a plugin to support RealmDB in our library, which we can use as an adapter: rn-background-queue-processor-realm-adapter

  • Job level priorities

Jobs are executed according to priorities using queues. Higher priority jobs (1) get processed before lower priority jobs (10). User needs to define the priority while creating a job, or the job will be assigned the lowest priority by default.

  • Job re-tries

There may be certain scenarios where jobs may fail and have to be re-tried. For example, in case a job gets timed out locally, it will be re-tried until the failed count matches the maximum retry attempts for the job, as defined by the user. The time-out duration can also be defined by the user.

For example, the user can set 4 seconds as the time-out duration and 6 as the number of re-tries allowed before it gets considered as a “failed job” and gets pushed in a failedJobSchema (user-defined).

Currently, we have set the above defaults as 2 seconds and 5 re-tries.

Users can also process the failed jobs again by calling the function processFailedJobs.

We used the WorkManager API which makes it easy to schedule deferrable, asynchronous tasks that are expected to run even if the app is closed.

Installation Steps

To install queue processor :

npm i @technogise/rn-background-queue-processor 

To install realm adapter for this library (optional):

npm i @technogise/rn-background-queue-processor-realm-adapter

Append the following lines to android/settings.gradle :

include ':technogise_rn-background-queue-processor'
project(':technogise_rn-background-queue-processor').projectDir = new File(rootProject.projectDir, '../node_modules/@technogise/rn-background-queue-processor/android/rnqp/')

Basic Usage

Here is a sample application.

In this application, we added some buttons to add jobs in a queue and process them in UI.

Import in Main Application

En-queuing a job is pretty straightforward. It simply takes a job and adds it onto the queue.

Add jobs to the queue and process them using worker class instance

Add worker instance in a file which is accessible from all locations in project. Beacuse we want worker instance to be a singleton.

import {Worker} from '@technogise/rn-background-queue-processor';export const worker = new Worker();

ExampleJob extends the main Job class. The ExampleJob class is a developer defined class that extends Job and has user defined methods execute, jobSuccess and jobFail.

Future Vision

  • Auto start processing after enqueuing the job.
  • Configurable hooks to start the queue.

This was a brief first look at a React Native Queue Processor.

The final code can be found on Github. Please feel free to hack around and share your feedback.

--

--