The dark side of Background tasks in React Native - React Alicante 2018

In this talk we are going to explore how to manage background tasks within your React Native application. Background tasks are essentially tasks that run when the app is not in the foreground (visible).

Transcript

3. Hi, I am Ferran! Software Engineer at Callstack @ferrannp
6. ~60% of the code is not JavaScript
7. Why this talk?
8. Location Audio Gyroscope Accelerometer Heart rate etc
10. App elements
11. React UI
12. … almost all npm packages you love
13. React Native A wrapper for native code …with a bridge!
14. Android Services, Broadcast receivers, Content providers, Widgets…
15. iOS Background modes, Touch ID, Face ID…
16. Your app in the background
17. Need to understand it
18. Android vs iOS It’s different!
19. React Native: The virus
20. The Android way Services
21. Activity Service BroadcastReceiver, JobScheduler, etc Bridge
22. Activity Service BroadcastReceiver, JobScheduler, etc Bridge
23. The iOS way iOS background modes
24. App instance Bridge Background Modes
25. App instance Bridge Background Modes
26. Audio, AirPlay and Picture in Picture Location updates Newsstand downloads External accessory communication Use Bluetooth LE accessories Act as Bluetooth LE accessory Background fetch Remote notifications
27. Playing music
28. <audio>
29. react-native-track-player https://github.com/react-native-kit/react-native-track-player
30. iOS <MediaPlayer />
31. Android <MediaPlayer /> <ExoPlayer />
32. JS initPlayer = async () => { try { await TrackPlayer.setupPlayer(); } catch (e) { // Error } };
33. iOS RCT_EXTERN_METHOD(setupPlayer:(NSDictionary *)data resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject);
34. iOS @objc(setupPlayer:resolver:rejecter:) func setupPlayer( config: [String: Any], resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) { do { try AVAudioSession.sharedInstance() .setCategory(AVAudioSessionCategoryPlayback) try AVAudioSession.sharedInstance() .setActive(true) } catch { reject(error) } resolve(NSNull()) }
35. setupPlayer() AVAudioSession .setActive(true); App instance Background Modes
36. Android @ReactMethod public void setupPlayer(ReadableMap data, final Promise promise) { final Bundle options = Arguments.toBundle(data); waitForConnection(new Runnable() { @Override public void run() { binder.setupPlayer(options, promise); } }); }
37. Android Intent intent = new Intent(context, PlayerService.class); context.startService(intent); intent.setAction(PlayerService.ACTION_CONNECT);
38. Activity Service setupPlayer() player.setDataSource() startService()
39. JS playNewTrack = async () => { const { track } = this.props; await TrackPlayer.add(track); await TrackPlayer.play(); };
40. iOS
41. Android private void waitForConnection(Runnable r) { ... Intent intent = new Intent(context, PlayerService.class); context.startService(intent); intent.setAction(PlayerService.ACTION_CONNECT); ... }
42. Android public void destroyPlayer() { playback.destroy(); if(!Utils.isStopped(playback.getState())) { onStop(); } playback = null; if(serviceStarted) { service.stopSelf(); serviceStarted = false; } }
43. Service destroy() stopSelf() Activity
44. Service destroy() stopSelf() Activity
46. react-native-spotify-streamer https://github.com/ferrannp/react-native-spotify-streamer
47. Sync data
48. Pulling Native side External API Background Fetch Every X time fetch()
49. Android Headless JS https://facebook.github.io/react-native/docs/headless-js-android.html
50. Activity Headless JS Service BroadcastReceiver, JobScheduler, etc Starts a JS task + inits the bridge
51. Headless JS public abstract class HeadlessJsTaskService extends Service implements HeadlessJsTaskEventListener
52. Headless JS protected void startTask( final HeadlessJsTaskConfig taskConfig ) { ... reactInstanceManager .createReactContextInBackground(); ... invokeStartTask(reactContext, taskConfig); ... }
53. Setup Headless JS - Native public class SyncShowsService extends HeadlessJsTaskService { @Override protected HeadlessJsTaskConfig getTaskConfig(Intent intent) { return new HeadlessJsTaskConfig( "SyncShowsTask", null, // We could pass arguments 120000, // Timeout in ms false // Task is allowed in foreground ); } } <service android:name=“com.me.mypackage.SyncShowsService” /> …also on your AndroidManifest.xml
54. Setup Headless JS - JS module.exports = async (taskData) => { // Sync code }; AppRegistry .registerHeadlessTask(‘SyncShowsTask', () => require(‘./SyncShowsTask’));
55. When to start it?
56. When to start it? “ Now, whenever you start your service, e.g. as a periodic task or in response to some system event / broadcast, JS will spin up, run your task, then spin down. “
57. Android SyncAdapter https://developer.android.com/training/sync- adapters/creating-sync-adapter.html
58. Android SyncAdapter Schedule periodic syncs Network connectivity Battery performance ACTION_BOOT_COMPLETED
59. react-native-sync-adapter https://github.com/ferrannp/react-native-sync-adapter
60. react-native-sync-adapter Android SyncAdapter Android HeadlessJsTask Service JS code Starts Executes
61. react-native-sync-adapter $ yarn add react-native-sync-adapter $ react-native link react-native-sync-adapter
62. JS import SyncAdapter from 'react-native-sync-adapter'; class MyRoot extends Component { componentDidMount() { SyncAdapter.init({ syncInterval, syncFlexTime, }); } } AppRegistry .registerHeadlessTask('TASK_SYNC_ADAPTER', () => SyncShowsTask);
63. Android @ReactMethod public void init(int syncInterval, int syncFlexTime) { // All Java code described in Android docs } @Override public void onPerformSync(...) { Intent service = new Intent( getContext(), HeadlessService.class ); getContext().startService(service); }
65. https://blog.callstack.io/react-native-and-native-modules-the-android-syncadapter-517ddf851bf4
66. iOS Headless JS
68. https://react-native.canny.io/feature-requests/p/headless-js-for-ios
69. https://react-native.canny.io/feature-requests/p/headless-js-for-ios
70. iOS Headless JS No such concept
71. iOS Background Fetch Mode https://developer.apple.com/library/content/documentation/iPhone/Conceptual/ iPhoneOSProgrammingGuide/BackgroundExecution/BackgroundExecution.html
72. “The app regularly downloads and processes small amounts of content from the network.”
73. iOS Background Fetch Mode Network availability Device is awake Data & time previous attempt 30 seconds every 15 minutes
74. react-native-background-fetch https://github.com/transistorsoft/react-native-background-fetch
75. react-native-background-fetch $ yarn add react-native-background-fetch $ react-native link react-native-background-fetch
76. iOS
77. JS import BackgroundFetch from 'react-native-background-fetch'; BackgroundFetch.configure( { minimumFetchInterval: 240 }, () => { setTimeout(() => { console.log(‘[JS] Finish'); BackgroundFetch.finish(); }, 30000); // Sync code }, error => { console.log('[JS] Error', error); } );
78. iOS RCT_EXPORT_METHOD(configure:(NSDictionary*)config failure:(RCTResponseSenderBlock)failure) { ... [fetchManager configure:config callback:^(UIBackgroundRefreshStatus status) { ... [fetchManager addListener:RN_BACKGROUND_FETCH_TAG callback:handler]; [fetchManager start]; }]; }
79. iOS - (void) performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult)) handler applicationState:(UIApplicationState)state { NSLog(@"[%@ performFetchWithCompletionHandler]", TAG); if (!hasReceivedEvent) { hasReceivedEvent = YES; launchedInBackground = (state == UIApplicationStateBackground); } ... for (NSString* componentName in listeners) { void (^callback)() = [listeners objectForKey:componentName]; callback(); } ... }
81. Broadcast Receivers On Android
82. HeadlessTaskService Receiver wifi.STATE_CHANGE startService() startTask()
83. Android - Be aware New background limitations: https:// developer.android.com/about/versions/ oreo/background (API 26) JobScheduler (API 21), SyncAdapter startForegroundService (API 26)
84. Wake up recap!
85. The bridge App instance React Native
86. The bridge App instance Background modes React Native
87. The bridge App instance Background modes (+ waking up mechanisms) React Native
88. The bridge Activity Service App instance Background modes (+ waking up mechanisms) React Native
89. React Native The bridge Activity Service (Headless) Waking up mechanisms (receivers, SyncAdapter, etc) App instance Background modes (+ waking up mechanisms) JS task
 (same Android & iOS)
90. There is no magic
91. We are mobile developers
92. Thank you! @ferrannp