Table of Contents
ما هي الورقة غير المُستهترئة في (ريك نيكا)؟
والورقة المشتركة التي لا تعرف عناوينها هي سمة محلية مبنية تسمح لك بتنفيذ مدونة جافاسكريب في الخلفية حتى عندما لا تكون واجهة مستخدمي التطبيقات نشطة، بخلاف التنفيذ السطحي، حيث يكون الجهاز مرئياً ومتفاعلاً، وتدير الورقة المشتركة مهاماً كعمليات منفصلة لا تتوقف على خط الاستنفار الرئيسي، وهذا أمر أساسي للعمليات التي يجب أن تستمر بعد أن يغلق المستخدم البيانات الواردة أو قبل أن يفتحها - مثل هذا الوقت المتزامن
حالات الاستخدام المشترك للورقة المشتركة غير المرئية
فهم متى تستخدمين "الورقة المشتركة" تساعدك على تقرير ما إذا كان يناسب مشروعك، ومن السيناريوهات النموذجية ما يلي:
- Data coincidehronization] - تحميل سجلات أو تحميل محتوى جديد عندما يكون التطبيق في الخلفية.
- Push notification handling] – Performing custom logical when a notification arrives (e.g., updating a card, storing data locally) before showing the alert.
- Location updates] – Polling GPS coordinates in the background for geofencing or real airspace tracking.
- Time-based tasks] – Executing a job at a scheduled interval (like daily clean-of) even if the user’ not opened the app.
- الإجراءات الكئيبة من الشاشة المنزلية ] - القيام بعملية قصيرة عندما يضغط المستخدم على 3D Touch أو على النسيج.
ولا تصمم الورقة المشتركة بلا رأس لأغراض حسابية طويلة أو شديدة - يمكن للنظام أن يقتل عملية المعلومات الأساسية إذا استغرق الأمر وقتاً طويلاً، أما بالنسبة للعمل الذي تم توسيع نطاقه في مجال المعلومات الأساسية، فتجمع بينه وبين الخدمات المحلية مثل WorkManager (أندرويد) أو ]BackgroundTasks.
إقامة ورقة غير رأسية في ردة فعل السكان الأصليين: الخطوة -
ويشمل تنفيذ الورقة المشتركة غير المرئية جزأين رئيسيين هما: إنشاء معالج لجهاز جافاسكريب وتسجيلها في مدونة السكان الأصليين لكل منصة، وسنعبر من خلال كلا الجزأين.
1 - إنشاء مناولة معلومات أساسية في جافاسكريبت
(أ) بدءًا بإنشاء ملف جديد، على سبيل المثال [(FLT:0]) يتضمن هذا الملف الوظيفة التي تُنفذ عندما تُشغل مهمة المعلومات الأساسية، وتتلقى الوظيفة غرضاً ، يمكن أن يحمل بارامترات تُنقل من الجانب الأصلي.
// 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);
ملاحظة أن المعالج يجب أن يكون وظيفة تعيد الوعد (أو وظيفة من وظائف الأسينك) وسينتظر النظام وعدا بالحل قبل أن يكتمل النظر في المهمة، وإذا رفض الوعود، فإن الجانب الأصلي قد يعتبره فشلا.
2 - تسجيل المهمة في مدونة أندرويد الوطنية
ويطالبك أن تسجل المهمة التي لا رأس لها في [أو وفقاً للنسخة الأصلية للرد الفعل]. وبالإضافة إلى ذلك، تحتاج إلى ] مسلسل هضال جاك سيرفي لإدارة دورة حياة العمل.
Step A - Update MainApplication.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
}
}
ولا حاجة إلى تسجيل صريح في جافا للمهمة ذاتها إذا استخدمت - إعادة التصنيع الوطني تلقائياً يرسم معالج الجافاسكيبت على مهمة محلية، ولكن يجب أن تنشئ خدمة يمكن أن يبدأها النظام.
Step B — Create a HeadlessJsTaskService]
Create a new Java class in the same package:
// 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;
}
}
وتستخرج هذه الخدمة أي مبالغ إضافية من المرشد (مثل البيانات الواردة من إخطار) وتنتقل إلى معالج جافاسكريبت، ويمنع هذا الوقت المهام الهاربة.
Step C — Add the Service to Android Manifest.xml]
<service android:name=".BackgroundTaskService" />
الآن أيّ وحدة محلية يمكن أن تبدأ هذه الخدمة باستخدام مُدخل أو يمكنك استخدام جهاز استقبال للبث لإثارة ذلك من إشعار بالدفع
3- وضع قدرات أساسية في مجال تكنولوجيا المعلومات والاتصالات
(ج) إن نظام iOS أكثر تقييداً لتنفيذ الخلفية، ولإستخدام الورقة المشتركة غير المرئية بشأن نظام iOS، يجب أن تُمكِّن من وضع أساليب خلفية مناسبة وأن تستخدم الجدول الزمني المحلي (مثل إخطارات الدفع أو جلب المعلومات الأساسية).
Step A – Enable Background Modes]
(أ) افتح مشروعك للزجاج، واذهب إلى [(FLT:0]]) [الحركة والقدرات ، واضافة ] ] [الطرق البرية، تحقق من الطرائق التي تحتاج إليها أجهزة التجميل، مثل " الجلبة الأرضية " أو " الإخطارات عن بعد " .
Step B – Implement App App Delegate Methods]
In , implement the required delegate methods to receive background events and start the headless task.
// 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
على جانب جافاسكريبت، تحتاج إلى الاستماع إلى حدث ثم تبدأ المهمة بلا رأس يدوياً، غير أن الورقة المشتركة بلا رأس تستخدم بشكل أكثر شيوعاً مع إخطارات الدفع - عندما يصل الإخطار، يمكنك تنفيذ الرمز العديم الرأس قبل أن تظهر الإنذار.
For push notifications, implement in AppDelegate and send an event to React Native.
المهام الثلاثية المتعلقة بالمعلومات الأساسية
بمجرد أن يتم إعدادك، يمكنك أن تُطلق مهمة غير واضحة من مصادر مختلفة:
- Push notifications] (أندرويد و iOS) - Use a custom broadcast receiver on Android or the app delegate on iOS to start the service when a silent notification arrives.
- Native modules] — Create a native module that calls on Android or posts a notification on iOS.
- Background fetch] [iOS] - iOS ينادي مندوب تطبيقك دوريا؛ يمكنك استخدام هذه الفرصة لطرد المهمة التي لا رأس لها.
- Alarms] - Use or to schedule periodic execution.
مثال: بدء خدمة الأندرويد من جهاز استقبال للبث يستمع إلى إجراء تقليدي:
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);
}
}
ثم سجل جهاز الاستقبال في أندرويد مانيفست.كسميل وحدد جهاز إنذار باستخدام .
أفضل الممارسات في مجال عملية المعلومات الأساسية الموثوق بها
إن المهام الأساسية هشة بطبيعتها - ويمكن لمكتب خدمات الرقابة الداخلية أن يقتل عمليةكم في أي وقت، وأن يتبع هذه المبادئ التوجيهية لجعل مهامكم غير المهيمنة في إطار الورقة المشتركة قوية:
- Keep tasks short.] Aim for under 30 seconds of execution. Use timeouts (the 5000ms in our example) to prevent hanging tasks.
- Handle errors Gracely.] Wrap your logical in try/catch. If the task fails, consider logging locally using a crash reporter (like Sentry) and do not block the UI.
- Use offline —first patterns.] Since background tasks often run without network guarantees, implement retries and store failed operations for later.
- Avoid heavy state management.] Don rely on Redux or React state — background tasks run in a separate JavaScript context. Use AsyncStorage, SQLite (react-native-sqlite-storage), or secure storage for data persistence.
- testing on real devices.] The Android emulator and iOS simulator behave differently from physical equipment. Test with tool screen off and in Doze mode (Android) or Low Power Mode (iOS).
- Respect batimization.] Use with a wake lock on Android to prevent the CPU from sleep, but release the lock promptly. On iOS, background fetch intervals are managed by the system — respect the granted time.
دال - المهام التي تضطلع بها جهات متعددة غير مهيمنة
رمز المعلومات الأساسية المُتخفية مُخادع لأنّك لا تستطيع استخدام مفتش (الكروم ديفتول) عندما لا يكون (يو آي) نشطاً، استخدم هذه التقنيات:
- Logcat] (أندرويد) - Add ] statements; they appear in logcat with the tag “ReactNativeJS”.
- Local file logs] - كتابة قيود على ملف عن الجهاز واسترجاعها لاحقا.
- Flipper ] — React Native Flipper can capture console logs from headless tasks (ensure you set to true in your Flipper plugin).
- Native logging] – Use in your Java service to trace when the task starts and ends.
القيود والنظر في المسألة
ليست الورقة المشتركة بلا رأس رصاصة فضية، فهما حدودهما لتجنب المفاجآت:
- No UI interaction.] You cannot render views or show alerts inside a headless task. Use push notifications to inform the user of results.
- Single task per process.] React Native’s headless service runs only one JavaScript task at a time. If you need multiple parallel background operations, consider using native services (WorkManager on Android, BGTaskScheduler on iOS).
- iOS restrictions.] iOS heavily throttles background execution.
- No Redux store.] As mentioned earlier, the headless JavaScript context does not share the same Redux store as the foreground app. Use persistent storage to pass data between the two contexts.
- App termination.] If the user force —closes your app on Android 12+ or iOS, background tasks may not run until the user opens the app again.
مقارنة المكتبات الأخرى
وتعد الورقة المشتركة غير المستقرة عن السكان الأصليين أقل الآليات القائمة على المستوى المبني، وبالنسبة لحالات الاستخدام العديدة، توفر مجموعات المجتمعات المحلية أداة أكثر ملاءمة للمنهج:
| Library | Platform | Features |
|---|---|---|
| react-native-background-fetch | Android & iOS | Periodic background fetching with system‑managed scheduling; supports Headless JS internally. |
| react-native-background-actions | Android & iOS | Runs a long‑running foreground service (with persistent notification) – can execute heavy tasks. |
| WorkManager (Android only via native bridge) | Android | Deferrable, reliable background work with constraints (network, battery); does not use Headless JS by default. |
| Headless JS (vanilla) | Android & iOS | Simple, built‑in, no extra dependencies; best for short tasks triggered by push or alarms. |
وإذا كان لا بد من أن تُنفذ مهمتكم حتى بعد إعادة التشغيل، أو تحتاج إلى جدول زمني معقد، فنظروا في وضع ملف لطريقة تنفيذ برنامج العمل الوطني وعرضه عن طريق نموذج وطني من السكان الأصليين، ولا تزال الورقة المشتركة غير المرئية ممتازة بالنسبة لوظائف " إطلاق النار - الهدف " التي لا تُستهان بها.
مثال كامل: بيانات عن الإخطار بالدفع
فلنجمع كل شيء مع سيناريو واقعي: عندما يصل إخطار بالدفع الصامت إلى أندرويد، يُحمّل هذا التطبيق آخر البيانات من نظام تقييم الأداء ويخزنه محليا، ولا يرى المستخدم تغييرا في نظام UI - البيانات جاهزة عندما يفتحون التطبيق في وقت لاحق.
أندرويد - جهاز استقبال الدفع
إنشاء جهاز استقبال للبث الإذاعي يستمع إلى إجراءات الدفع (مثلاً من محطة الإذاعة والتلفزيون):
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);
}
}
قيده في أندرويد مانيفست.كسميل مع مرشّح مقصّد لضغطك (أو استخدام مركب الإطفاء (Service) لبدء الخدمة مباشرة.
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);
وعندما يعيد المستخدم فتح التطبيق، يمكن للمكان الأمامي أن يقرأ ويستكمل وحدة التفتيش المشتركة فورا، مما يخلق تجربة غير مباشرة.
الأداء وتأثير البطارية
وتُنفذ المهام التي لا يُستهان بها في نفس محرك جافا سكربت الذي يُستخدم فيه التطبيق الرئيسي، ولكن في سياق منفصل، وتُعد كل مهمة من هذه المهام مركزا جديدا غير رئيسي للورقة المشتركة، يستهلك الذاكرة ووحدة منع الحمل، وذلك للتقليل إلى أدنى حد من تصريف البطاريات:
- استخدم أقصر وقت ممكن حتى الآن يسمح بالعمل بالانتهاء
- لا تقومي بالتصويت المتواتر - تفضلي المحفزات القائمة على الدفع.
- On Android, call ] from the service after the task endes (HeadlessJsTaskService does this automatically when the promise resolves).
- مُمتَعَة بـ مُدَرَّاتِ مُتَعَلَّمِةِ بالبطَارِ مثل مُدَرِّرِرِقِيَةِ لِأندرويدِ و بي جي تاسك سِدَلَةِ لِأي إس إذا تَحتاجُ عملَ دوريَ.
خاتمة
(ه) إن الورقة المشتركة غير المرئية أداة قوية في حزام مطورة " رد الفعل " من أجل معالجة المهام الأساسية القصيرة التي يجب أن تنفذ بصرف النظر عن مكانة التطبيق، وبإنشاء معالج " جافاسكريب " وربطه بدافعات معلومات أساسية محلية - مثل الإخطارات بالدفع أو الإنذارات أو الضربات الخلفية - يمكن أن تبني تطبيقات مستجيبة ومحركة للبيانات تشعر بها دائماً.
For further reading, refer to the official React Native documentation on Headless JS (Android) and Headless JS (iOS). Also check the ]react-native-background-fetch library for.