مدیریت پنجره

یک PWA خارج از مرورگر پنجره خود را مدیریت می کند. با APIها و قابلیت های مدیریت یک پنجره در سیستم عامل آشنا شوید.

اجرای در پنجره شخصی شما، که توسط PWA مدیریت می شود، دارای تمام مزایا و مسئولیت های هر پنجره در آن سیستم عامل است، مانند:

  • امکان جابجایی و تغییر اندازه پنجره در سیستم عامل های چند پنجره ای مانند Windows یا ChromeOS.
  • اشتراک‌گذاری صفحه با سایر پنجره‌های برنامه، مانند حالت تقسیم iPadOS یا حالت تقسیم صفحه اندروید.
  • در داک‌ها، نوارهای وظیفه، و در منوی alt-tab روی دسک‌تاپ، و فهرست‌های پنجره چند کار در دستگاه‌های تلفن همراه ظاهر می‌شود.
  • امکان کوچک کردن، جابجایی پنجره در سراسر صفحه نمایش و دسکتاپ و بستن آن در هر زمان.

پنجره را جابجا کرده و اندازه آن را تغییر دهید

پنجره PWA شما می تواند در هر اندازه ای باشد و در هر نقطه از صفحه در سیستم عامل های دسکتاپ قرار گیرد. به طور پیش‌فرض، وقتی کاربر برای اولین بار پس از نصب، PWA را باز می‌کند، PWA اندازه پنجره پیش‌فرض درصدی از صفحه فعلی را با حداکثر وضوح 1920x1080 در گوشه سمت چپ بالای صفحه دریافت می‌کند.

کاربر می تواند پنجره را جابجا کرده و اندازه آن را تغییر دهد و مرورگر آخرین اولویت را به خاطر می آورد. دفعه بعد که کاربر برنامه را باز می کند، پنجره اندازه و موقعیت قبلی را حفظ می کند.

هیچ راهی برای تعیین اندازه و موقعیت ترجیحی PWA در مانیفست وجود ندارد. شما فقط می توانید با استفاده از JavaScript API تغییر مکان و اندازه پنجره را تغییر دهید. با استفاده از توابع moveTo(x, y) و resizeTo(x, y) شی window ، می توانید از کد خود، پنجره PWA خود را جابجا کرده و اندازه آن را تغییر دهید.

به عنوان مثال، می توانید اندازه پنجره 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 می توانید تشخیص دهید که اندازه پنجره چه زمانی تغییر می کند. هیچ رویدادی برای گرفتن حرکت پنجره وجود ندارد، بنابراین گزینه شما این است که به طور مکرر موقعیت را پرس و جو کنید.

به جای جابجایی و تغییر اندازه کامل پنجره، می توانید با استفاده از moveBy() و resizeBy() به طور نسبی حرکت کرده و اندازه را تغییر دهید.

سایت های دیگر را مرور کنید

اگر می خواهید کاربر را به یک سایت خارجی بفرستید که برای PWA شما خارج از محدوده است، می توانید این کار را با یک عنصر استاندارد <a href> HTML انجام دهید. از location.href استفاده کنید یا یک پنجره جدید در سیستم عامل های سازگار باز کنید.

وقتی از URL خارج از محدوده مانیفست خود بازدید می کنید، موتور مرورگر PWA شما یک مرورگر درون برنامه ای را در زمینه پنجره شما ارائه می دهد.

یک مرورگر درون برنامه ای در PWA دسکتاپ هنگام مرور URL که خارج از محدوده است.

برخی از ویژگی های مرورگرهای درون برنامه عبارتند از:

  • آنها در بالای محتوای شما ظاهر می شوند.
  • آنها دارای یک نوار آدرس ثابت هستند که مبدا فعلی، عنوان پنجره و یک منو را نشان می دهد. به طور معمول، آنها با theme_color مانیفست شما طرح‌بندی می‌شوند.
  • از منوی متنی، می توانید آن URL را در مرورگر باز کنید.
  • کاربران می توانند مرورگر را ببندند یا به عقب برگردند.

در حالی که مرورگر درون‌برنامه روی صفحه است، PWA شما در پس‌زمینه منتظر است، گویی پنجره دیگری آن را پنهان می‌کند.

