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

تدير التطبيقات المتوافقة مع الأجهزة الجوّالة (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 خارج النطاق ضمن تطبيق ويب تقدّمي (PWA) مستقل

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

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

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

  1. يفتح المستخدم تطبيقك المتوافق مع الأجهزة الجوّالة ويُقرّ على تسجيل الدخول.
  2. يعيد تطبيق الويب التقدّمي توجيه المستخدم إلى عنوان URL خارج نطاق تطبيق الويب التقدّمي لكي يفتح محرّك العرض متصفّحًا داخل التطبيق.
  3. يمكن للمستخدم إلغاء المتصفّح داخل التطبيق والعودة إلى تطبيقك المتوافق مع الأجهزة الجوّالة في أي وقت.
  4. يسجّل المستخدم الدخول إلى المتصفّح داخل التطبيق. يعيد خادم المصادقة توجيه المستخدم إلى مصدر تطبيقك المتوافق مع الأجهزة الجوّالة (PWA)، مع إرسال الرمز المميّز كوسيطة.
  5. يغلق المتصفّح داخل التطبيق نفسه عند رصد عنوان URL يمثّل جزءًا من نطاق التطبيق المتوافق مع الأجهزة الجوّالة.
  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 ديناميكيًا في أي وقت

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

وضع التبويب

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

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

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

لقد ذكرنا أنّه يمكنك تغيير عنوان النافذة من خلال تحديد قيمة العنصر <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;
});

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

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

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

// 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

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

الموارد