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

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

Minko Gechev

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

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

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

لتحويل تطبيق Angular إلى تطبيق متوافق مع الأجهزة الجوّالة، ما عليك سوى تنفيذ أمر واحد:

ng add @angular/pwa

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

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

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

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

توضِّح المقالة التخزين المُسبَق باستخدام مشغّل خدمات 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.