PWA นอกเบราว์เซอร์จะจัดการหน้าต่างของตัวเอง ในบทนี้ คุณจะได้ทำความเข้าใจ API และความสามารถในการจัดการหน้าต่างภายในระบบปฏิบัติการ
หน้าต่าง PWA
การเรียกใช้ในหน้าต่างของคุณเองที่จัดการโดย 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
ไม่มีเหตุการณ์สำหรับการจับภาพการเลื่อนหน้าต่าง ดังนั้นตัวเลือกของคุณคือการค้นหาตำแหน่งบ่อยๆ
การท่องเว็บไซต์อื่นๆ
หากต้องการส่งผู้ใช้ไปยังเว็บไซต์ภายนอกที่อยู่นอกขอบเขตของ PWA คุณสามารถทำได้ด้วยองค์ประกอบ HTML มาตรฐาน <a href>
โดยใช้ location.href
หรือเปิดหน้าต่างใหม่ในแพลตฟอร์มที่เข้ากันได้
หากติดตั้ง PWA ไว้ในทุกเบราว์เซอร์ในขณะนี้ เมื่อคุณเรียกดู URL ที่ไม่ได้อยู่ในขอบเขตของไฟล์ Manifest เครื่องมือเบราว์เซอร์ของ PWA จะแสดงผลเบราว์เซอร์ในแอปภายในบริบทของหน้าต่าง
ฟีเจอร์บางอย่างของเบราว์เซอร์ในแอปมีดังนี้
- ซึ่งจะปรากฏที่ด้านบนของเนื้อหา
- โดยจะมีแถบ URL แบบคงที่ซึ่งแสดงต้นทางปัจจุบัน ชื่อหน้าต่าง และเมนู โดยปกติแล้ว ไฟล์จะอยู่ในรูปแบบ
theme_color
ของไฟล์ Manifest - จากเมนูตามบริบท คุณสามารถเปิด URL นั้นในเบราว์เซอร์ได้
- ผู้ใช้จะปิดเบราว์เซอร์หรือย้อนกลับก็ได้
ขั้นตอนการให้สิทธิ์
ขั้นตอนการตรวจสอบสิทธิ์เว็บและการให้สิทธิ์หลายแบบเกี่ยวข้องกับการเปลี่ยนเส้นทางผู้ใช้ไปยัง URL อื่นในต้นทางอื่นเพื่อรับโทเค็นที่จะกลับไปยังต้นทางของ PWA เช่น การใช้ OAuth 2.0
ในกรณีเหล่านี้ เบราว์เซอร์ในแอปจะทำตามขั้นตอนต่อไปนี้
- ผู้ใช้เปิด PWA แล้วคลิกเข้าสู่ระบบ
- PWA เปลี่ยนเส้นทางผู้ใช้ไปยัง URL ที่อยู่นอกขอบเขตของ PWA เพื่อให้เครื่องมือการแสดงผลเปิดเบราว์เซอร์ในแอปภายใน PWA
- ผู้ใช้สามารถยกเลิกเบราว์เซอร์ในแอปและกลับไปที่ PWA ได้ทุกเมื่อ
- ผู้ใช้เข้าสู่ระบบเบราว์เซอร์ในแอป เซิร์ฟเวอร์การตรวจสอบสิทธิ์จะเปลี่ยนเส้นทางผู้ใช้ไปยังต้นทาง PWA ซึ่งจะส่งโทเค็นเป็นอาร์กิวเมนต์
- เบราว์เซอร์ในแอปจะปิดตัวเองเมื่อตรวจพบ URL ที่เป็นส่วนหนึ่งของขอบเขตของ PWA
- เครื่องมือจะเปลี่ยนเส้นทางการไปยังส่วนต่างๆ ของหน้าต่าง PWA หลักไปยัง URL ที่เซิร์ฟเวอร์การตรวจสอบสิทธิ์ไปขณะอยู่ในเบราว์เซอร์ในแอป
- PWA จะได้รับโทเค็น จัดเก็บโทเค็น และแสดงผล PWA
การบังคับให้ไปยังส่วนต่างๆ ของเบราว์เซอร์
หากคุณต้องการบังคับให้เปิดเบราว์เซอร์ด้วย URL ไม่ใช่เบราว์เซอร์ในแอป ให้ใช้เป้าหมาย _blank
ขององค์ประกอบ <a href>
วิธีการนี้ใช้ได้เฉพาะกับ PWA บนเดสก์ท็อป โดยในอุปกรณ์เคลื่อนที่จะไม่มีตัวเลือกให้เปิดเบราว์เซอร์ด้วย URL
function openBrowser(url) {
window.open("url", "_blank", "");
}
การเปิดหน้าต่างใหม่
ในเดสก์ท็อป ผู้ใช้จะเปิดหน้าต่าง PWA เดียวกันได้มากกว่า 1 หน้าต่าง แต่ละหน้าต่างจะเป็นการนำทางที่แตกต่างกันไปยัง start_url
เดียวกัน ราวกับว่าคุณกำลังเปิดแท็บเบราว์เซอร์ 2 แท็บจาก URL เดียวกัน
จากเมนูใน PWA ผู้ใช้สามารถเลือก "ไฟล์" จากนั้นเลือก "หน้าต่างใหม่" และเปิดหน้าต่างใหม่ด้วยฟังก์ชัน open()
ได้จากโค้ด PWA โปรดดูรายละเอียดในเอกสารประกอบ
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
การเรียกใช้ 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 และ PWA ของ Google Chrome สำหรับเดสก์ท็อป
คุณอ่านข้อมูลเพิ่มเติมเกี่ยวกับความสามารถนี้ได้ที่ปรับแต่งการวางซ้อนการควบคุมหน้าต่างของแถบชื่อของ PWA
การจัดการหน้าต่าง
การมีหลายหน้าจอทำให้ผู้ใช้ต้องการใช้พื้นที่ทั้งหมดที่มี เช่น
- โปรแกรมตัดต่อกราฟิกแบบหลายหน้าต่าง à la Gimp สามารถวางเครื่องมือแก้ไขต่างๆ ในหน้าต่างที่จัดวางตำแหน่งได้อย่างถูกต้อง
- โต๊ะซื้อขายเสมือนจริงสามารถแสดงแนวโน้มตลาดในหลายหน้าต่าง ซึ่งสามารถดูในโหมดเต็มหน้าจอได้
- แอปภาพสไลด์จะแสดงบันทึกของผู้บรรยายในหน้าจอหลักภายในและงานนำเสนอในโปรเจ็กเตอร์ภายนอกได้
และ Window Management API จะช่วยให้ PWA ดำเนินการดังกล่าว และอีกมากมายได้
กำลังดูรายละเอียดหน้าจอ
Window Management API เพิ่ม Method ใหม่ 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
) ด้วยแอตทริบิวต์ HTMLvirtualkeyboardpolicy
นโยบายช่วยให้คุณตัดสินใจได้ว่าต้องการให้เบราว์เซอร์จัดการแป้นพิมพ์เสมือนโดยอัตโนมัติโดยใช้ค่าauto
หรือให้สคริปต์จัดการโดยใช้ค่าmanual
- ใช้ตัวแปรสภาพแวดล้อม CSS เพื่อรับข้อมูลเกี่ยวกับลักษณะที่ปรากฏของแป้นพิมพ์เสมือน เช่น
keyboard-inset-height
และkeyboard-inset-top
อ่านข้อมูลเพิ่มเติมเกี่ยวกับ API นี้ได้ในการควบคุมเต็มรูปแบบด้วย VirtualKeyboard API