Background services and web workers for react-native
Java Objective-C JavaScript Python
Switch branches/tags
Nothing to show
Clone or download
Latest commit bc26b9d Aug 2, 2016
devfd committed Aug 2, 2016 fix #4
fix #6
Permalink
Failed to load latest commit information.
android fix #6 Aug 2, 2016
example/WorkerSampleApp fix #6 Aug 2, 2016
ios iOS download worker file from same location as main bundle file Jul 28, 2016
js cleanup js code Jul 26, 2016
.gitignore cleanup ignore files Jul 26, 2016
.npmignore fix android sample app Jul 28, 2016
LICENSE repo init May 6, 2016
README.md update readme Aug 2, 2016
index.js cleanup js code Jul 26, 2016
package.json fix #4 Aug 2, 2016

README.md

react-native-workers

Spin worker threads and run CPU intensive tasks in the background. Bonus point on Android you can keep a worker alive even when a user quit the application 🎆

Features

  • JS web workers for iOS and Android
  • access to native modules (network, geolocation, storage ...)
  • Android Services in JS 🎉

Installation

npm install react-native-workers --save

Automatic setup

simply rnpm link react-native-workers and you'r good to go.

Manual setup

iOS

  1. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name". Look under node_modules/react-native-workers/ios and add Workers.xcodeproj
  2. Add libWorkers.a to Build Phases -> Link Binary With Libraries

Android

in android/settings.gradle

 include ':app', ':react-native-workers'
 project(':react-native-workers').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-workers/android')

in android/app/build.gradle add:

dependencies {
   ...
   compile project(':react-native-workers')
}

and finally, in your MainApplication.java add:

import co.apptailor.Worker.WorkerPackage; // <--- This!

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new WorkerPackage() // <--- and this
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

Note: only the official react native modules are available from your workers (vibration, fetch, etc...). To include additional modules in your workers add them to the WorkerPackage constructor. Like this:

new WorkerPackage(new MyAwesomePackage(), new MyAmazingPackage())`

JS API

From your application:

import { Worker } from 'react-native-workers';

/* start worker */
const worker = new Worker("path/to/worker.js");

/* post message to worker. String only ! */
worker.postMessage("hello from application");

/* get message from worker. String only ! */
worker.onmessage = (message) => {

}

/* stop worker */
worker.terminate();

From your worker js file:

import { self } from 'react-native-workers';

/* get message from application. String only ! */
self.onmessage = (message) => {
}

/* post message to application. String only ! */
self.postMessage("hello from worker");

Lifecycle

  • the workers are paused when the app enters in the background
  • the workers are resumed once the app is running in the foreground
  • During development, when you reload the main JS bundle (shake device -> Reload) the workers are killed

Todo

  • Android - download worker files from same location as main bundle
  • iOS - download worker files from same location as main bundle
  • script to package worker files for release build
  • load worker files from disk if not debug