Reaks Yerlisinde Başsız JS nedir?

Headless JS, JavaScript kodunu arka planda yürütmenize izin veren yerleşik bir dizi veritabanıdır, uygulama veya kullanıcı arayüzünün aktif olmadığı durumlarda bile.Foreground execution, app is visible and interaktif, Headless JS, Ana UI threadine bağlı olmayan işlemleri yürütmektir.Bu, kullanıcının yakınlaştığı veya açmadan önce devam etmesi gereken işlemler için gereklidir - veri senkronize etmek gibi, gelen bildirimler işlemek veya zamanlayıcı uyarıları işlemek. Headless JS köprüleri ana JavaScript runtime ve ana katmanları arasındaki boşlukları çalışır.

Common Use Cases for Headless JS

Headless JS'yi kullanmak ne zaman anlamak, projenize uygun olup olmadığına karar vermenize yardımcı olur: Tipik senaryolar şunları içerir:

  • [FONT:0)Data senkronizasyon - Uygulama arka planda olduğunda yeni içerik yükleme veya indirme.
  • [FONT:0)Push bildirim işlemi[[[Dönetici:0)[[Dönetici:0))[[Dönetici:0)))[[Dönetici:0) Uyarıyı gösteren özel bir mantıkla yapılır.
  • [FONT:0]Location update[[Dönetici: 1))[Döneticileri, geofencing veya gerçek zamanlı izleme için arka planda tutan GPS koordinatlarını içeriyor.
  • [FONT:0] Zaman tabanlı görevler[[Dönetici:0] – kullanıcının uygulama açmadığı takdirde, planlanan bir aralıkta (günde temiz ücretli) bir iş yürütür.
  • [FONT:0) Ev ekranından gerçek eylemleri[D Touch veya widget eylemi basındığında kısa bir operasyon gerçekleştirir.

Headless JS uzun süren veya ağır hesaplamalar için tasarlanmamıştır - sistem, uzun süre sürecek olan arka plan çalışmanız için, bunu alışkanlık olarak sunmuş gibi yerel hizmetlerle bir araya getirebilir.WorkManager) veya [[Döneticiler).BackgroundTasks).

Reaksiyon Yerlisinde Başsız JS: Step-by-Step

Headless JS'nin iki ana bölümünü de içerir: JavaScript eller oluşturmak ve her platform için yerel kodda kayıt olmak.

1. JavaScript arka plan Handler oluşturun

Yeni bir dosya yaratarak, örneğin:0) Bu dosya arka plan görevi tetiklendiğinde çalışan işlevi içerecektir. işlev bir dördüncü alır.The function takes aDANFLT:1). object, which can hold parameter passed from the native side.

// BackgroundTask.js
import { AppRegistry } from 'react-native';

const backgroundTask = async (taskData) => {
 console.log('Background task started with data:', taskData);
 // Your background logic goes here
 // For example, fetch new data from an API
 try {
 const response = await fetch('https://api.example.com/sync');
 const data = await response.json();
 // Store data in AsyncStorage or a local database
 console.log('Background sync complete');
 } catch (error) {
 console.error('Background task failed:', error);
 // Optionally throw an error to let the system know
 }
};

AppRegistry.registerHeadlessTask('BackgroundTask', () => backgroundTask);

Eller bir söz geri dönen bir işlev olmalıdır (veya bir amin işlevi). Sistem, görevi tam olarak düşünmeden önce çözme sözü için bekleyecektir.Eğer söz konusu reddedilirse, ana taraf bunu bir başarısızlık olarak tedavi edebilir.

2. Android Yerli Kodunda Görevi Kayıt

Android, görev yaşam döngüsünü yönetmek için kafasız görevi kaydetmenizi gerektirir (veya ESFLT:4). Ek olarak, AİLFLT:0)HeadJsTaskService) ihtiyacınız var.

[0]Adım - Update MainApp.java).

// android/app/src/main/java/com/yourapp/MainApplication.java
import com.facebook.react.HeadlessJsTaskService;

public class MainApplication extends Application implements ReactApplication {
 // ... existing code

 @Override
 public void onCreate() {
 super.onCreate();
 // Initialize ReactNative instance as usual
 // The task will be registered via AppRegistry in JavaScript
 }
}

Java'da açık bir kayıt, sistemin başlatılabileceği bir hizmet için gerekli değildir. – Reaks Yerli otomatik olarak JavaScript handler yerel bir göreve gönderir. Ancak, sistem tarafından başlatılabilir bir hizmet oluşturmanız gerekir.

