الاستعداد مع مشغّل الخدمات في 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.