إدارة النوافذ

يدير تطبيق الويب التقدّمي (PWA) خارج المتصفّح نافذته الخاصة. في هذا الفصل، سوف فهم واجهات برمجة التطبيقات والإمكانات اللازمة لإدارة نافذة داخل نظام التشغيل.

نافذة تطبيق الويب التقدّمي (PWA)

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

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

نقل النافذة وتغيير حجمها

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

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

وما مِن طريقة لتحديد الحجم والموضع المفضّلَين لتطبيق الويب التقدّمي (PWA) ضمن البيان. لا يمكنك تغيير موضع النافذة وتغيير حجمها إلا باستخدام JavaScript API. من الرمز البرمجي، يمكنك نقل نافذة تطبيق الويب التقدّمي (PWA) وتغيير حجمها باستخدام الدالتَين moveTo(x, y) وresizeTo(x, y) للكائن window.

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

document.addEventListener("DOMContentLoaded", event => {
   // we can move only if we are not in a browser's tab
   isBrowser = matchMedia("(display-mode: browser)").matches;
   if (!isBrowser) {
      window.moveTo(16, 16);
      window.resizeTo(800, 600);
   }
});

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

التصفّح للوصول إلى مواقع إلكترونية أخرى

إذا كنت تريد إرسال المستخدم إلى موقع إلكتروني خارجي خارج نطاق تطبيق الويب التقدّمي (PWA)، يمكنك إجراء ذلك باستخدام عنصر HTML عادي <a href> من خلال location.href أو فتح نافذة جديدة على الأنظمة الأساسية المتوافقة.

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

في ما يلي بعض ميزات المتصفِّحات داخل التطبيق:

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

متصفّح داخل تطبيق على تطبيق ويب تقدّمي (PWA) متوافق مع أجهزة الكمبيوتر المكتبي عند تصفُّح عنوان URL خارج النطاق

متصفّح داخل التطبيق على هاتف iPhone عند تصفُّح عنوان URL خارج النطاق داخل تطبيق ويب تقدّمي مستقل

متصفّح داخل التطبيق على نظام التشغيل Android عند تصفُّح عنوان URL خارج النطاق داخل تطبيق ويب تقدّمي مستقل

مسارات التفويض

يتضمّن العديد من مسارات مصادقة الويب والتفويض إعادة توجيه المستخدم إلى عنوان URL مختلف في مصدر مختلف للحصول على رمز مميّز يعود إلى أصل تطبيق الويب التقدّمي (PWA)، مثل استخدام OAuth 2.0.

في هذه الحالات، يتّبع المتصفّح داخل التطبيق العملية التالية:

  1. يفتح المستخدم تطبيق الويب التقدّمي (PWA) وينقر على تسجيل الدخول.
  2. يُعيد تطبيق الويب التقدّمي (PWA) توجيه المستخدم إلى عنوان URL خارج نطاق تطبيق الويب التقدّمي (PWA) لكي يفتح محرّك العرض متصفّحًا داخل تطبيق الويب التقدّمي (PWA).
  3. يمكن للمستخدم إلغاء المتصفِّح داخل التطبيق والرجوع إلى تطبيق الويب التقدّمي (PWA) في أي وقت.
  4. يسجِّل المستخدم الدخول إلى المتصفِّح داخل التطبيق. يُعيد خادم المصادقة توجيه المستخدم إلى مصدر تطبيق الويب التقدّمي (PWA)، مع إرسال الرمز المميّز كوسيطة.
  5. يتم إغلاق المتصفّح داخل التطبيق عند رصد عنوان URL يشكّل جزءًا من نطاق تطبيق الويب التقدّمي (PWA).
  6. يُعيد المحرّك توجيه عمليات التنقّل في نافذة تطبيق الويب التقدّمي (PWA) الرئيسية إلى عنوان URL الذي انتقل إليه خادم المصادقة أثناء استخدام المتصفّح داخل التطبيق.
  7. يحصل تطبيق الويب التقدّمي (PWA) على الرمز المميّز ويخزّن الرمز المميّز ويعرض تطبيق الويب التقدّمي (PWA).

فرض التنقل في المتصفح

إذا أردت فتح المتصفّح باستخدام عنوان URL وليس المتصفّح داخل التطبيق، يمكنك استخدام هدف _blank الذي يبلغ عناصر <a href>. ولا تعمل هذه الميزة إلا على تطبيقات الويب التقدّمية (PWA) المتوافقة مع أجهزة الكمبيوتر المكتبي. على الأجهزة الجوّالة، لا يتوفر خيار لفتح متصفح باستخدام عنوان URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

جارٍ فتح نوافذ جديدة

على أجهزة الكمبيوتر المكتبي، يمكن للمستخدمين فتح أكثر من نافذة واحدة لتطبيق الويب التقدّمي (PWA) نفسه. سيكون لكل نافذة انتقال مختلف إلى start_url نفسه، كما لو كنت تفتح علامتَي تبويب متصفّح بعنوان URL نفسه. من القائمة في تطبيق الويب التقدّمي (PWA)، يمكن للمستخدمين النقر على "ملف" ثم "نافذة جديدة"، ويمكنك من خلال رمز تطبيق الويب التقدّمي فتح نافذة جديدة باستخدام الدالة open(). راجِع المستندات لمزيد من التفاصيل.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

تطبيق الويب التقدّمي (PWA) نفسه المثبَّت مع نوافذ متعددة تم فتحها على نظام تشغيل على أجهزة الكمبيوتر المكتبي.

