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

هل تريد أن يكون تطبيق Angular قابلاً للتثبيت؟ لا مزيد من الانتظار!

Minko Gechev

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

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

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

لتحويل تطبيق Angular إلى تطبيق ويب تقدّمي، ما عليك سوى تشغيل أمر واحد:

ng add @angular/pwa

سينفّذ هذا الأمر ما يلي:

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

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

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

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

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

إليك نظرة على ملف البيان الذي أنشأته واجهة سطر الأوامر في Angular:

{
  "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.
2. عدِّل الخيارات في ملف manifest.webmanifest بما يناسب مشروعك.
3. عدِّل الرموز في الدليل src/assets/icons بما يناسب مشروعك.
4. يمكنك تعديل theme-color في index.html إذا أردت.