B:0)Adım - Bir Başsız JsTaskHizmeti Yaratın[Döntme: 1)

Aynı pakette yeni bir Java sınıfı oluşturmak:

// android/app/src/main/java/com/yourapp/BackgroundTaskService.java
package com.yourapp;

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.HeadlessJsTaskService;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.jstasks.HeadlessJsTaskConfig;

public class BackgroundTaskService extends HeadlessJsTaskService {
 @Override
 protected HeadlessJsTaskConfig getTaskConfig(Intent intent) {
 Bundle extras = intent.getExtras();
 if (extras != null) {
 return new HeadlessJsTaskConfig(
 "BackgroundTask",
 Arguments.fromBundle(extras),
 5000, // timeout in ms
 true // allows task to run in foreground as well
 );
 }
 return null;
 }
}

Bu hizmet, niyetten (bir bildirimden veri gibi) herhangi bir ekstra alır ve JavaScript eller'e geçer. Zamanout, kaçak görevleri önler.

[[C.A.D.0)Adım C - Hizmeti AndroidManifest.xml).

<service android:name=".BackgroundTaskService" />

Şimdi herhangi bir yerel modül bu hizmeti bir niyet kullanarak başlatabilir veya bir push bildiriminden onu tetikleyecek bir yayın alıcı kullanabilirsiniz.

3. iOS Arka Planlayıcısı Ayarlayın

iOS, arka plan yürütmesi hakkında daha kısıtlayıcıdır.Sunless JS'yi iOS'ta kullanmak için uygun arka plan modlarını etkinleştirmelisiniz ve yerel zamanlamayı kullanmanız gerekir (örneğin push bildirimleri veya arka planı getirme gibi).

[FONT:0)Adım - Enable arka plan modları).

Xcode projenizi açın, [[0)Signing & Cap tasks) ve [[Dön Modes) özelliğine bakınız. Örnek olarak uygulamanızın ihtiyaç duyduğu modları kontrol edin, örneğin “Backgroundbook” veya “Remote bildirimleri”.

[[B:0)Adım B - Uygulama Delegate Yöntemleri).

[FONT=2012], temel olayları almak ve başsız görevi başlatmak için gerekli delege yöntemlerini uygulayın.

// AppDelegate.m (Objective-C)
#import <React/RCTAppDelegate.h>
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (void)application:(UIApplication *)application
 performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
 // You can get the bridge from your ReactNative root view
 RCTBridge *bridge = [self.rootView bridge];
 [bridge.eventDispatcher sendAppEventWithName:@"BackgroundFetch"
 body:@{@"taskName": @"BackgroundTask"}];
 completionHandler(UIBackgroundFetchResultNewData);
}

@end

JavaScript tarafında, uyarı gelmeden önce kafasız görevi manuel olarak başlatmalısınız. ancak, Headless JS iOS'ta, uyarı geldiğinde, uyarının gelmesinden önce kafasız kod uygulayabilirsiniz.

Uyarı bildirimleri, AppDelegate'de uygulama: Aktivasyon'da bir olay gönder.

Arka Görevleri Tesir Ederek

