إنشاء تطبيق ويب تقدّمي باستخدام Angular CLI

هل تريد جعل تطبيق Angular قابلاً للتثبيت؟ لا داعي للانتظار بعد الآن.

Minko Gechev

في هذه المشاركة، ستتعرّف على كيفية استخدام واجهة سطر الأوامر Angular (CLI) لإنشاء تطبيق ويب تقدّمي (PWA).

يمكنك العثور على عيّنة التعليمات البرمجية من هذا الدليل على GitHub.

ملاحظة: تفترض هذه المشاركة أنّك على دراية بتطبيقات PWA ومزاياها. إذا كنت بحاجة إلى تنشيط ذاكرتك، فراجع مجموعة عمليات التثبيت.

إنشاء تطبيق ويب تقدّمي قابل للتثبيت

لجعل تطبيق Angular تطبيق PWA، كل ما عليك فعله هو تشغيل أمر واحد:

ng add @angular/pwa

سيؤدي هذا الأمر إلى:

• أنشئ مشغّل خدمات باستخدام إعدادات التخزين المؤقت التلقائية.
• أنشِئ ملف بيان يوضّح للمتصفّح الطريقة التي يجب أن يتصرف بها تطبيقك عند تثبيته على جهاز المستخدم.
• يمكنك إضافة رابط إلى ملف البيان في index.html.
• أضِف العلامة <meta> المسماة theme-color إلى index.html.
• يمكنك إنشاء رموز التطبيقات في دليل src/assets.

يجب أن يتم تسجيل مشغّل الخدمات تلقائيًا في غضون ثوانٍ قليلة من التحميل الأول للصفحة. وإذا لم تكن كذلك، ننصحك بتعديل registrationStrategy.

تخصيص تطبيق الويب التقدّمي (PWA)

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

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

ألقِ نظرة خاطفة على ملف البيان الذي تم إنشاؤه بواسطة Angular CLI:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

ويمكنك تخصيص أيّ من هذه السمات من خلال تغيير القيمة ذات الصلة في manifest.webmanifest.

يشير تطبيق PWA إلى ملف البيان الخاص به من خلال عنصر link في index.html. بعد أن يعثر المتصفِّح على المرجع، سيعرض الطلب إضافة إلى الشاشة الرئيسية:

بما أنّ مخططات ng-add تضيف كل ما هو مطلوب لجعل تطبيقك قابلاً للتثبيت، فإنّها تنشئ بعض رموز الاختصارات التي تظهر عندما يضيف المستخدم التطبيق إلى سطح المكتب:

احرِص على تخصيص سمات البيان ورموزه قبل نشر تطبيق الويب التقدّمي (PWA) في قناة الإصدار العلني.

ملاحظة: إذا أردت إعادة تطبيق الويب التقدّمي (PWA) إلى تطبيق ويب عادي، ما عليك سوى إزالة الإشارة إلى manifest.webmanifest من index.html.

الخلاصة

لإنشاء تطبيق Angular قابل للتثبيت، عليك اتّباع الخطوات التالية:

1. أضِف @angular/pwa إلى مشروعك باستخدام Angular CLI.
2. عدِّل الخيارات في ملف manifest.webmanifest بما يتناسب مع مشروعك.
3. يمكنك تعديل الرموز في دليل src/assets/icons لتناسب مشروعك.
4. يمكنك اختياريًا تعديل theme-color في index.html.