مدیریت پنجره

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

پنجره PWA

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

در حال مرور در سایت های دیگر

اگر می‌خواهید کاربر را به یک سایت خارجی بفرستید که خارج از محدوده PWA شما است، می‌توانید این کار را با یک عنصر <a href> HTML استاندارد، با استفاده از 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. موتور پیمایش پنجره اصلی 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

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

می توانید اطلاعات بیشتری در مورد این قابلیت آزمایشی در حالت برنامه کاربردی Tabbed برای 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 فعلی وجود دارد.

هنگامی که آرایه 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 رویداد navigator.virtualKeyboard .
  • تنظیم خط مشی صفحه کلید مجازی در ویرایش عناصر میزبان (با استفاده از contenteditable ) با ویژگی virtualkeyboardpolicy HTML. یک خط‌مشی به شما امکان می‌دهد تصمیم بگیرید که آیا می‌خواهید صفحه‌کلید مجازی به‌طور خودکار توسط مرورگر با استفاده از مقدار auto مدیریت شود یا توسط اسکریپت شما با استفاده از مقدار manual مدیریت شود.
  • استفاده از متغیرهای محیطی CSS برای دریافت اطلاعات در مورد ظاهر صفحه کلید مجازی، مانند keyboard-inset-height و keyboard-inset-top .

با استفاده از VirtualKeyboard API می‌توانید اطلاعات بیشتری درباره این API در کنترل کامل بخوانید.

منابع