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

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

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

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

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

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

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

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

بدلاً من نقل النافذة وتغيير حجمها بشكل مطلق، يمكنك نقلها نسبيًا وتغيير حجمها باستخدام moveBy() وresizeBy().

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

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

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

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

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

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

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

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

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

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

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

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

// 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، يمكن لتطبيقك المتوافق مع الويب (PWA) التحكّم بشكلٍ أكبر في لوحة المفاتيح على الأنظمة الأساسية المتوافقة باستخدام واجهة navigator.virtualKeyboard.

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

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