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

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

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

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

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

หน้าต่าง 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 ไม่มีเหตุการณ์สําหรับจับภาพการย้ายหน้าต่าง คุณจึงต้องค้นหาตําแหน่งบ่อยๆ

คุณสามารถย้ายและปรับขนาดหน้าต่างแบบสัมพัทธ์ได้โดยใช้ moveBy() และ resizeBy() แทนการย้ายและปรับขนาดแบบสัมบูรณ์

เรียกดูเว็บไซต์อื่นๆ

หากต้องการส่งผู้ใช้ไปยังเว็บไซต์ภายนอกที่อยู่นอกขอบเขตของ PWA ให้ทำด้วยองค์ประกอบ <a href> HTML มาตรฐาน ใช้ location.href หรือเปิดหน้าต่างใหม่ในแพลตฟอร์มที่เข้ากันได้

เมื่อคุณเข้าชม URL ที่อยู่นอกขอบเขตของไฟล์ Manifest เครื่องมือเบราว์เซอร์ของ PWA จะแสดงผลเบราว์เซอร์ในแอปภายในบริบทของหน้าต่าง

เบราว์เซอร์ในแอปบน PWA บนเดสก์ท็อปเมื่อท่องเว็บ URL ที่ไม่อยู่ในขอบเขต

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

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

ขณะที่เบราว์เซอร์ในแอปแสดงอยู่บนหน้าจอ PWA จะรออยู่ในเบื้องหลัง ราวกับว่าหน้าต่างอื่นบดบังอยู่

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

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

เปิดหน้าต่างใหม่

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

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

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

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

โหมดแท็บ

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

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

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

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

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