يمكن لتطبيقات الويب التقدّمية فعل أكثر من مجرّد عرض المحتوى على الشاشة أو الاتصال بخدمات الويب. يمكن لتطبيقات الويب التقدّمية (PWA) التعامل مع الملفات من نظام الملفات والتفاعل مع حافظة النظام والوصول إلى الأجهزة المتصلة بالجهاز وغير ذلك الكثير. تتوفّر كل واجهة Web API لتطبيق الويب التقدّمي (PWA)، وتتوفّر بعض واجهات برمجة التطبيقات الإضافية عند تثبيت تطبيقك.
يمكنك استخدام What Web Can Do Today لمعرفة ما يمكن فعله على كل نظام أساسي. بالنسبة إلى واجهات برمجة التطبيقات أو الإمكانات الفردية، يمكنك استخدام هل يمكنني استخدام أو جداول توافق المتصفِّح في MDN.
التحقق دائمًا من دعم الميزات
يشير الحرف الأول في تطبيق الويب التقدّمي (PWA) إلى الاسم التدريجي، ويستند إلى فكرة التحسين التدريجي ورصد الميزات. من غير المفترض أن يعمل تطبيقك بالطريقة نفسها على جميع الأجهزة. إنّ تنوع السياقات والقدرات على مليارات الأجهزة في البلدان المختلفة يجعل تطبيقات الويب التقدّمية (PWA) نظامًا أساسيًا مثاليًا بفضل تقدّم هذه التطبيقات.
يعني هذا أنّك بحاجة إلى تطوير تطبيقك في طبقات قد لا تكون متاحة على كل جهاز وللتحقّق من توفُّره قبل استخدامه.
عليك التحقق باستخدام JavaScript من توفُّر واجهة برمجة تطبيقات قبل استخدامها، أو الاستفسار من واجهة برمجة التطبيقات عمّا إذا كانت الخدمة متوفّرة على هذا الجهاز تحديدًا.
ويب فعّال
أصبح الويب قويًا جدًا اليوم. مثال:
- يمكنك إنشاء تطبيق دردشة فيديو محليًا باستخدام WebRTC ورصد الموقع الجغرافي والرسائل الفورية.
- يمكنك جعل التطبيق قابلاً للتثبيت.
- يمكنك إضافة تأثيرات الفيديو باستخدام WebAssembly.
- ويمكنك حتى تحويلها إلى واقع افتراضي باستخدام WebGL وWebXR.
تعزيز تطبيق الويب التقدّمي (PWA)
لنقسِّم واجهات برمجة التطبيقات لإمكانيات PWA إلى أربع مجموعات:
- اللون الأخضر: تتوفر واجهات برمجة التطبيقات في كل متصفح على كل نظام أساسي، عندما يكون ذلك ممكنًا من الناحية الفنية. تم شحن معظمها لسنوات عديدة، وتتميز بأنّها مخصصة للبالغين، ويمكنك استخدامها بثقة. ومن أمثلة واجهات برمجة التطبيقات في هذه المجموعة واجهة برمجة التطبيقات للموقع الجغرافي.
- أخضر فاتح: لا تتوفّر واجهات برمجة التطبيقات إلا في بعض المتصفِّحات. وبالنظر إلى عدم وجود دعم على بعض الأنظمة الأساسية، فقد نضجت هذه الأنظمة ضمن المجموعة الفرعية من المتصفحات المتوافقة حتى تتمكّن من استخدام الإمكانية عليها بثقة. ومن الأمثلة على واجهات برمجة التطبيقات في هذه المجموعة: WebUSB.
- اللون الأصفر: واجهات برمجة تطبيقات تجريبية. لم تتم معالجة واجهات برمجة التطبيقات هذه حتى الآن، بل هي متاحة فقط في بعض المتصفّحات وضمن الاختبارات أو الفترات التجريبية. تحدثنا عن بعض هذه الإمكانات في الفصل التجريبي.
- اللون الأحمر: مجموعة واجهات برمجة التطبيقات التي لا يمكنك استخدامها في تطبيق الويب التقدّمي (PWA)، والتي لا تزال خطط إضافتها طويلة المدى. ومن أمثلة واجهات برمجة التطبيقات من هذه المجموعة وضع الحدود الجغرافية.
القدرات الصديقة للبيئة
في ما يلي قائمة بأهم الإمكانات التي يمكنك استخدامها في تطبيق الويب التقدّمي (PWA).
الأساسيات
- تخزين الملفات في ذاكرة التخزين المؤقت محليًا باستخدام Cache API، كما هو موضّح في فصل التخزين المؤقت.
- تنفيذ المهام في سلاسل المحادثات باستخدام عمال الويب، كما رأينا في فصل إدارة التعقيد.
- إدارة طلبات الشبكة باستخدام استراتيجيات مختلفة في مشغّل الخدمات، كما هو موضّح في فصل مشغّلي الخدمات.
- لوحة رسم ثنائية الأبعاد لعرض رسومات ثنائية الأبعاد على الشاشة باستخدام واجهة برمجة تطبيقات Canvas.
- لوحة رسم عالية الأداء ثنائية وثلاثية الأبعاد، أو WebGL، لعرض رسومات ثلاثية الأبعاد.
- WebAssembly، أو WASM، لتنفيذ رموز برمجية مجمّعة ومنخفضة المستوى لتحسين الأداء.
- الاتصال في الوقت الفعلي باستخدام WebRTC API
- واجهات برمجة التطبيقات لأداء الويب لقياس الأداء والمساعدة في توفير تجربة أفضل اطّلِع على دليل واجهة برمجة التطبيقات Performance API للحصول على مزيد من المعلومات.
- يمكنك تخزين البيانات محليًا باستخدام IndexedDB وإدارة مساحة التخزين لطلب مساحة تخزين وطلب مساحة تخزين دائمة، كما هو موضَّح في فصل البيانات بلا اتصال بالإنترنت.
- صوت منخفض المستوى بفضل Web Audio API
- رصد الواجهة باستخدام Page visibility API.
- الاتصال بالشبكة باستخدام Fetch API وWebSocket API
الأجهزة وأدوات الاستشعار
- يحصل رصد الموقع الجغرافي على الموقع الجغرافي للمستخدم من خلال مزوّدي خدمة مختلفين، مثل القمر الصناعي أو Wi-Fi من خلال واجهة برمجة التطبيقات للموقع الجغرافي.
- يتلقى الكاميرا والميكروفون ساحات مشاركات الوسائط من الكاميرات والميكروفونات باستخدام واجهة أجهزة الوسائط.
- تجمع أجهزة الاستشعار معلومات في الوقت الفعلي من مقياس التسارع والجيروسكوب ومقياس المغناطيسية وغيرها باستخدام Sensors API أو واجهات قديمة، مثل DeviceMotionEvent وDeviceOrientationEvent. في متصفّح Safari، يجب استخدام طلب مربّع حوار أذونات غير عادي لاستخدامها.
- بفضل أحداث المؤشر وأحداث اللمس، تتيح لك ميزة اللمس والمؤشر الوصول إلى معلومات حول جميع اللمسات والنقرات التي تتم من خلال المؤشر بإصبعك أو الماوس أو لوحة اللمس أو القلم.
- لوحات الألعاب لقراءة المعلومات الواردة من لوحات الألعاب وذراع التحكّم العادية المتصلة بالجهاز باستخدام واجهة برمجة التطبيقات للوحة الألعاب
- المصادقة بالمقاييس الحيوية (مثل التعرّف على الوجه أو بصمة الإصبع) باستخدام مصادقة الويب أو WebAuthn
دمج نظام التشغيل
- بفضل Web Speech API، يستخدم تركيب الكلام والتعرّف على الصوت الأصوات المثبَّتة على النظام الأساسي للتحدّث إلى المستخدم والتعرّف على ما يقوله.
- يمكنك مشاركة المحتوى من تطبيق الويب التقدّمي (PWA) مع التطبيقات والأماكن الأخرى على الجهاز، وذلك بفضل Web Share API، كما سنوضّح في فصل دمج نظام التشغيل.
- بإمكانك الوصول إلى الحافظة لحفظ المحتوى واسترداده من الحافظة بتنسيقات مختلفة وذلك بفضل Clipboard API كما عرضتُ في فصل دمج نظام التشغيل.
- إدارة بيانات اعتماد المستخدم وكلمات مروره باستخدام Credential Management API
- تفعيل ميزة "نافذة ضمن النافذة": تشغيل الفيديوهات ضمن نظام التشغيل باستخدام واجهة برمجة التطبيقات "نافذة ضمن النافذة"
- عرض المحتوى في وضع ملء الشاشة باستخدام واجهة برمجة التطبيقات بملء الشاشة، كما عرضتُ في فصل Windows.
إمكانات خضراء فاتحة
في ما يلي قائمة بأهم الإمكانات التي يمكنك استخدامها في تطبيق الويب التقدّمي (PWA) مع الانتباه إلى أنّها قد لا تكون متاحة على بعض المتصفّحات.
الأساسيات
- WebGL 2.0، وهو إصدار جديد من مواصفات WebGL لمطابقة OpenGL 3.0.
- برامج الترميز، وإمكانية الوصول المنخفض المستوى إلى الإطارات الفردية للفيديوهات المضمَّنة والمقاطع الصوتية، وهي مفيدة لتطبيقات الويب التي تتطلّب تحكُّمًا كاملاً في طريقة معالجة الوسائط من خلال Web Codecs API.
الأجهزة وأدوات الاستشعار
- عناصر تحكُّم متقدّمة في الكاميرا للوصول إلى عناصر التحكّم في العرض الشامل والإمالة والتكبير/التصغير بالإضافة إلى واجهات برمجة تطبيقات الوسائط.
- البلوتوث منخفض الطاقة للتواصل مع الأجهزة التي تتضمّن بلوتوث منخفضة الطاقة بالقرب من المستخدم باستخدام Web Bluetooth API. راجِع التواصل مع الأجهزة التي تتضمّن بلوتوث عبر JavaScript لمزيد من المعلومات.
- الاتصال قصير المدى لتبادل البيانات عبر NFC من خلال رسائل تبادل بيانات NFC خفيفة الوزن (NDEF)، مثل علامة أو بطاقة NFC باستخدام WebNFC API. يمكنك أيضًا الاطّلاع على التفاعل مع أجهزة NFC على Chrome لنظام التشغيل Android للحصول على مزيد من التفاصيل.
جهاز ملحق تسلسلي يتيح الوصول منخفض المستوى إلى الأجهزة المتصلة بالجهاز باستخدام منفذ تسلسلي أو USB أو تسلسل تسلسلي عبر البلوتوث باستخدام WPI التسلسلي على الويب في الرابط التالي، يمكنك معرفة كيفية القراءة من منفذ تسلسلي والكتابة إليه.
الوصول إلى جهاز USB للتواصل مع الأجهزة المتصلة من خلال WebUSB API. اطّلِع على مقالة الوصول إلى أجهزة USB على الويب لمزيد من المعلومات.
تسمح أجهزة الواجهة البشرية لتطبيق الويب التقدّمي (PWA) بالتفاعل مع أي نوع من الأجهزة المعدّة للتفاعل البشري غير المألوف، وذلك باستخدام WebHID API. يمكنك الاطّلاع على هذا الدليل حول توصيل أجهزة HID غير معروفة.
- يقرأ الضوء المحيط مستوى الإضاءة الحالية أو الإضاءة المحيطة حول الجهاز، بالإضافة إلى Sensors API.
- يقدّم الاهتزاز للمستخدم ملاحظات حسّية عند رصد حدث، إذا كان الجهاز يتيحه، من خلال Vibration API.
- تسجيل الوسائط يسجّل البيانات التي تم إنشاؤها بواسطة عنصر MediaStream أو HTMLMediaElement (مثل علامة
<video>
) لتحليلها أو معالجتها أو حفظها على القرص، وذلك بفضل MediaRecorder API - يؤدي تطبيق ميزة "قفل التنشيط" على الشاشة إلى منع الجهاز من تعتيم الشاشة أو قفلها عندما يكون تطبيق الويب التقدّمي بحاجة إلى مواصلة تشغيله، وذلك باستخدام واجهة برمجة تطبيقات قفل تنشيط الشاشة.
- يتيح لك الواقع الافتراضي استخدام سماعة رأس وأجهزة أخرى في تطبيق الويب التقدّمي (PWA)، وذلك بفضل WebXR Device API.
- يمكن تحقيق الواقع المعزَّز في تطبيق الويب التقدّمي (PWA) بعدة طرق، مثل استخدام WebXR Device API أو تطبيق Safari السريع لمحتوى الواقع المعزّز.
- رصد المستخدمين غير النشطين باستخدام واجهة برمجة التطبيقات IDle Detection API
- يؤدي قفل الاتجاه إلى قفل الاتجاه إلى الوضع العمودي أو الأفقي عندما يكون تطبيق الويب التقدّمي (PWA) على الشاشة، وذلك بفضل واجهة برمجة تطبيقات الشاشة أو خاصية
orientation
في بيان تطبيق الويب للتطبيقات المثبّتة. - تقديم المحتوى على أجهزة العرض (بروجيكتور) وشاشات العرض الثانوية، وذلك بفضل Presentation API
- قفل مؤشر الماوس لتلقّي معلومات عن حركة دلتا من المؤشرات (الماوس ولوحات اللمس والمؤشرات) بدلاً من قيم الموضع، وهي مفيدة لبعض الألعاب، وذلك بفضل واجهة برمجة تطبيقات Pointer Lock
دمج نظام التشغيل
- قراءة الملفات وكتابتها على الجهاز، وذلك بفضل File System Access API، كما رأيت في فصل OS Integration.
- الحصول على المحتوى من تطبيقات أخرى باستخدام Web Share Target، كما شرحتُ في فصل التكامل مع نظام التشغيل
- الحصول على بيانات جهات الاتصال باستخدام Contact Picker API، كما هو موضح في فصل التكامل مع نظام التشغيل
- يمكنك المزامنة في الخلفية أثناء عدم استخدام تطبيق الويب التقدّمي (PWA)، وذلك بفضل واجهة برمجة التطبيقات Background Synchronization API.
- جدولة المهام عندما لا يكون تطبيق الويب التقدّمي (PWA) قيد الاستخدام، وذلك بفضل Web دورic Background Synchronization API.
- إرسال الإشعارات باستخدام Web Push وWeb notifications API
- يمكنك نقل الملفات في الخلفية عندما لا يستخدم المستخدم تطبيق الويب التقدّمي (PWA)، وذلك من خلال Background Fetch API.
- دمج تشغيل الوسائط مع نظام التشغيل باستخدام Media Session API
- يمكنك إدارة الدفعات في تطبيق الويب التقدّمي (PWA) من خلال Payment Request API. توفّر Apple أيضًا مكتبة Apple Pay JS بالإضافة إلى Payment Request API.
- طلب البحث عن حالة الشبكة، مثل نوع الاتصال (4G وWi-Fi) وعلامة "حفظ البيانات" باستخدام Network Information API
- التقاط شاشة المستخدم للتسجيل الرقمي للشاشة أو مشاركة الشاشة باستخدام واجهة برمجة التطبيقات الخاصة بميزة "التقاط الشاشة"
- رصد الأشكال باستخدام أدوات الرصد السريعة للأجهزة على الجهاز، بما في ذلك الرموز الشريطية (الوجوه البشرية وميزة التعرّف البصري على الأحرف (OCR) للنص لا تزال قيد التطوير) باستخدام Shape Detection API
- إجراء طلب بحث عن ذاكرة الجهاز باستخدام واجهة ذاكرة الجهاز.
- تتيح لك كلمات المرور التي تُستخدم لمرة واحدة عبر SMS تلقّي رمز تلقائيًا عبر الرسائل القصيرة SMS والمرسَلة من خادمك باستخدام WebOTP API. ينفِّذ Safari مجموعة فرعية من الحلّ استنادًا إلى العنصر
<input>
. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في مدونة WebKit. - إدارة لوحة المفاتيح الافتراضية التي تظهر على شاشات الأجهزة الجوّالة باستخدام واجهة برمجة التطبيقات للوحة المفاتيح الافتراضية.