بدء استخدام تطبيقات الويب التقدّمية

Addy Osmani

لقد دارت مؤخرًا مناقشات كثيرة حول تطبيقات الويب التقدّمية. لا تزال هذه التطبيقات نموذجًا جديدًا نسبيًا، ولكن يمكن لمبادئها أن تحسّن أيضًا التطبيقات التي تم إنشاؤها باستخدام JavaScript أو React أو Polymer أو Angular أو أي إطار عمل آخر. في هذه المشاركة، سألخّص بعض الخيارات والتطبيقات المرجعية للبدء في إنشاء تطبيق الويب التقدّمي الخاص بك اليوم.

ما هو تطبيق الويب التقدّمي؟

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

شبّه "آرون غوستافسون" التحسين التدريجي بحلوى M&M بالفول السوداني. الفول السوداني هو المحتوى، وطبقة الشوكولاتة هي طبقة العرض، وJavaScript هي الطبقة الخارجية الصلبة. يمكن أن تختلف هذه الطبقة في اللون ويمكن أن تختلف التجربة حسب إمكانيات المتصفّح الذي يستخدمها.

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

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

بانرات تثبيت تطبيق الويب لزيادة التفاعل، والتشغيل من الشاشة الرئيسية للمستخدم، وشاشة البداية في Chrome لنظام التشغيل Android، والعمل بلا إنترنت مع مشغّل الخدمات

تطبيقات الويب التقدّمية هي

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

ولا تقتصر تطبيقات الويب التقدّمية على متصفّح Chrome لنظام Android. في ما يلي، يمكننا رؤية تطبيق الويب التقدّمي Pokedex يعمل في Firefox لنظام التشغيل Android (الإصدار التجريبي) مع ميزات "الإضافة إلى الشاشة الرئيسية" وتخزين مشغّل الخدمات في ذاكرة التخزين المؤقت التي تعمل بشكل جيد.

تطبيقات الويب التقدّمية التي تعمل في Firefox على Android

من الجوانب الإيجابية في الطبيعة "التدريجية" لهذا النموذج هو أنّه يمكن إتاحة الميزات تدريجيًا عندما يوفّر مورّدو المتصفّحات دعمًا أفضل لها. تعمل تطبيقات الويب التقدّمية، مثل Pokedex، بشكل رائع أيضًا في متصفّح Opera على أجهزة Android مع بعض الاختلافات البارزة في التنفيذ:

تطبيقات الويب التقدّمية التي تعمل في متصفّح Opera لأجهزة Android

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

المبادئ

بيان تطبيق الويب

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

يمكنك إضافة التطبيق إلى الشاشة الرئيسية وتشغيله منها والاستمتاع بتجارب تشبه التطبيقات بملء الشاشة.

يمكن العثور على نموذج لملف البيان في Web Starter Kit وفي نماذج Google Chrome. كتب "بروس لوسون" أداة إنشاء ملفات البيان، كما كتب "منير لعموري" أداة مفيدة للتحقّق من بيان الويب تستحق الاطّلاع عليها.

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

تتيح المتصفّحات المستندة إلى Chromium (مثل Chrome وOpera وغيرهما) استخدام ملفات بيان تطبيقات الويب حاليًا، بينما يعمل Firefox على تطوير ميزة إتاحتها، ويدرجها Edge على أنّها قيد الدراسة. لم ينشر WebKit/Safari بعد إشارات علنية حول نيتهما تنفيذ الميزة.

لمزيد من التفاصيل، يُرجى الاطّلاع على تطبيقات الويب القابلة للتثبيت باستخدام بيان تطبيق الويب في Chrome لنظام Android في أساسيات الويب.

إعلان بانر "الإضافة إلى الشاشة الرئيسية"

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

تطبيق تجريبي للمذكرات الصوتية يعرض بانر لتثبيت تطبيق ويب في Chrome لنظام Android

