تطبيقات الويب التقدّمية: من علامة التبويب إلى شريط المهام

1. مرحبًا

في هذا الدرس التطبيقي، ستأخذ تطبيق ويب حاليًا وتجعله قابلاً للتثبيت. هذا هو الدرس التطبيقي الرابع في سلسلة من الدروس التطبيقية المصاحبة لورشة عمل تطبيقات الويب التقدّمية. كان الدرس التطبيقي السابق حول IndexedDB. تتضمّن هذه السلسلة أربعة دروس برمجية أخرى.

أهداف الدورة التعليمية

  • كتابة مشغّل الخدمات يدويًا
  • إضافة Service Worker إلى تطبيق ويب حالي
  • استخدام Service Worker وواجهة برمجة التطبيقات Cache Storage API لإتاحة الموارد بلا إنترنت

ما يتعين عليك معرفته

  • HTML وJavaScript الأساسيتان

المتطلبات

2. إكمال الإعداد

ابدأ إما باستنساخ الرمز الأولي أو تنزيله لإكمال هذا الدرس التطبيقي حول الترميز:

إذا نسخت المستودع، تأكَّد من أنّك تستخدم الفرع pwa04--tab-to-taskbar. يحتوي ملف ZIP أيضًا على الرمز الخاص بهذا الفرع.

يتطلّب هذا الرمز الأساسي الإصدار 14 من Node.js أو إصدارًا أحدث. بعد توفّر الرمز، شغِّل npm ci من سطر الأوامر في مجلد الرمز لتثبيت جميع الملفات التابعة التي ستحتاج إليها. بعد ذلك، شغِّل npm start لبدء خادم التطوير الخاص بتجربة البرمجة.

يقدّم ملف README.md لرمز المصدر شرحًا لجميع الملفات الموزّعة. بالإضافة إلى ذلك، إليك الملفات الرئيسية الحالية التي ستعمل عليها خلال هذا الدرس العملي:

الملفات الرئيسية

  • ‫index.html - HTML للتطبيق الرئيسي

3- إنشاء ملف بيان لتطبيق الويب

تصف ملفات بيان تطبيقات الويب تطبيق الويب التقدّمي، وبذلك يعرف المتصفّح، إلى جانب Service Worker الذي يعمل بشكل سليم، أنّ تطبيق الويب قابل للتثبيت، والأهم من ذلك، كيفية تمثيله على الجهاز الذي سيتم تثبيته عليه. ولكن يجب أولاً إنشاء هذا الحساب. أضِف ملفًا باسم manifest.json إلى المجلد public في تطبيق الويب وأضِف ما يلي إليه:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

لا تنسَ تضمين رمز Apple Touch لأجهزة iOS. أضِف سطر الرمز التالي بعد علامة <title> مباشرةً في <head> ضمن index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

الشرح

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

4. إرفاق البيان بتطبيق ويب تقدّمي

بعد إنشاء ملف البيان، يجب إرفاقه لربطه بتطبيق الويب التقدّمي. لإجراء ذلك، افتح index.html وأضِف ما يلي أسفل العلامة <title> مباشرةً في <head>:

<link rel="manifest" href="/manifest.json" />

الشرح

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

5- إضافة اختصارات

إحدى الطرق الرائعة لجعل تطبيق الويب التقدّمي (PWA) يبدو أكثر تكاملاً مع الجهاز هي توفير اختصارات قائمة السياق لوظائف معيّنة في تطبيقك. يتيح مفتاح التبديل "الوضع الليلي" في تطبيق الويب التقدّمي (PWA) اختيار الوضع من خلال ضبط مَعلمة طلب البحث mode على night أو day. إعداد اختصارَين في manifest.json لتنفيذ ما يلي:

  • يبدأ تطبيق الويب التقدّمي في وضع night أو day
  • يستخدم /images/logo.svg بحجم 150x150 كرمز

6. تهانينا!

لقد تعلّمت للتو كيفية إنشاء ملف بيان لتطبيق ويب وإرفاقه بصفحة ويب وإضافة اختصارات للتطبيق عند تثبيته.

تتضمّن السلسلة أيضًا درسًا عمليًا بعنوان الحث على التثبيت وقياسه.