يؤدي الاتصال بـ open() ضمن نافذة تطبيق الويب التقدّمي على iOS أو iPadOS إلى إرجاع null ولا يؤدي إلى فتح أي نافذة. يؤدي فتح نوافذ جديدة على Android إلى إنشاء متصفّح جديد داخل التطبيق لعنوان URL، حتى إذا كان عنوان URL ضمن نطاق تطبيق الويب التقدّمي (PWA)، وهو لا يؤدي عادةً إلى تشغيل تجربة تصفُّح خارجية.

عنوان النافذة

تم استخدام العنصر <title> بشكل أساسي لأغراض متعلقة بتحسين محركات البحث لأنّ المساحة محدودة في علامة تبويب المتصفّح. عند الانتقال من المتصفّح إلى النافذة في تطبيق الويب التقدّمي (PWA)، تكون مساحة شريط العناوين بالكامل متاحة لك.

يمكنك تحديد محتوى شريط العناوين:

  • بشكل ثابت في عنصر HTML <title>
  • تغيير خاصية السلسلة document.title ديناميكيًا في أي وقت

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

وضع التبويب

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

يمكنك قراءة المزيد عن هذه الإمكانية التجريبية في وضع التطبيق المبوَّب في تطبيق الويب التقدّمي (PWA).

تراكب عناصر التحكم في النوافذ

سبق أن أشرت إلى أنّه يمكنك تغيير عنوان النافذة من خلال تحديد قيمة العنصر <title> أو السمة document.title. لكنها دائمًا قيمة سلسلة. ماذا لو استطعنا تصميم شريط العناوين كما نريد، باستخدام HTML وCSS والصور؟ وهنا يأتي دور ميزة Window Controls Overlay، وهي إمكانية تجريبية جديدة في Microsoft Edge وتطبيقات الويب التقدّمية (PWA) الخاصة بمتصفّح Google Chrome لأجهزة الكمبيوتر المكتبي.

يمكنك معرفة المزيد عن هذه الميزة في مقالة تخصيص تراكب عناصر التحكم في النوافذ لشريط العناوين في تطبيق الويب التقدّمي (PWA).

من خلال تراكب عناصر التحكم في النوافذ، يمكنك عرض المحتوى في شريط العناوين.

إدارة النوافذ

مع وجود شاشات متعددة، سيرغب المستخدمون في استخدام كل المساحة المتاحة لهم. على سبيل المثال:

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

تسمح Window Management API لتطبيقات الويب التقدّمية (PWA) بتنفيذ ذلك والمزيد.

جارٍ الحصول على تفاصيل الشاشة

تضيف Window Management API طريقة جديدة، window.getScreenDetails()، تعرض عنصرًا يضم شاشات كمصفوفة غير قابلة للتغيير من الشاشات المرفقة. يتوفّر أيضًا عنصر مباشر يمكن الوصول إليه من ScreenDetails.currentScreen، ويتوافق مع عنصر window.screen الحالي.

يعمل العنصر المعروض أيضًا على تنشيط حدث screenschange عند تغيير مصفوفة screens. (ولا يحدث ذلك عند تغيير السمات على شاشات فردية). تعمل الشاشات الفردية، إما window.screen أو شاشة في مصفوفة screens، أيضًا على تنشيط حدث change عند تغيير سماتها.

// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary;  // e.g. true
screenDetails.screens[0].isInternal;  // e.g. true
screenDetails.screens[0].pointerTypes;  // e.g. ["touch"]
screenDetails.screens[0].label;  // e.g. 'Samsung Electric Company 28"'

// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
 // NOTE: Does not fire on changes to attributes of individual screens.
  const screenCount = screenDetails.screens.length;
  const currentScreen screenDetails.currentScreen.id;
});

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

قفل تنشيط الشاشة

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

// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();

// Listen for wake lock release
wakeLock.addEventListener('release', () => {
 console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();

لوحة المفاتيح الافتراضية

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

بفضل واجهة برمجة تطبيقات Virtualلوحة المفاتيح، يمكن لتطبيق الويب التقدّمي (PWA) الآن التحكّم بشكل أكبر في لوحة المفاتيح على الأنظمة الأساسية المتوافقة باستخدام واجهة navigator.virtualKeyboard، بما في ذلك:

  • إظهار لوحة المفاتيح الافتراضية التي تتضمّن الدالتين navigator.virtualKeyboard.show() وnavigator.virtualKeyboard.hide() وإخفائها
  • يمكنك إعلام المتصفّح بأنّك تعتزم إغلاق لوحة المفاتيح الافتراضية بنفسك من خلال ضبط navigator.virtualKeyboard.overlaysContent على قيمة مساوية لـ true.
  • معرفة وقت ظهور لوحة المفاتيح واختفائها مع الحدث geometrychange لـ navigator.virtualKeyboard
  • يتم ضبط سياسة لوحة المفاتيح الافتراضية بشأن تعديل عناصر المضيف (باستخدام contenteditable) باستخدام سمة HTML virtualkeyboardpolicy. تتيح لك السياسة تحديد ما إذا كنت تريد أن يتعامل المتصفِّح تلقائيًا مع لوحة المفاتيح الافتراضية باستخدام القيمة auto، أو معالجتها من خلال النص البرمجي باستخدام القيمة manual.
  • استخدام المتغيّرات البيئية في CSS للحصول على معلومات عن مظهر لوحة المفاتيح الافتراضية، مثل keyboard-inset-height وkeyboard-inset-top

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

الموارد