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

هل تريد إتاحة تثبيت تطبيقك المكتوب بلغة Angular؟ لا داعي للانتظار بعد الآن.

Minko Gechev

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

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

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

لجعل تطبيق 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.

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

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

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

الخاتمة

لإنشاء تطبيق Angular قابل للتثبيت:

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