يتم " شحذ " التطبيقات المستندة إلى الويب بشكل متزايد للأجهزة المحمولة وأصبح العاملون في الخدمة أساس التطبيق المتقدم المستند إلى الويب (PWA). عندما تنظر إلى هذه التقنية لأول مرة ، قد يكون لديك انطباع بأن المهمة الرئيسية للعاملين في الخدمة هي تخزين المحتوى مؤقتًا. وهذا هو الحال. تتمثل مهمة العاملين في الخدمة في ضمان عمل تطبيق ويب في ظروف الاتصال غير المستقر أو الغائب تمامًا بالشبكة ، والذي يتحقق باستخدام التخزين المؤقت للبيانات.

في إطار الخفض ، أدى ظهور القدرة على تخزين البيانات مؤقتًا من خلال العاملين في الخدمة إلى عواقب على تطبيقات الويب.

هندسة PWA

فيما يلي التصميم الكلاسيكي ثلاثي المستويات لتطبيق الويب:

تؤدي إضافة عامل خدمة وأدوات استمرارية البيانات ( Cache API و IndexedDB ) على العميل إلى تحويل بنية من ثلاث طبقات إلى بنية من خمس طبقات:

في الواقع ، في حالة عدم وجود اتصال بالشبكة ، يجب تشغيل تطبيق ويب تقدمي على العميل في الوضع الكلاسيكي ثلاثي المستويات:

وعندما يظهر اتصال بالشبكة ، انتقل إلى المستوى الخامس:

1. العرض التقديمي (الخيط الرئيسي) : واجهة المستخدم ؛
2. Client Logic (Service Worker) : منطق الأعمال لمعالجة بيانات مستخدم معين ، مع مراعاة العمل في الوضعين غير المتصلين بالإنترنت ؛
3. بيانات العميل (Cache API & IndexedDB) : مخازن البيانات الخاصة بالمستخدم ؛
4. Server Logic (Server): - ;
5. Server Data (DB): ;

Offline first

web- mobile first. PWA — offline first. , ( ), .

, service worker' , . — . — (online/offline) .

, offline- — , ( - ) - , .

:

• : , (HTML/CSS/JS/images/...);
• (API): ( , JSON), ( ), ( );

() Cache API — "" — ""

(API) — IndexedDB (NoSQL JSON).

Cache

Chrome' Application / Cache / Cache Storage / < >, :

, , CDN , .

IndexedDB

Chrome' Application / Storage / IndexedDB / < > / < >, :

CRUD-, , . IndexedDB . , .

, .

service worker'

- service worker' . ( webpack') . service worker' WorkerGlobalScope.importScripts(). , . service worker' :

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

, service worker', . — service worker web- offline-, .

service worker' ( IndexedDB) (PWA offline) ( — — ). Online- PWA "" : Client Logic/Data — Server Logic/Data. - web- : , , (, ACL ).

service worker' - service worker' (, ES6 import), service worker' , - Main Thread ( ).

web-, , :

Service worker . , online offline (.. ).

قد يبدو ما ورد أعلاه مربكًا بعض الشيء للبعض ، ولكن قبل كتابة هذا المقال ، كان فهمي لدور العاملين في الخدمة في تطبيقات الويب التقدمية أكثر إرباكًا. سأكون ممتنا للتعليقات التي توضح بشكل أكبر مهام عامل الخدمة وكيفية استخدامها.

الروابط

• عمال الخدمة ليلا
• استخدام عامل الخدمة
• كتاب الطبخ ServiceWorker
• مطورو جوجل