การจัดการหน้าต่าง

โดย PWA ที่อยู่นอกเบราว์เซอร์จะจัดการหน้าต่างของตนเอง ในบทนี้ คุณจะ เข้าใจ API และความสามารถในการจัดการหน้าต่างภายใน ระบบปฏิบัติการ

หน้าต่าง PWA

การเรียกใช้ในหน้าต่างของคุณเองที่จัดการโดย PWA จะมีข้อดีและความรับผิดชอบทั้งหมดของหน้าต่างในระบบปฏิบัติการนั้นๆ เช่น

  • ความสามารถในการปรับขนาดและย้ายหน้าต่างไปยังระบบปฏิบัติการหลายหน้าต่าง เช่น Windows หรือ ChromeOS
  • การแชร์หน้าจอกับหน้าต่างแอปอื่นๆ เช่น ในโหมดแยกหน้าจอของ iPadOS หรือโหมดแยกหน้าจอของ Android
  • ปรากฏในแท่นชาร์จ แถบงาน และในเมนูแท็บ Alt บนเดสก์ท็อป และรายการหน้าต่างมัลติทาสก์บนอุปกรณ์เคลื่อนที่
  • ความสามารถในการย่อ ย้ายหน้าต่างข้ามหน้าจอและเดสก์ท็อป และปิดหน้าต่างได้ทุกเมื่อ

การย้ายและปรับขนาดหน้าต่าง

หน้าต่าง PWA จะมีขนาดใดก็ได้และอยู่ในตำแหน่งใดก็ได้บนหน้าจอในระบบปฏิบัติการบนเดสก์ท็อป โดยค่าเริ่มต้น เมื่อผู้ใช้เปิด PWA เป็นครั้งแรกหลังการติดตั้ง PWA จะได้รับขนาดหน้าต่างเริ่มต้นเป็นเปอร์เซ็นต์ของหน้าจอปัจจุบัน โดยมีความละเอียดสูงสุด 1920x1080 จะอยู่ที่มุมซ้ายบนของหน้าจอ

ผู้ใช้สามารถย้ายและปรับขนาดหน้าต่าง และเบราว์เซอร์จะจดจำค่ากำหนดสุดท้ายไว้ ดังนั้นในครั้งต่อไปที่ผู้ใช้เปิดแอป หน้าต่างจะยังคงขนาดและตำแหน่งการใช้งานก่อนหน้านี้ไว้

ทั้งนี้ คุณไม่สามารถกำหนดขนาดและตำแหน่งที่ต้องการของ PWA ภายในไฟล์ Manifest คุณเปลี่ยนตำแหน่งและปรับขนาดหน้าต่างได้โดยใช้ JavaScript API เท่านั้น คุณจะย้ายและปรับขนาดหน้าต่าง 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 ที่อยู่นอกขอบเขตไฟล์ Manifest เครื่องมือเบราว์เซอร์ของ PWA จะแสดงผลเบราว์เซอร์ในแอปภายในบริบทของหน้าต่าง

ฟีเจอร์บางอย่างของเบราว์เซอร์ในแอปมีดังนี้

  • โดยจะปรากฏที่ด้านบนของเนื้อหา
  • ซึ่งมีแถบ URL แบบคงที่ซึ่งแสดงต้นทางปัจจุบัน ชื่อหน้าต่าง และเมนู โดยปกติแล้วไฟล์ Manifest จะมีธีมเป็น theme_color ของไฟล์ Manifest
  • คุณสามารถเปิด 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 หลักไปยัง URL ที่เซิร์ฟเวอร์การตรวจสอบสิทธิ์เข้าไปขณะอยู่ในเบราว์เซอร์ในแอป
  7. PWA ของคุณจะได้รับโทเค็น จัดเก็บโทเค็น และแสดงผล PWA

การบังคับการนำทางของเบราว์เซอร์

หากต้องการบังคับให้เปิดเบราว์เซอร์ด้วย URL และไม่ใช่เบราว์เซอร์ในแอป ให้ใช้เป้าหมาย _blank ขององค์ประกอบ <a href> วิธีนี้ใช้ได้เฉพาะกับ PWA บนเดสก์ท็อป ในอุปกรณ์เคลื่อนที่ จะไม่มีตัวเลือกให้เปิดเบราว์เซอร์ด้วย URL

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

กำลังเปิดหน้าต่างใหม่

