جرت مناقشات ترحيبية كثيرة في الآونة الأخيرة حول تطبيقات الويب التقدّمية. لا يزالان نموذجًا جديدًا نسبيًا، ولكن يمكن لمبادئهما أيضًا تحسين التطبيقات التي تم إنشاؤها باستخدام vanilla JS أو React أو Polymer أو Angular أو أي إطار عمل آخر. في هذه المشاركة، سألخص بعض الخيارات والتطبيقات المرجعية لبدء استخدام تطبيق الويب التقدمي اليوم.
ما هو تطبيق الويب التقدّمي؟
من المهم تذكّر أنّ تطبيقات الويب التقدّمية تعمل في أي مكان، ولكن يتم تزويدها بإمكانيات إضافية في المتصفحات الحديثة. يُعد التحسين التدريجي الركيزة الأساسية للنموذج.
شبّه آرون غوستافسون التحسين التدريجي بخلاصة M&M من الفول السوداني. الفول السوداني هو المحتوى الخاص بك، وطبقة الشوكولاتة هي طبقة العرض التقديمي، وJavaScript هو صدفة الحلوى الصلبة. يمكن أن تختلف هذه الطبقة في اللون وقد تختلف التجربة اعتمادًا على إمكانات المتصفح الذي يستخدمها.
اعتبر قوقعة الحلوى كما لو كانت المكان الذي توجد به العديد من ميزات تطبيق الويب التقدمي. فهي تجارب تجمع بين أفضل ما في الويب وأفضل التطبيقات. وهي مفيدة للمستخدمين من أول زيارة في علامة تبويب المتصفح، ولا تتطلب أي عمليات تثبيت.
وعندما يبني المستخدم علاقة مع هذه التطبيقات من خلال تكرار استخدامها، فإنّها تحسِّن أداءها بشكل أفضل، إذ يتم تحميلها بسرعة كبيرة عند الاتصال بشبكة بطيئة (بفضل عامل الخدمات)، وإرسال الإشعارات الفورية ذات الصلة واستخدام رمز من الدرجة الأولى على الشاشة الرئيسية للمستخدم والذي يمكن من خلاله تحميل هذه التطبيقات كتجارب تطبيق بملء الشاشة. ويمكنهم أيضًا الاستفادة من إعلانات البانر الذكية لتثبيت تطبيقات الويب.
تطبيقات الويب التقدمية
- التقدم التدريجي: يمكنك العمل مع كل مستخدم بغض النظر عن خيار المتصفّح لأنّها مصمَّمة من خلال التحسين التدريجي كمستأجر أساسي.
- متجاوب - يناسب أي شكل من أشكال الأجهزة، سواء كان سطح المكتب أو الجهاز الجوّال، أو الجهاز اللوحي، أو أيًا كان الشكل التالي.
- إمكانية الاتصال بشكل مستقل: تم تحسين هذه الخدمة من قِبل موظفي الخدمة للعمل بلا اتصال بالإنترنت أو على شبكات منخفضة الجودة.
- مشابه للتطبيق - استخدم نموذج هيكل التطبيق لتوفير عمليات التنقل والتفاعلات بنمط التطبيق.
- تحديث دائم: يتم التحديث دائمًا بفضل عملية تحديث مشغّل الخدمات.
- آمن: يتم توفيره عبر بروتوكول أمان طبقة النقل (TLS) لمنع التطفّل وضمان عدم التلاعب بالمحتوى.
- قابلة للاكتشاف: يمكن التعرّف عليها على أنّها "تطبيقات" بفضل بيانات W3C ونطاق تسجيل مشغّل الخدمة الذي يسمح لمحركات البحث بالعثور عليها.
- إعادة التفاعل: يمكنك تسهيل إعادة التفاعل من خلال ميزات مثل الإشعارات الفورية.
- القابلية للتثبيت - للسماح للمستخدمين "بالاحتفاظ" بالتطبيقات التي يجدونها أكثر فائدة على الشاشة الرئيسية بدون عناء متجر التطبيقات.
- قابل للربط: يمكنك المشاركة بسهولة عبر عنوان URL بدون الحاجة إلى تثبيت معقّد.
تطبيقات الويب التقدّمية ليست فريدة بالنسبة إلى Chrome لنظام Android. في ما يلي، يظهر لنا عمل تطبيق الويب التقدّمي Pokedex باستخدام متصفّح Firefox لنظام التشغيل Android (الإصدار التجريبي) وأنّ ميزات التخزين المؤقت في "إضافة إلى الشاشة الرئيسية" لمشغّلي الخدمات تعمل بشكل جيد.
أحد الجوانب الرائعة للطبيعة "التقدمية" لهذا النموذج هو أنّه يمكن فتح الميزات تدريجيًا عندما يوفّر مورّدو المتصفّح دعمًا أفضل لهم. تعمل تطبيقات الويب التقدّمية مثل Pokedex أيضًا بشكل رائع في Opera على Android أيضًا، مع بعض الاختلافات الملحوظة في التنفيذ:
للحصول على مزيد من التفاصيل حول تطبيقات الويب التقدّمية، اطّلِع على مشاركة المدونة الأصلية التي كتبها أليكس راسل، والتي قدَّمت فيها هذه التطبيقات. بدأ "بول كينلان" أيضًا علامة Stack Overflow المفيدة جدًا لتطبيقات الويب التقدمية التي تستحق الاطلاع عليها.
المبادئ
بيان تطبيق الويب
يتيح البيان لتطبيق الويب التواجد بشكل أشبه أصلي على الشاشة الرئيسية للمستخدم. تسمح هذه السياسة بتشغيل التطبيق في وضع ملء الشاشة (بدون ظهور شريط عنوان URL) وتوفّر إمكانية التحكّم في اتجاه الشاشة. وتتيح في الإصدارات الحديثة من Chrome على Android تحديد شاشة البداية ولون المظهر لشريط العناوين. ويُستخدم أيضًا لتحديد مجموعة من الأيقونات حسب الحجم والكثافة المستخدمة لشاشة البداية وأيقونة الشاشة الرئيسية المذكورة أعلاه.
يمكن العثور على نموذج لملف البيان في Web Starter Kit أو أكثر في نماذج Google Chrome. كتب "بروس لوسون" أداة إنشاء البيان، وكتب منير لاموري أيضًا أداة التحقّق من بيانات الويب المفيدة التي تستحق التحقّق.
أعتمد في مشاريعي الشخصية على realfavicon Builder لإنشاء الرموز ذات الحجم المناسب لكل من بيان تطبيق الويب وللاستخدام على أجهزة iOS وأجهزة الكمبيوتر المكتبي وما إلى ذلك. يمكن أيضًا لوحدة العُقدة الرموز المفضّلة تحقيق نتيجة مماثلة كجزء من عملية التصميم.
في الوقت الحالي، تدعم المتصفّحات المستنِدة إلى Chromium (Chrome وOpera وما إلى ذلك) تطبيقات الويب، مع توفُّر الدعم في Firefox بشكلٍ فعّال، وإدراجها في Edge ضمن المطوّرين. لم ينشر WebKit/Safari بعد إشارات عامة حول نية تنفيذ هذه الميزة.
للمزيد من التفاصيل، يُرجى الاطّلاع على تطبيقات الويب القابلة للتثبيت باستخدام بيان تطبيق الويب في متصفِّح Chrome لنظام التشغيل Android على "أساسيات الويب".
بانر "الإضافة إلى الشاشة الرئيسية"
أصبح متصفّح Chrome على نظام التشغيل Android متاحًا منذ فترة لإضافة موقعك الإلكتروني إلى الشاشة الرئيسية، إلا أنّ الإصدارات الحديثة تتيح أيضًا اقتراح المواقع الإلكترونية بشكل استباقي باستخدام إعلانات بانر لتثبيت تطبيقات الويب الأصلية.
لكي تعرض الطلبات بتثبيت التطبيق، يجب:
- أن يكون لديك بيان تطبيق ويب صالح
- أن يتم عرضه عبر HTTPS (انظر letsencrypt للحصول على شهادة مجانية)
- توفُّر عامل خدمة مسجَّل
- أن تتم زيارته مرتين، مع تخصيص 5 دقائق على الأقل بين الزيارات
يتوفّر عدد من نماذج إعلانات البانر لتثبيت التطبيقات، والتي تغطي إعلانات البانر الأساسية وحالات الاستخدام الأكثر تعقيدًا، مثل عرض التطبيقات ذات الصلة.
عامل خدمات للتخزين المؤقت بلا اتصال
مشغِّل الخدمات هو نص برمجي يتم تشغيله في الخلفية، وهو منفصل عن صفحة الويب لديك. وهو يستجيب للأحداث، بما في ذلك طلبات الشبكة التي يتم إجراؤها من الصفحات التي يعرضها. لنفترض أن عمر عامل الخدمة قصير عمدًا.
حيث يستيقظ عند تلقي حدث وتشغيله فقط طالما أنه بحاجة إلى معالجته. يتيح لك مشغّل الخدمات استخدام Cache API لتخزين الموارد مؤقتًا ويمكن استخدامه لتوفير تجربة بلا إنترنت للمستخدمين.
يتميّز مشغّلو الخدمات بفعّالية في التخزين المؤقت بلا إنترنت، ولكنّهم يقدّمون أيضًا مكاسب كبيرة في الأداء من خلال التحميل الفوري للزيارات المتكرّرة إلى موقعك الإلكتروني أو تطبيق الويب. ويمكنك تخزين هيكل التطبيق في ذاكرة التخزين المؤقت كي يعمل بلا اتصال بالإنترنت وتعبئة محتواه باستخدام JavaScript.
تتوفر مجموعة شاملة من نماذج مشغّلي الخدمات على نماذج Google Chrome. ننصحك بقراءة كتاب الطبخ بلا إنترنت الذي نشره "جيك أرشيبالد"، لذا أنصحك بشدة بالاطّلاع على الجولة التفصيلية التي يقدّمها "بول كينلان" حول أول تطبيق ويب بلا إنترنت من إعداد "بول كينلان" إذا كنت جديدًا في مجال الخدمات.
يحتفظ فريقنا أيضًا بعدد من المرافق المساعِدة للعاملين في الخدمات وينشئون الأدوات التي نجدها مفيدة لتقليل النفقات العامة في إعداد مشغّلي الخدمات. وتم إدراجها في مكتبات مشغّل الخدمات. الخياران الرئيسيان هما:
- sw-precache: أداة وقت إنشاء تنشئ نصًا برمجيًا لمشغِّل خدمات مفيد للإعداد المسبق لهيكل تطبيق الويب
- sw-toolbox: مكتبة توفّر عملية تخزين مؤقت في وقت التشغيل للموارد التي لا يتم استخدامها بشكلٍ متكرّر
كتب "جيف بوسنيك" دليلاً تمهيديًا سريعًا حول ميزة sw-precache باسم بلا إنترنت أولاً، سريع، مع وحدة sw-precache ودرس تطبيقي حول الترميز على الأداة نفسها التي قد تجدها مفيدة.
وفّر كل من Chrome وOpera وFirefox دعمًا للعاملين في الخدمات، حيث كانت لدى Edge إشارات عامة إيجابية عن الاهتمام بهذه الميزة. ذكرت Safari بإيجاز الاهتمام بها من خلال خطة خمس سنوات اقترحها أحد المهندسين.
الإشعارات الفورية لإعادة التفاعل
فعّالاً، يمكنك إنشاء تطبيقات ويب يمكن للمستخدمين التفاعل معها خارج علامة التبويب. ويمكن إغلاق المتصفح ولا يحتاجون حتى إلى استخدام تطبيق الويب بفعالية للتفاعل مع تجربتك. تتطلّب هذه الميزة كلاً من مشغّل الخدمات وبيانًا لتطبيق الويب، وتعتمدان على بعض الميزات التي تم تلخيصها في وقت سابق.
يتم تنفيذ واجهة برمجة التطبيقات Push API في Chrome، وهي قيد التطوير في Firefox وقيد المراجعة في Edge. ما من إشارات علنية من Safari عن نيّة استخدامها في استخدام هذه الميزة حتى الآن.
مقالة Push Notifications on the Open Web هي مقدّمة شاملة حول عملية إعداد Push الذي نفّذه "مات غاونت"، وتتوفّر أيضًا درس تطبيقي حول ترميز الإشعارات الفورية في "أساسيات الويب".
يطلعك مايكل فان أويركيرك من فريق Chrome أيضًا على مقدمة مدتها 6 دقائق إذا كنت بحاجة إلى مزيد من الفيديوهات.
إضافة طبقات الميزات المتقدّمة
تذكَّر أنّ تجربة المستخدم يمكن أن تكون بمستويات مختلفة من الحلاقة بناءً على المتصفح المُستخدَم لعرض تطبيق الويب، حيث يمكنك التحكّم في واجهة أوامر التطبيق.
يمكن أيضًا إضافة الميزات الإضافية التي سيتم توفيرها إلى النظام الأساسي للويب، مثل مزامنة البيانات في الخلفية (لمزامنة البيانات مع أحد الخوادم حتى عندما يكون تطبيق الويب مغلقًا) والبلوتوث على الويب (للتواصل إلى الأجهزة التي تتضمن بلوتوث من تطبيق الويب) ضمن تطبيق الويب التقدّمي بهذه الطريقة.
تم تفعيل ميزة "مزامنة الخلفية بلقطة واحدة" في Chrome، وقد نشر فؤاد فيديو عن تطبيقه بلا إنترنت ويكيبيديا ومقالته توضّح ذلك بشكل عملي. لدى فرانسوا بوفورت أيضًا عدد من نماذج البلوتوث على الويب المتاحة إذا كنت مهتمًا بتجربة واجهة برمجة التطبيقات هذه.
متوافقة مع إطار العمل
لا يوجد شيء يمنعك من تطبيق أي من المبادئ المذكورة أعلاه على تطبيق أو إطار عمل حالي تقوم بإنشائه. تشمل بعض المبادئ الأخرى التي يجب وضعها في الاعتبار أثناء إنشاء تطبيق الويب التقدّمي نموذج الأداء المرتكز على المستخدم في برنامج RAIL والصور المتحركة المستندة إلى FLIP.
آمل أن نشهد خلال عام 2016 زيادةً في عدد النماذج الأولية ومشاريع المحتوى الأساسي بشكل طبيعي لدعم "تطبيقات الويب التقدّمية" كميزة أساسية. وحتى ذلك الحين، لم يكُن العائق الذي يعترض طريق إضافة هذه الميزات إلى تطبيقاتك مرتفعًا جدًا، وهي ميزة IMHO التي تستحق الجهد المبذول.
هندسة معمارية
هناك مستويات مختلفة لطريقة "الشامل" في نموذج تطبيق الويب التقدمي، لكن أحد الأساليب الشائعة المتبعة هو تصميم بنية التطبيق حول هيكل التطبيق. وهذا ليس مطلبًا صعبًا، ولكنه له العديد من المزايا.
تشجِّع بنية هيكل التطبيق على تخزين هيكل التطبيق (واجهة المستخدم) مؤقتًا حتى يعمل بلا اتصال بالإنترنت وملء محتواه باستخدام JavaScript. في الزيارات المتكررة، يسمح لك ذلك بالحصول على وحدات بكسل مفيدة على الشاشة بسرعة كبيرة بدون الاتصال بالشبكة، حتى إذا صدر المحتوى منها في النهاية. ويحقق ذلك مكاسب كبيرة في الأداء.
علَّق "جيريمي كيث" مؤخرًا أنّه في هذا النوع من النماذج، ربما لا يجب النظر إلى العرض من جهة الخادم على أنّه احتياطي، ولكن يجب النظر إلى العرض من جهة العميل على أنّه تحسين. هذه ملاحظات عادلة.
في نموذج Application Shell، يجب استخدام العرض من جهة الخادم قدر الإمكان واستخدام العرض التدريجي من جهة العميل كتحسين بالطريقة نفسها التي نعمل بها على "تحسين" التجربة عندما يكون مشغّل الخدمات متوافقًا. ويمكن معالجة هذا الأمر في نهاية المطاف.
نصيحتي لك هي قراءة المحتوى الذي نشرناه حول البنية وتقييم أفضل طريقة لتطبيق المبادئ المماثلة على التطبيق والحزمة.
بدء النصوص النموذجية
هيكل التطبيق
يحتوي مستودع app-shell على تنفيذ شبه مكتمل لبنية Application Shell. وتحتوي على واجهة خلفية مكتوبة في Express.js وواجهة أمامية مكتوبة في ES2015.
بما أنّ ذلك يشمل أجزاءً من النموذج من جانب العميل والخادم، وأن هناك الكثير من الأمور التي تحدث، سيستغرق الأمر بعض الوقت للتعرف على قاعدة الرموز. بخلاف ذلك، كانت نقطة البداية الأكثر شمولية لتطبيق الويب التقدّمي الآن. سيكون محور تركيزنا التالي في هذا المشروع هو محرر المستندات.
مجموعة أدوات بدء التشغيل من البوليمر
نقطة الانطلاق الرسمية لتطبيقات الويب Polymer تتوافق مع ميزات تطبيق الويب التقدّمي التالية:
- بيان تطبيق الويب
- شاشة البداية الخاصة بمتصفِّح Chrome لأجهزة Android
- التخزين المؤقت لعامل الخدمة بلا اتصال بالإنترنت باستخدام عناصر Platinum SW
- الإشعارات الفورية (مطلوب الإعداد اليدوي) باستخدام عناصر الدفع البلاتينية
لا يتوافق الإصدار الحالي من PSK مع بعض أنماط الأداء الأكثر تقدّمًا (مثل نموذج هيكل التطبيق والتحميل غير المتزامن) التي تجدها في بعض تطبيقات الويب التقدّمية البوليمرية.
نهدف إلى تجربة خَبز هذه الأنماط في PSK في عام 2016، ولكن يمكن العثور على تجارب مبكرة حول هذا الأمر في تطبيق Zuperkulblog البوليمر من تأليف روب دودسون والتحدث عن أنماط الأداء البوليمر الممتاز من تأليف "إريك بيدلمان".
مجموعة أدوات بدء استخدام الويب
تشمل نقطة البداية المستندة إلى رأينا لمشاريع فانيلا الجديدة ميزات تطبيق الويب التقدمي التالية:
- بيان تطبيق الويب
- شاشة البداية الخاصة بمتصفِّح Chrome لأجهزة Android
- التخزين المؤقت المسبق لمشغّل الخدمات بفضل ميزة sw-precache
إذا كنت تفضّل العمل باستخدام vanilla JS/ES2015 وتعذّر عليك استخدام Polymer، قد تكون مجموعة أدوات Web Starter Kit مفيدة كنقطة مرجعية يمكنك إعادة استخدامها أو سرقة مقتطفات الرموز منها.
تطبيقات الويب التقدّمية التي تتضمّن أطر عمل أو بدونها
وقد تم إنشاء عدد من تطبيقات الويب التقدمية مفتوحة المصدر من قبل أعضاء المنتدى سواء أكانت لديهم مكتبات وأطر عمل JS أم بدونها. إذا كنت تبحث عن الإلهام، فقد تكون المستودعات أدناه مفيدة كمرجع. إلا أنها أيضًا تطبيقات رائعة جدًا.
تجربة Vanilla JavaScript
- تم إنشاء مذكرات الصوت للفنان "بول لويس" باستخدام بنية مشابهة لـ "
app-shell" (عملية كتابة). - موسوعة ويكيبيديا بلا إنترنت من تأليف "جيك أرشيبالد" (فيديو)
- Air Horner لبول كينلان
- أداة ضبط الغيتار لـ "بول لويس" (مراجعة)
Polymer
- Zuperkulblog من إعداد روب دودسون (شرائح)
تفاعل
- iFixit من قبل جيف بوسنيك - يستخدم
sw-precacheللتخزين المؤقت لهيكل التطبيق (العروض التقديمية)
نموذج العناصر الافتراضية
- Pokedex من إنشاء "نولان لوسون": تطبيق ويب تقدّمي ممتاز يطبّق أسلوب "إنجاز جميع المهام في عامل على الويب" للمساعدة في العرض التدريجي. (الإضافة)
Angular.js
- Timey.in من تأليف "كينيث أوشنبرغ" يستخدم أيضًا
sw-precacheللتخزين المسبق للموارد
الملاحظات الختامية
كما ذكرنا سابقًا، لا تزال تطبيقات الويب التقدّمية في مراحلها الأولى، ولكن حان الوقت للتعرّف على المنهجيات التي تستند إليها هذه التطبيقات ومعرفة مدى إمكانية تطبيقها على تطبيقات الويب الخاصة بك.
يخطّط "بول كينلان" حاليًا لطرح إرشادات حول "أساسيات الويب" حول تطبيقات الويب التقدّمية. وإذا كان لديك ملاحظات بشأن المجالات التي تريد تناولها، يُرجى كتابة تعليق في سلسلة المحادثات.
محتوى إضافي للقراءة
- تطبيقات الويب التقدّمية: الخروج من علامات التبويب بدون فقدان روحنا
- لماذا تُعتبر تطبيقات الويب التقدّمية مستقبل تطوير الويب
- تطبيقات الويب التقدّمية: جاهزة للاستخدام في الوقت الفعلي
- إنشاء تطبيق تقدّمي باستخدام ServiceWorker
- تطبيقات الويب التقدّمية هي المستقبل
- تطبيق الويب التقدّمي: طريقة جديدة لتجربة الأجهزة الجوّالة
- لمحة عن Pokedex.org: تطبيق ويب تقدّمي لمحبي Pokémon
- ملخّص مؤتمر مطوّري برامج Chrome: تطبيقات الويب التقدّمية