یک مرورگر درون برنامه ای در iPhone هنگام مرور URL که خارج از محدوده در یک PWA مستقل است.
یک مرورگر درون برنامه‌ای در Android هنگام مرور یک URL که خارج از محدوده در یک PWA مستقل است.

مجوز جریان دارد

بسیاری از جریان‌های احراز هویت و مجوز وب نیاز به هدایت کاربر به یک نشانی اینترنتی متفاوت در مبدا متفاوت دارند تا رمزی را که به مبدأ PWA شما برمی‌گردد، مانند OAuth 2.0 به دست آورید.

در این موارد، مرورگر درون برنامه ای این فرآیند را دنبال می کند:

  1. کاربر PWA شما را باز می کند و روی ورود کلیک می کند.
  2. PWA شما کاربر را به یک URL که خارج از محدوده PWA است هدایت می کند تا موتور رندر یک مرورگر درون برنامه ای را در PWA شما باز کند.
  3. کاربر می تواند مرورگر درون برنامه ای را لغو کند و در هر زمان به PWA خود بازگردد.
  4. کاربر به مرورگر درون برنامه وارد می شود. سرور احراز هویت کاربر را به مبدأ PWA شما هدایت می کند و توکن را به عنوان آرگومان ارسال می کند.
  5. مرورگر درون برنامه زمانی که URL را که بخشی از محدوده PWA است شناسایی می کند، بسته می شود.
  6. موتور پیمایش پنجره اصلی PWA را به آدرس اینترنتی که سرور احراز هویت در مرورگر درون برنامه به آن رفته است هدایت می کند.
  7. PWA شما توکن را دریافت می کند، توکن را ذخیره می کند و PWA را رندر می کند.

ناوبری مرورگر را اجباری کنید

اگر می‌خواهید مرورگر را با URL و نه مرورگر درون برنامه‌ای باز کنید، می‌توانید از هدف _blank عناصر <a href> استفاده کنید. این فقط روی PWA های دسکتاپ کار می کند. در دستگاه های تلفن همراه، گزینه ای برای باز کردن مرورگر با URL وجود ندارد.

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

باز کردن پنجره های جدید

در دسکتاپ، کاربران می توانند بیش از یک پنجره از همان PWA را باز کنند. هر پنجره یک مسیریابی متفاوت برای همان start_url دارد، گویی که در حال باز کردن دو برگه مرورگر از یک URL هستید. از منوی موجود در PWA، کاربران می توانند File سپس New window را انتخاب کنند. از کد PWA خود، می توانید یک پنجره جدید با تابع open() باز کنید.

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

همان PWA نصب شده با چندین پنجره باز روی یک سیستم عامل دسکتاپ.

وقتی open() در یک پنجره PWA در iOS یا iPadOS فراخوانی می‌کنید، null برمی‌گرداند و پنجره‌ای را باز نمی‌کند. باز کردن پنجره‌های جدید در Android، یک مرورگر درون‌برنامه جدید برای URL ایجاد می‌کند، حتی اگر URL در محدوده PWA شما باشد، که معمولاً تجربه مرور خارجی را ایجاد نمی‌کند.

عنوان پنجره

عنصر <title> اساساً برای اهداف سئو استفاده می شد زیرا فضای درون برگه مرورگر محدود است. هنگامی که از مرورگر به پنجره خود در PWA حرکت می کنید، تمام فضای نوار عنوان در دسترس شما است.

می توانید محتویات نوار عنوان را تعریف کنید:

  • به صورت ایستا در عنصر <title> HTML شما.
  • تغییر پویا خاصیت رشته document.title در هر زمان.

در PWA های دسکتاپ، عنوان ضروری است و در نوار عنوان پنجره و گاهی اوقات در مدیر وظیفه یا انتخاب چند کار استفاده می شود. اگر یک برنامه تک صفحه ای دارید، ممکن است بخواهید عنوان خود را در هر مسیر به روز کنید.

حالت Tabbed

حالت Tabbed یک قابلیت آزمایشی است که به PWA شما اجازه می دهد طراحی مبتنی بر برگه، شبیه به یک مرورگر وب داشته باشد. در این حالت، کاربر می تواند چندین تب را در یک PWA باز کند، اما همه آنها در یک پنجره سیستم عامل به هم گره خورده اند.

