الاستعداد مع مشغّل الخدمات في Angular

استخدِم مشغّل خدمات Angular لجعل تطبيقك أسرع وأكثر موثوقية على الشبكات التي تتسم بضعف الاتصال.

Minko Gechev

التعامل مع الاتصال المحدود بالإنترنت

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

يشرح هذا المنشور كيفية إعداد ميزة "التخزين المؤقت المُسبَق" في تطبيق Angular، ويفترض أنّك على دراية بميزة "التخزين المؤقت المُسبَق" و"خدمات العمال" بشكل عام. إذا كنت بحاجة إلى تذكير، يمكنك الاطّلاع على مشاركة العاملون في الخدمة وCache Storage API.

تقديم مشغّل خدمات Angular

يقدّم فريق Angular وحدة مشغّل خدمات تتضمّن وظيفة التخزين المؤقت المُسبَق مدمجة بشكل جيد مع إطار العمل وواجهة سطر أوامر Angular (CLI).

لإضافة عامل الخدمة، شغِّل هذا الأمر في سطر الأوامر:

ng add @angular/pwa

من المفترض أن يكون تطبيق @angular/service-worker و@angular/pwa مثبّتَين الآن في التطبيق ومن المفترض أن يظهرا في package.json. يضيف ng-add المخطّط أيضًا ملفًا باسم ngsw-config.json إلى المشروع، والذي يمكنك استخدامه لضبط الخدمة العاملة. (يتضمّن الملف إعدادات تلقائية يمكنك تخصيصها لاحقًا).

الآن، يمكنك إنشاء المشروع للنشر:

ng build --prod

في الدليل dist/service-worker-web-dev، ستجد ملفًا باسم ngsw.json. يُعلم هذا الملف عامل الخدمة في Angular بكيفية تخزين مواد العرض في التطبيق مؤقتًا. ويتم إنشاء الملف أثناء عملية الإنشاء استنادًا إلى الإعدادات (ngsw-config.json) ومواد العرض التي تم إنشاؤها في وقت الإنشاء.

الآن، ابدأ خادم HTTP في الدليل الذي يحتوي على مواد عرض الإصدار العلني من تطبيقك، وافتح عنوان URL العلني، وتحقّق من طلبات الشبكة في أدوات مطوّري البرامج في Chrome:

  1. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  2. انقر على علامة التبويب الشبكة.

تجدر الإشارة إلى أنّ علامة التبويب "الشبكة" تحتوي على مجموعة من مواد العرض الثابتة التي يتم تنزيلها مباشرةً في الخلفية من خلال نص ngsw-worker.js البرمجي:

نموذج تطبيق

هذا هو عامل خدمة Angular الذي يُخزّن مسبقًا مواد العرض الثابتة المحدّدة في ملف بيان ngsw.json الذي تم إنشاؤه.

لا تتوفّر مادة عرض مهمة واحدة: nyan.png. لتخزين هذه الصورة مسبقًا، عليك إضافة نمط يتضمّنها إلى ngsw-config.json، والذي يقع في جذر مساحة العمل:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

يؤدي هذا التغيير إلى إضافة جميع صور PNG في مجلد /assets إلى مجموعة مواد عرض الموارد app. بما أنّه تم ضبط installMode لمجموعة مواد العرض هذه على prefetch، سيخزّن عامل الخدمة مسبقًا جميع مواد العرض المحدّدة، والتي تتضمّن الآن صور PNG.

إنّ تحديد مواد العرض الأخرى التي سيتم تخزينها مؤقتًا مسبقًا أمر سهل أيضًا: ما عليك سوى تعديل الأنماط في مجموعة مواد عرض الموارد app.

الخاتمة

يمكن أن يؤدي استخدام مشغّل خدمات لتخزين المحتوى مسبقًا إلى تحسين أداء تطبيقاتك من خلال حفظ مواد العرض في ذاكرة التخزين المؤقت المحلية، ما يجعلها أكثر موثوقية على الشبكات ذات الأداء الضعيف. لاستخدام ميزة "التخزين المؤقت المُسبَق" مع Angular وAngular CLI:

  1. أضِف حزمة @angular/pwa إلى مشروعك.
  2. يمكنك التحكّم في المحتوى الذي يخزنه مشغّل الخدمة مؤقتًا من خلال تعديل ngsw-config.json.