لكي تظهر طلبات تثبيت التطبيق، يجب أن يستوفي تطبيقك الشروط التالية:

  • أن يتضمّن بيان تطبيق ويب صالحًا
  • يجب أن يتم عرضها عبر بروتوكول HTTPS (يمكنك الاطّلاع على letsencrypt للحصول على شهادة مجانية)
  • تسجيل مشغّل خدمات صالح
  • أن تتم زيارتها مرتين، مع فاصل زمني لا يقل عن 5 دقائق بين الزيارتين

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

مشغّل الخدمات للتخزين المؤقت بلا إنترنت

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

ويتم تنشيطه عند تلقّي حدث، ويستمر في العمل فقط للمدة اللازمة لمعالجته. يتيح لك مشغّل الخدمات استخدام Cache API لتخزين الموارد مؤقتًا، ويمكن استخدامه لتوفير تجربة بلا إنترنت للمستخدمين.

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

تخزين مشغّل الخدمات المؤقت لهيكل التطبيق، ما يسمح بتحميله بدون الاتصال بالشبكة

تتوفّر مجموعة شاملة من نماذج مشغّلات الخدمات في نماذج Google Chrome. يُعدّ دليل Jake Archibald للعمل بلا إنترنت من المراجع التي يجب قراءتها، وأنصح بشدة بتجربة دليل Paul Kinlan الإرشادي أول تطبيق ويب يعمل بلا إنترنت إذا كنت مبتدئًا في استخدام مشغّل الخدمات.

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

  • sw-precache: أداة مدّة التصميم التي تنشئ نصًا برمجيًا لمشغّل الخدمات مفيدًا للتخزين المؤقت المسبق لهيكل تطبيق الويب
  • ‫sw-toolbox: مكتبة توفّر ميزة التخزين المؤقت أثناء التشغيل للموارد التي لا يتم استخدامها بشكل متكرر

كتب "جيف بوسنيك" دليلاً تمهيديًا سريعًا حول sw-precache بعنوان Offline-first, fast, with the sw-precache module ودرسًا تطبيقيًا حول الترميز عن الأداة نفسها قد يكون مفيدًا لك.

نفّذت متصفحات Chrome وOpera وFirefox دعمًا لـ Service Worker، مع وجود إشارات عامة إيجابية من Edge حول الاهتمام بالميزة. أشار متصفّح Safari لفترة وجيزة إلى اهتمامه بها من خلال خطة الخمس سنوات التي اقترحها أحد المهندسين.

الإشعارات الفورية لإعادة التفاعل

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

تم تنفيذ واجهة برمجة التطبيقات Push API في Chrome، وهي قيد التطوير في Firefox وقيد الدراسة في Edge. لا تتوفّر أي إشارات علنية من Safari حول نيّته تنفيذ هذه الميزة حتى الآن.

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

إشعارات فورية على الويب على موقع Facebook للأجهزة الجوّالة

يقدّم "مايكل فان أويركيرك" من فريق Chrome أيضًا مقدمة مدتها 6 دقائق حول Push إذا كنت تفضّل مشاهدة الفيديوهات.

إضافة الميزات المتقدّمة

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

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

تم تفعيل ميزة "المزامنة في الخلفية" لمرة واحدة في Chrome، وقد نشر "جيك أرشيبالد" فيديو حول تطبيق Wikipedia المتوافق مع وضع عدم الاتصال بالإنترنت ومقالة توضّح كيفية عمل هذه الميزة. يوفّر "فرانسوا بوفورت" أيضًا عددًا من نماذج Web Bluetooth المتاحة إذا كنت مهتمًا بتجربة واجهة برمجة التطبيقات هذه.

متوافقة مع أُطر العمل

ما مِن شيء يمنعك من تطبيق أي من المبادئ المذكورة أعلاه على تطبيق أو إطار عمل حالي تستخدمه. هناك بعض المبادئ الأخرى التي يجب وضعها في الاعتبار أثناء إنشاء تطبيق الويب التقدّمي، وهي نموذج الأداء الذي يركّز على المستخدم RAIL والرسوم المتحركة المستندة إلى FLIP.

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

الهندسة المعمارية

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

