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

آدي عثمانية
آدي عثمانية
Twitter GitHub

كانت هناك نقاشات ترحيبية حول تطبيقات الويب التقدّمية مؤخرًا. ما زالت هذه النماذج نموذجًا جديدًا نسبيًا، ولكن يمكنها أن تحسّن التطبيقات التي تم إنشاؤها باستخدام vanilla JS أو 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 والكمبيوتر المكتبي وغيرها. يمكن لوحدة العقدة المفضلة أيضًا تحقيق مخرجات مماثلة كجزء من عملية التصميم.

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

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

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

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

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

لكي تعرض رسائل المطالبة بتثبيت التطبيق تطبيقك، يجب:

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

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

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

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

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

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

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

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

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

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

كتب "جيف بوسنك" مقالة تمهيدية سريعة حول ذاكرة التخزين المؤقت التي تحمل اسم وضع عدم الاتصال بالإنترنت أولاً، سريعًا باستخدام وحدة sw-precache والدرس التطبيقي حول الترميز على الأداة نفسها التي قد تجدها مفيدة.

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

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

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

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

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

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

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

إضافة طبقات متعددة من الميزات المتقدّمة

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

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

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

مناسب لإطار العمل

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

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

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

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

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

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

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

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

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

البدء بالنص النموذجي

هيكل التطبيق

العرض على GitHub

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

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

مجموعة أدوات إجراء التفعيل من البوليمر

العرض على GitHub

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

مجموعة أدوات البوليمر للمبتدئين تعرض ميزات تطبيق الويب التقدّمية

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

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

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

العرض على GitHub

تتضمن نقطة البداية المستندة إلى رأينا لمشروعات vanilla الجديدة ميزات تطبيق الويب التقدّمي التالية:

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

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

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

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

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

JavaScript الفانيليا

Polymer

تفاعل

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

نموذج DOM الافتراضي

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

Angular.js

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

الملاحظات الختامية

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

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

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