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

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

Minko Gechev

التعامل مع اتصال محدود

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

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

لمحة عن مشغّل خدمات 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. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
  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.