Bir kez ayağa kalktıktan sonra, çeşitli kaynaklardan Headless JS görevini tetikleyebilirsiniz:

  • [FONT:0)Push bildirimleri[[Dönetici: iOS) – Android & iOS) – sessiz bir bildirim geldiğinde hizmet için iOS'ta özel bir yayın alıcı kullanın.
  • [FONT=0]Native modüller) - Android'de veya iOS'ta bir bildirimde bulunan yerel bir modül oluşturun.
  • [FONT:0)Background getir[[[Dönetici:0) – iOS uygulama delegenizi periyodik olarak çağırır; bu fırsatı kafasız görevi ateş etmek için kullanabilirsiniz.
  • [FONT:0]Alarms[[[Dönler: 1 ) – Seviye 16. veya [[Döneticileri) periyodik infazı planlamak için kullanılır.

Örnek: Android hizmeti, özel bir eylem için dinleyen bir yayın alıcısından başlayarak:

public class AlarmReceiver extends BroadcastReceiver {
 @Override
 public void onReceive(Context context, Intent intent) {
 Intent serviceIntent = new Intent(context, BackgroundTaskService.class);
 serviceIntent.putExtra("source", "alarm");
 context.startService(serviceIntent);
 }
}

Sonra AndroidManifest.xml'deki alıcıyı kayıt edin ve [[ŞUYGÜNÜŞÜN İÇİN KAYNAKLAR İÇİN BÜYÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜ

Güvenilir Arka Plan Operasyon Operasyonları için En İyi Uygulamalar

Arka plan görevleri doğal olarak kırılgandır - OS herhangi bir zamanda sürecinizi öldürebilir. Başsız JS görevlerini sağlam kılmak için bu yönergeleri izleyin:

  • [FONT:0) Görevleri kısa tut.[Dönetici:0) 30 saniye süren bir uygulama için Aim. (örneğin 5000ms) boş görevleri önlemek için.
  • [FONT:0]Handle hataları lütufla karşı karşıyadır.[[Dönetici:0]) · · ·0. Görev başarısız olursa, yerel olarak bir kaza muhabiri (örneğin Sentry gibi) kullanmayı düşünün ve UI'yi engellemeyin.
  • [FONT:0) çevrimdışı ilk desenleri kullanın.[[Dönetici: 1) Arka plan görevleri genellikle ağ garantisi olmadan çalıştırılır, yeniden kurulamaz ve mağaza başarısız işlemleri daha sonra için başarısız olur.
  • [FONT:0] Ağır devlet yönetiminden yoksundur.[[Dönem: 1) Redux veya Reaktif duruma güvenmeyin – arka plan görevleri ayrı bir JavaScript bağlamında çalışır.AsyncStorage, SQLite (react-native-sqlite-storage), veya veri için güvenli depolama.
  • [[0) Gerçek cihazlarda Test.[[Dönetici:0) Android emülatör ve iOS simülatörü, cihaz ekranından ve Doze modundan (Android) veya Low Power Mode (iOS) ile farklı davranır.
  • [FONT=0]Respect batarya optimizasyonu.[[Dönetici:0)) Cihazın uyumasını engellemek için Android'de bir uyandırma kilitlenmiş durumda, ancak kilitlemeyi hemen serbest bırakmak için. iOS'ta, arka plan aralıkları sistem tarafından yönetiliyor - verilen zamana saygı.

Debugging Headless JS Görevleri

Arka plan kodu zor çünkü Chrome DevTools denetimini kullanamazsınız veya UI aktif olmadığı zaman.Bu teknikleri kullanın:

  • [FONT:0)Logcat[[Dönetici:0)[[[Dönetici:0)[[değiştir | kaynağı değiştir] – AddurFLT:20] ifadeleri; “ReactNativeJS” etiketiyle girişte görünürler.
  • [FONT:0)Local dosya logları[[Dönemli: 1) Cihazın üzerinde bir dosyaya giriş yapın ve daha sonra alın.
  • [FONT:0]Flipper[[DÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜDÜŞÜNÜDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞ
  • [FONT:0]Native log[Dönetici:0] [FONTT:0])[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=TRNT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=TRNT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT

Sınırlar ve Tahminler

Headless JS, sürprizlerden kaçınmak için sınırlamalarını anlamaz:

  • [FONT=0]No UI etkileşimi[Dönetici:0) Hiçbir kullanıcıyla ilgili görüş veya gösteri uyarıları gösteremezsiniz.Use push bildirimleri to information the user of results.
  • [[Dönetici:0) Tek işlem için görev.[Dönetici] Reaksiyon Yerlisinin başısız hizmet, sadece bir JavaScript görevi bir seferde çalışır.Eğer birden paralel arka plan operasyonlarına ihtiyacınız varsa, yerel hizmetleri kullanmayı düşünün (Android'de İş Ortağı, BGTaskScheduler iOS).
  • [FONT:0]İOS kısıtlamaları.[[DÜDÜT:1] iOS ağır uçları arka plan yürütmesi. iOS'ta Headless JS, bildirimleri veya arka planı satın alarak tetiklenen kısa görevler için sadece güvenilirdir - sistem uygulamayı zorlayabilir veya engelleyebilir.
  • [FONT:0]No Redux mağazası.[[Dönetici:0) Daha önce belirtildiği gibi, başsız JavaScript bağlamı aynı Redux mağazasını iki bağlam arasında veri geçmek için sürekli depolama kullanın.
  • [FONT:0]App sonlandırması[Dönetici, kullanıcı uygulamanızı Android 12+ veya iOS'ta kapatırsa, arka plan görevleri tekrar uygulama açar.

Diğer arka plan kütüphaneleriyle karşılaştırıldığında

Reaks Yerli'nin Headless JS, birçok kullanım vakası için, topluluk paketleri daha uygun bir API sağlar:

LibraryPlatformFeatures
react-native-background-fetchAndroid & iOSPeriodic background fetching with system‑managed scheduling; supports Headless JS internally.
react-native-background-actionsAndroid & iOSRuns a long‑running foreground service (with persistent notification) – can execute heavy tasks.
WorkManager (Android only via native bridge)AndroidDeferrable, reliable background work with constraints (network, battery); does not use Headless JS by default.
Headless JS (vanilla)Android & iOSSimple, built‑in, no extra dependencies; best for short tasks triggered by push or alarms.

Göreviniz bir yeniden başlatmadan bile geçmelidir veya karmaşık bir zamanlamaya ihtiyacınız varsa, yerel bir İşYönetimi Uygulamayı kapatıp bir Reaksiyon Yerli ana modülüyle açığa çıkar. Headless JS hafif “ateş ve en iyi” işler için mükemmel kalır.

Tamam Örnek: Push Bildirim Data on Push Bildirim

Gerçek bir senaryo ile her şeyi bir araya getirelim: Sessiz bir itikat bildirim Android'e geldiğinde, uygulama bir API'den en son verileri ve yerel olarak depolar. Kullanıcı hiçbir zaman bir UI değişikliğini görmemektedir - veriler uygulamayı açarken hazır.

Android – Push Alıcı

Takdir eylemi için dinleyen bir yayın alıcı oluşturun (örneğin FCM’den):

public class PushReceiver extends BroadcastReceiver {
 @Override
 public void onReceive(Context context, Intent intent) {
 Intent serviceIntent = new Intent(context, BackgroundTaskService.class);
 serviceIntent.putExtra("action", "syncData");
 context.startService(serviceIntent);
 }
}

AndroidManifest.xml'de, itikat eyleminiz için bir niyetle kayıt olun (veya FirebaseMesagingService'sOSPT:24) doğrudan hizmete başlamak için hizmet kullanın.

JavaScript Handler

// BackgroundTask.js (expanded)
import { AppRegistry } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const backgroundTask = async (taskData) => {
 const { action } = taskData;
 if (action === 'syncData') {
 try {
 const response = await fetch('https://api.example.com/latest-data');
 const json = await response.json();
 await AsyncStorage.setItem('cachedData', JSON.stringify(json));
 console.log('Data synced successfully');
 } catch (error) {
 // Write error to a local log
 const errorLog = await AsyncStorage.getItem('errorLog');
 const newLog = (errorLog ? errorLog + '\n' : '') + new Date().toISOString() + ': ' + error.message;
 await AsyncStorage.setItem('errorLog', newLog);
 }
 }
};

AppRegistry.registerHeadlessTask('BackgroundTask', () => backgroundTask);

Kullanıcı uygulamayı yeniden açtığında, foreground hemen UI'yi okuyabiliyor ve sorunsuz bir çevrimdışı ilk deneyim yaratıyor.

Performans ve Battery Etkisi

Başsız görevler aynı JavaScript motorunda ana uygulama olarak çalışır, ancak ayrı bir bağlamda. Her görev hafızayı ve CPU'yu en aza indirmek için yeni bir kafasız JS örneği döndürür.

  • İşin tamamlanmasına izin veren en kısa zaman boyunca kullanın.
  • Sık sık anket yapma - itki bazlı tetikleyicileri tercih edin.
  • Android'de, görev bittikten sonra hizmetten dolayı 444D:27 çağrılır (HeadlessJsTaskService bunu, söz konusu kararların çözülmesinde otomatik olarak yapar).
  • Prodüksiyon APIsleri ile birlikte WorkManager- Android ve BGTaskScheduler for iOS için periyodik çalışmalara ihtiyacınız varsa.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Headless JS, Reaks Yerli geliştiricinin kemerinde, uygulamanın görünürlüğüne bakılmaksızın kısa arka plan görevleri yürütmek için güçlü bir araçtır.Bir JavaScript eller kurmak ve yerel arka plan tetikleyicileri ile bağlantı kurmak - ileri planlamalar, alarmlar veya geri yükleme gibi - her zaman kendine özgü kütüphaneler inşa edebilirsiniz.Manager, hata işleme ve platformunuzu sağlamak için özel kısıtlamalar oluşturmak.For develop limits to ensures, and Battery-For advanced scheduling or tall tasks, complete Headless JS with private library likeFLT:28 or native Workager.Manager.

Daha fazla okuma için, resmi Reaksiyon Yerli belgeye [[0)Headless JS (Android)) ve [[Dönetici:2)Headless JS (iOS)[DDDD)[DÜye Olmayanlar İçin Tıklayınız.