تشجّع بنية هيكل التطبيق على تخزين هيكل التطبيق (واجهة المستخدم) مؤقتًا ليعمل بلا إنترنت وتعبئة محتواه باستخدام JavaScript. في الزيارات المتكررة، يتيح لك ذلك الحصول على وحدات بكسل مفيدة على الشاشة بسرعة كبيرة بدون الشبكة، حتى إذا كان المحتوى الخاص بك يأتي في النهاية من هناك. ويؤدي ذلك إلى تحسينات كبيرة في الأداء.

صورة توضيحية لهيكل التطبيق الذي يحلّل واجهة المستخدم في تطبيقك، مثل الدرج ومنطقة المحتوى الرئيسية

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

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

أنصحك بقراءة مقالتنا حول البنية وتقييم كيفية تطبيق مبادئ مماثلة على تطبيقك ومجموعة برامجك.

نماذج البدء

هيكل التطبيق

العرض على GitHub

يحتوي مستودع app-shell على تنفيذ شبه كامل لبنية هيكل التطبيق. وتتضمّن واجهة خلفية مكتوبة بلغة Express.js وواجهة أمامية مكتوبة بلغة ES2015.

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

مجموعة Polymer للمبتدئين

العرض على GitHub

تتيح نقطة البداية الرسمية لتطبيقات الويب Polymer ميزات "تطبيقات الويب التقدّمية" التالية:

  • بيان تطبيق الويب
  • شاشة البداية في Chrome لنظام التشغيل Android
  • التخزين المؤقت بلا إنترنت لبرنامج الخدمة باستخدام عناصر Platinum SW
  • الإشعارات الفورية (يتطلّب ذلك الإعداد اليدوي) باستخدام عناصر Platinum Push
مجموعة أدوات Polymer Starter Kit تعرض ميزات تطبيقات الويب التقدّمية المضمّنة

لا يتوفّر في الإصدار الحالي من PSK بعض أنماط الأداء الأكثر تقدّمًا (مثل نموذج هيكل التطبيق والتحميل غير المتزامن) التي تجدها في بعض تطبيقات الويب التقدّمية المستندة إلى Polymer.

نهدف إلى محاولة دمج هذه الأنماط في PSK في عام 2016، ولكن يمكن العثور على التجارب المبكرة حول هذا في تطبيق Polymer Zuperkulblog من تأليف "روب دودسون" ومحادثة أنماط أداء البوليمر الرائعة من تأليف "إريك بيدلمان".

Web Starter Kit

العرض على GitHub

تتضمّن نقطة البداية المقترَحة للمشاريع الجديدة التي تستخدم لغة JavaScript الأساسية ميزات "تطبيقات الويب التقدّمية" التالية:

  • بيان تطبيق الويب
  • شاشة البداية في Chrome لنظام التشغيل Android
  • التخزين المؤقت المسبق لـ Service-worker بفضل sw-precache

إذا كنت تفضّل العمل باستخدام vanilla JS/ES2015 ولا يمكنك استخدام Polymer، قد تكون Web Starter Kit مفيدة كمرجع يمكنك إعادة استخدامه أو نسخ مقتطفات الرموز منه.

تطبيقات الويب التقدّمية مع أُطر العمل وبدونها

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

تطبيقات الويب التقدّمية التي تم تنفيذها باستخدام React وPolymer وVirtual DOM وAngularJS

Vanilla JavaScript

Polymer

React

  • iFixit من تأليف "جيف بوسنيك": يستخدم sw-precache لتخزين هيكل التطبيق مؤقتًا (الشرائح)

Virtual-DOM

  • Pokedex من "نولان لوسون": تطبيق ويب تقدّمي ممتاز يطبّق نهج "تنفيذ كل شيء في مشغّل ويب" للمساعدة في العرض التدريجي. (تقرير)

Angular.js

  • Timey.in من "كينيث أوشينبرغ": يستخدم أيضًا sw-precache للتخزين المؤقت للموارد

ملاحظات الإغلاق

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

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

محتوى إضافي للقراءة