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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عند الاتصال بالرقم open() ضمن نافذة تطبيق ويب تقدّمي (PWA) على نظام التشغيل 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 وGoogle Chrome لتطبيقات الويب التقدّمية (PWA) على أجهزة الكمبيوتر المكتبي.

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

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

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

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

  • بإمكان أدوات تحرير الرسومات ذات النوافذ المتعددة في la 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).

بفضل واجهة برمجة تطبيقات VirtualKeyboard، يمكن الآن تطبيق الويب التقدّمي 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

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

المراجِع