می‌توانید در مورد این قابلیت آزمایشی در حالت برنامه Tabbed برای PWA بیشتر بخوانید.

پوشش کنترل های پنجره

اشاره کردیم که می‌توانید عنوان پنجره را با تعریف مقدار عنصر <title> یا ویژگی document.title تغییر دهید. اما همیشه یک مقدار رشته است. اگر بتوانیم نوار عنوان را با HTML، CSS و تصاویر طراحی کنیم، چه؟ Window Controls Overlay، یک قابلیت آزمایشی در Microsoft Edge و Google Chrome برای PWA های دسکتاپ، ممکن است کمک کند.

می‌توانید اطلاعات بیشتری در مورد این قابلیت در سفارشی‌سازی کنترل‌های پنجره روی نوار عنوان PWA خود بخوانید.

با پوشش کنترل‌های پنجره، می‌توانید محتوا را در نوار عنوان رندر کنید.

مدیریت پنجره

با استفاده از چندین صفحه نمایش، کاربران می خواهند از تمام فضای موجود در دسترس خود استفاده کنند. به عنوان مثال:

  • ویرایشگرهای گرافیکی چند پنجره ای، مانند Gimp، می توانند ابزارهای ویرایشی مختلف را در پنجره هایی با موقعیت دقیق قرار دهند.
  • میزهای معاملات مجازی می توانند روندهای بازار را در چندین پنجره نشان دهند که هر یک از آنها در حالت تمام صفحه قابل مشاهده است.
  • برنامه‌های نمایش اسلاید می‌توانند یادداشت‌های بلندگو را در صفحه اصلی داخلی و ارائه را در یک پروژکتور خارجی نشان دهند.

Window Management API به PWA ها این امکان را می دهد که این کار را انجام دهند و بیشتر.

دریافت جزئیات صفحه نمایش

Window Management API یک متد جدید به نام window.getScreenDetails() اضافه می کند که یک شی با صفحه نمایش را به صورت آرایه ای تغییرناپذیر از صفحه های پیوست شده برمی گرداند. همچنین یک شی زنده قابل دسترسی از ScreenDetails.currentScreen ، مطابق با window.screen فعلی وجود دارد.

هنگامی که آرایه screens تغییر می کند، شیء برگشتی نیز یک رویداد screenschange اجرا می کند. (وقتی ویژگی‌ها روی صفحه‌های جداگانه تغییر می‌کنند این اتفاق نمی‌افتد.) صفحه‌های منفرد، اعم از 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();

صفحه کلید مجازی

دستگاه‌های مبتنی بر لمسی، مانند تلفن‌ها و تبلت‌ها، یک صفحه‌کلید مجازی روی صفحه ارائه می‌دهند تا کاربر بتواند زمانی که عناصر فرم PWA شما در فوکوس هستند، تایپ کند.

با استفاده از VirtualKeyboard API ، PWA شما می‌تواند با استفاده از رابط navigator.virtualKeyboard کنترل بیشتری روی صفحه‌کلید در پلتفرم‌های سازگار داشته باشد.

  • نمایش و پنهان کردن صفحه کلید مجازی با navigator.virtualKeyboard.show() و navigator.virtualKeyboard.hide() .
  • با تنظیم navigator.virtualKeyboard.overlaysContent برابر true به مرورگر بگویید که خودتان صفحه کلید مجازی را می بندید.
  • بدانید چه زمانی صفحه کلید با رویداد geometrychange ظاهر می شود و ناپدید می شود.
  • خط مشی صفحه کلید مجازی را برای ویرایش عناصر میزبان با تنظیم contenteditable روی auto یا manual ، با ویژگی virtualkeyboardpolicy HTML تنظیم کنید. یک خط مشی به شما امکان می دهد تصمیم بگیرید که آیا می خواهید صفحه کلید مجازی به طور خودکار توسط مرورگر ( auto ) مدیریت شود یا توسط اسکریپت شما ( manual ).
  • از متغیرهای محیطی CSS برای دریافت اطلاعات در مورد ظاهر صفحه کلید مجازی، مانند keyboard-inset-height و keyboard-inset-top استفاده کنید.

اطلاعات بیشتری در مورد این API در کنترل کامل با VirtualKeyboard API بخوانید.