ในเดสก์ท็อป ผู้ใช้จะเปิดได้มากกว่า 1 หน้าต่างของ PWA เดียวกัน แต่ละหน้าต่างจะมีการนำทางที่แตกต่างกันไปยัง start_url เดียวกัน เหมือนกับว่าคุณเปิดแท็บเบราว์เซอร์ 2 แท็บใน 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> ใช้เพื่อวัตถุประสงค์ด้าน SEO เป็นหลัก เนื่องจากพื้นที่ในแท็บเบราว์เซอร์มีจำกัด เมื่อย้ายจากเบราว์เซอร์ไปยังหน้าต่างใน PWA คุณจะสามารถเข้าถึงพื้นที่แถบชื่อทั้งหมดได้

คุณสามารถกำหนดเนื้อหาของแถบชื่อได้ดังนี้

  • แบบคงที่ในองค์ประกอบ HTML <title>
  • เปลี่ยนแปลงพร็อพเพอร์ตี้สตริง document.title แบบไดนามิกได้ทุกเมื่อ

ใน PWA บนเดสก์ท็อป ชื่อนั้นสำคัญอย่างยิ่งและจะใช้ในแถบชื่อของหน้าต่างและบางครั้งก็ใช้ในตัวจัดการงานหรือตัวเลือกมัลติทาสก์ หากคุณมีแอปพลิเคชันหน้าเว็บเดียว คุณอาจต้องอัปเดตชื่อของคุณในทุกเส้นทาง

โหมดแท็บ

ความสามารถในการทดลองที่เรียกว่าโหมดแท็บจะทำให้ PWA ของคุณมีการออกแบบตามแท็บคล้ายกับเว็บเบราว์เซอร์ ในกรณีนี้ ผู้ใช้จะเปิดได้หลายแท็บจาก PWA เดียวกัน แต่แท็บทั้งหมดจะเชื่อมโยงกันในหน้าต่างระบบปฏิบัติการเดียวกัน ตามที่คุณเห็นในวิดีโอต่อไปนี้

อ่านข้อมูลเพิ่มเติมเกี่ยวกับความสามารถในการทดลองนี้ได้ที่โหมดแอปพลิเคชันแบบ Tabbed สำหรับ PWA

การวางซ้อนการควบคุมหน้าต่าง

เราได้ระบุว่าคุณเปลี่ยนชื่อหน้าต่างได้โดยการกำหนดค่าขององค์ประกอบ <title> หรือพร็อพเพอร์ตี้ document.title แต่จะเป็นค่าสตริงเสมอ จะเป็นอย่างไรถ้าเราสามารถออกแบบแถบชื่อด้วย HTML, CSS และรูปภาพตามต้องการได้ ส่วน Window Controls Overlays ซึ่งเป็นความสามารถใหม่ในเวอร์ชันทดลองใน Microsoft Edge และ PWA ของ Google Chrome สำหรับเดสก์ท็อป

อ่านข้อมูลเพิ่มเติมเกี่ยวกับความสามารถนี้ได้ที่ปรับแต่งการวางซ้อนการควบคุมหน้าต่างของแถบชื่อของ 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 ก็จะเริ่มทำงานจากออบเจ็กต์รายละเอียดหน้าจอด้วย

Wake Lock หน้าจอ

ลองจินตนาการว่าคุณอยู่ในครัวและกำลังทำตามสูตรในแท็บเล็ต คุณเพิ่งเตรียมส่วนผสมเสร็จ เมื่อมือไม่เป็นระเบียบ คุณก็กลับไปที่อุปกรณ์เพื่ออ่านขั้นตอนถัดไป ยับเยินเลย หน้าจอเปลี่ยนเป็นสีดำแล้ว 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) ด้วยแอตทริบิวต์ HTML virtualkeyboardpolicy นโยบายช่วยให้คุณตัดสินใจได้ว่าต้องการให้เบราว์เซอร์จัดการแป้นพิมพ์เสมือนโดยอัตโนมัติโดยใช้ค่า auto หรือจัดการโดยสคริปต์โดยใช้ค่า manual
  • การใช้ตัวแปรสภาพแวดล้อม CSS เพื่อรับข้อมูลเกี่ยวกับรูปลักษณ์ของแป้นพิมพ์เสมือน เช่น keyboard-inset-height และ keyboard-inset-top

อ่านเพิ่มเติมเกี่ยวกับ API นี้ได้ในการควบคุมเต็มรูปแบบด้วย VirtualKeyboard API

แหล่งข้อมูล