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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

وضع التبويب

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

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

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

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

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

باستخدام واجهة Window Controls Overlay، يمكنك عرض المحتوى في شريط العناوين.

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

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

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

تتيح واجهة برمجة التطبيقات Window Management API لتطبيقات الويب المتوافقة مع الأجهزة الجوّالة تنفيذ ذلك والمزيد.

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

تضيف 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].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();

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

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

بفضل واجهة برمجة التطبيقات VirtualKeyboard API، يمكن لتطبيقك المتوافق مع الويب الآن التحكّم بشكل أكبر في لوحة المفاتيح على الأنظمة الأساسية المتوافقة باستخدام واجهة 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لوحة المفاتيح.

الموارد