บทนี้มุ่งเน้นแง่มุมที่สำคัญบางประการของการแสดงผลเนื้อหานอกแท็บเบราว์เซอร์
หน้าต่าง
ระบบปฏิบัติการแต่ละแบบมีแนวคิดที่แตกต่างกันเกี่ยวกับหน้าต่างแอปพลิเคชัน เช่น ใน iPhone แอปพลิเคชันจะกินพื้นที่ 100% ของหน้าจอเสมอ บน Android และ iPad นั้น แอปพลิเคชันต่างๆ มักจะทำงานแบบเต็มหน้าจอ แต่คุณสามารถแชร์หน้าจอระหว่าง 2 แอปได้ อย่างไรก็ตาม แอปจะเปิดได้ครั้งละ 1 อินสแตนซ์เท่านั้น แต่ในทางตรงกันข้าม แอปพลิเคชันจะเปิดได้มากกว่า 1 อินสแตนซ์พร้อมกันบนอุปกรณ์เดสก์ท็อป โดยจะแชร์พื้นที่หน้าจอที่มีอยู่กับแอปพลิเคชันอื่นๆ ทั้งหมดที่เปิดอยู่ คุณปรับขนาดและจัดตำแหน่งอินสแตนซ์ของแอปพลิเคชันแต่ละรายการที่ใดก็ได้บนหน้าจอ แม้กระทั่งซ้อนทับกับแอปพลิเคชันอื่นๆ ด้วย
ไอคอน
เราจะรู้จักแอปต่างๆ จากไอคอนของแอป โดยไอคอนดังกล่าวจะปรากฏขึ้นเมื่อคุณค้นหาแอป ในการตั้งค่า ไม่ว่าจะเปิดแอปใดก็ตาม และที่ที่คุณเห็นแอปที่กำลังทำงาน
ซึ่งได้แก่
- หน้าจอหลัก (iOS, iPadOS, Android)
- เครื่องเรียกใช้งานแอป (macOS, Android)
- เมนูเริ่มต้นหรือเมนูแอป (Windows, ChromeOS, Linux)
- แผง Dock, TaskBar หรือมัลติทาสก์ (ทุกระบบปฏิบัติการ)
เมื่อสร้างไอคอนสำหรับ Progressive Web App ไอคอนต้องปรับได้ตามต้องการ เนื่องจากระบบปฏิบัติการแต่ละระบบสามารถแสดงผลไอคอนและใช้มาสก์รูปร่างต่างๆ ได้ อย่างเช่นในรูปภาพด้านล่าง
การกำหนดธีมให้กับแอปของคุณ
คุณปรับแต่งการจัดรูปแบบแอปใน PWA ได้หลายวิธี ดังนี้
- สีของธีม: กำหนดสีของแถบชื่อของหน้าต่างบนเดสก์ท็อปและสีของแถบสถานะในอุปกรณ์เคลื่อนที่ การใช้เมตาแท็กช่วยให้คุณมีตัวเลือกสำหรับรูปแบบที่แตกต่างกัน เช่น โหมดมืดหรือโหมดสว่าง ซึ่งจะใช้ตามค่ากำหนดของผู้ใช้
- สีพื้นหลัง: กำหนดสีของหน้าต่างก่อนที่แอปและ CSS จะโหลด
- สีเฉพาะจุด: กำหนดสีขององค์ประกอบในตัวของเบราว์เซอร์ เช่น การควบคุมแบบฟอร์ม
โหมดการแสดงผล
คุณกำหนดได้ว่าต้องการเห็นหน้าต่างประเภทใดสำหรับ Progressive Web App โดยมี 3 ตัวเลือก ดังนี้
- เต็มหน้าจอ
- สแตนด์อโลน
- อินเทอร์เฟซผู้ใช้แบบเรียบง่าย
การใช้งานแบบเต็มหน้าจอ
ประสบการณ์การใช้งานแบบเต็มหน้าจอเหมาะสำหรับประสบการณ์ที่สมจริง เช่น การเล่นเกม, VR หรือ AR ปัจจุบันฟีเจอร์นี้ใช้ได้เฉพาะในอุปกรณ์ Android และจะซ่อนแถบสถานะและแถบนำทางไว้ ทำให้ PWA แสดงเนื้อหาแบบเต็มหน้าจอได้ 100%
ไม่รองรับ PWA แบบเต็มหน้าจอในเดสก์ท็อปและ iPadOS แต่คุณใช้ Fullscreen API จากภายใน PWA เพื่อแสดงแอปแบบเต็มหน้าจอตามคำขอของผู้ใช้ได้
การใช้งานแบบสแตนด์อโลน
โหมดสแตนด์อโลนเป็นตัวเลือกที่พบบ่อยที่สุดสำหรับ Progressive Web App โหมดสแตนด์อโลนจะแสดง PWA ในหน้าต่างมาตรฐานระบบปฏิบัติการโดยไม่ต้องมี UI การนำทางของเบราว์เซอร์ นอกจากนี้ หน้าต่างนี้ยังอาจรวมเมนูที่ควบคุมด้วยเบราว์เซอร์ ซึ่งผู้ใช้สามารถทำสิ่งต่อไปนี้
- คัดลอก URL ปัจจุบัน
- ดู ใช้ หรือปิดใช้ส่วนขยายของเบราว์เซอร์
- ดูและเปลี่ยนสิทธิ์
- ตรวจสอบต้นทางปัจจุบันและใบรับรอง SSL
แถบชื่ออาจแสดงสิทธิ์และการใช้งานฮาร์ดแวร์แทนแถบอเนกประสงค์หรือแถบ URL เมื่อ PWA แสดงผลในแท็บ
ในอุปกรณ์เคลื่อนที่ การใช้งาน PWA แบบสแตนด์อโลนจะสร้างหน้าจอมาตรฐานที่แสดงให้เห็นแถบสถานะเพื่อให้ผู้ใช้ยังคงเห็นการแจ้งเตือน เวลา และระดับแบตเตอรี่ และมักจะไม่มีเมนูที่ควบคุมโดยเบราว์เซอร์ เช่น ประสบการณ์การใช้งานแบบสแตนด์อโลนในเดสก์ท็อป
บางเบราว์เซอร์ใน Android จะสร้างการแจ้งเตือนแบบคงที่และไม่มีเสียงขณะที่ PWA ทำงานอยู่เบื้องหน้าเพื่อให้ผู้ใช้คัดลอก URL ปัจจุบันหรือตัวเลือกอื่นๆ ได้
อินเทอร์เฟซผู้ใช้แบบเรียบง่าย
โหมดนี้ใช้ได้กับ Progressive Web App ในระบบปฏิบัติการ Android และเดสก์ท็อป เมื่อคุณใช้งาน เบราว์เซอร์ที่แสดงผล PWA ของคุณจะแสดงอินเทอร์เฟซผู้ใช้แบบเรียบง่ายเพื่อช่วยนำทางผู้ใช้ไปยังส่วนต่างๆ ภายในแอปพลิเคชัน
ใน Android คุณจะเห็นแถบชื่อที่แสดงผลองค์ประกอบ <title> ปัจจุบันและต้นทางพร้อมเมนูแบบเลื่อนลงขนาดเล็ก บนเดสก์ท็อป คุณจะเห็นปุ่มชุดหนึ่งในแถบชื่อเพื่อช่วยในการไปยังส่วนต่างๆ รวมถึงปุ่มย้อนกลับและการควบคุมที่สลับระหว่างการหยุดและการดำเนินการโหลดซ้ำ โดยอิงตามสถานะการโหลดปัจจุบัน
การเพิ่มประสิทธิภาพการออกแบบสำหรับเดสก์ท็อป
เมื่อคุณออกแบบ Progressive Web App ให้ทำงานได้บนเดสก์ท็อป คุณต้องคิดถึงความเป็นไปได้ที่ไม่สิ้นสุดสำหรับขนาดหน้าต่างเมื่อเทียบกับการอยู่ในแท็บของเบราว์เซอร์ หรือเป็นแอปในระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่
ในบทที่ 3 เราได้พูดถึงโหมดมินิ: แอปบนเดสก์ท็อปอาจมีขนาดเล็กได้ถึง 200 x 100 พิกเซล หน้าต่างนี้จะใช้เนื้อหาขององค์ประกอบ <title> ใน HTML เป็นชื่อหน้าต่าง นอกจากนี้ เนื้อหาดังกล่าวจะแสดงเมื่อคุณสลับระหว่างแอปต่างๆ กับที่อื่นๆ ด้วย
ให้ความสำคัญกับองค์ประกอบ <title> ของ HTML และทบทวนวิธีการใช้องค์ประกอบดังกล่าว <title> ไม่ได้มีไว้สำหรับ SEO หรือเพื่อแสดงผลเฉพาะอักขระตัวแรกในแท็บของเบราว์เซอร์ มุมมองดังกล่าวจะเป็นส่วนหนึ่งของประสบการณ์ของผู้ใช้ ในหน้าต่างเดสก์ท็อปแบบสแตนด์อโลนของคุณ
แนวทางปฏิบัติแนะนำของ CSS
ประสบการณ์ทั้งหมดในการใช้งานเลย์เอาต์ การออกแบบ และภาพเคลื่อนไหวของ CSS จะใช้ได้เมื่อเนื้อหาแสดงผลในรูปแบบแบบสแตนด์อโลน อย่างไรก็ตาม มีกลเม็ดเคล็ดลับ 2 ข้อที่จะทำให้ประสบการณ์การใช้งานดียิ่งขึ้นสำหรับหน้าต่างแบบสแตนด์อโลน
Query สำหรับ Media
คำค้นหาสื่อแรกที่คุณใช้ได้ใน PWA คือพร็อพเพอร์ตี้ display-mode ที่ยอมรับค่า browser, standalone, minimal-ui หรือ fullscreen
คิวรี่สื่อนี้ใช้รูปแบบที่แตกต่างกันสำหรับแต่ละโหมด เช่น คุณแสดงผลคำเชิญให้ติดตั้งเฉพาะเมื่ออยู่ในโหมดเบราว์เซอร์ หรือแสดงผลข้อมูลใดข้อมูลหนึ่งเฉพาะเมื่อผู้ใช้ใช้แอปจากไอคอนระบบเท่านั้น ซึ่งอาจรวมถึงการเพิ่มปุ่มย้อนกลับเพื่อใช้เมื่อแอปเปิดใช้งานในโหมดสแตนด์อโลน
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
ประสบการณ์การใช้งานแอป
ผู้ใช้คาดหวังการทำงานของแอปเมื่อใช้ PWA ที่ติดตั้งไว้ แม้ว่าการระบุความหมายอาจไม่ใช่เรื่องง่าย แต่ลักษณะการทำงานเริ่มต้นบนเว็บไม่ได้ให้ประสบการณ์ที่ดีที่สุดในบางสถานการณ์
การเลือกของผู้ใช้
โดยทั่วไปสามารถเลือกเนื้อหาได้โดยใช้เมาส์หรือตัวชี้ หรือกดท่าทางแตะค้างไว้ แม้ว่าจะมีประโยชน์สำหรับเนื้อหา แต่ก็ไม่ได้มอบประสบการณ์ที่ดีที่สุดสำหรับรายการการนำทาง เมนู และปุ่มต่างๆ ภายใน PWA
ดังนั้น ขอแนะนำให้ปิดใช้การเลือกของผู้ใช้ในองค์ประกอบเหล่านี้โดยใช้ user-select: none และเป็นเวอร์ชัน -webkit- ที่มีคำนำหน้า ดังนี้
.unselectable {
user-select: none;
}
สีเฉพาะจุด
ใน PWA คุณสามารถกำหนดสีให้ตรงกับแบรนด์ภายในตัวควบคุมแบบฟอร์ม HTML โดยใช้พร็อพเพอร์ตี้ accent-color
แบบอักษรของระบบ
หากต้องการให้องค์ประกอบ เช่น กล่องโต้ตอบหรือข้อความ ตรงกับแบบอักษรแพลตฟอร์มเริ่มต้นของผู้ใช้ ให้ใช้ชุดแบบอักษรต่อไปนี้
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
ดึงเพื่อรีเฟรช
เบราว์เซอร์บนอุปกรณ์เคลื่อนที่ที่ทันสมัย เช่น Google Chrome และ Safari มีฟีเจอร์ที่รีเฟรชหน้าเมื่อถูกดึงลง ในบางเบราว์เซอร์ เช่น Chrome ใน Android ลักษณะการทำงานนี้จะเปิดใช้ใน PWA แบบสแตนด์อโลนด้วย
คุณอาจต้องปิดใช้การดำเนินการนี้ เช่น เมื่อมีการจัดการท่าทางสัมผัสของคุณเองหรือการดำเนินการรีเฟรช หรือมีความเป็นไปได้ว่าผู้ใช้ของคุณจะทริกเกอร์การดำเนินการโดยไม่ได้ตั้งใจ
คุณสามารถปิดลักษณะการทำงานนี้ได้โดยใช้ overscroll-behavior-y: contain:
body {
overscroll-behavior-y: contain;
}
พื้นที่ปลอดภัย
อุปกรณ์บางรุ่นไม่มีหน้าจอสี่เหลี่ยมผืนผ้าที่ไม่มีสิ่งกีดขวาง แต่หน้าจออาจมีรูปทรงอื่น เช่น เป็นวงกลม หรือมีบางส่วนของหน้าจอที่ใช้งานไม่ได้ เช่น รอยบากของ iPhone 13 ในกรณีเหล่านี้ เบราว์เซอร์บางประเภทจะแสดงตัวแปรสภาพแวดล้อมซึ่งมีพื้นที่ปลอดภัยที่แสดงเนื้อหาได้
หากต้องการเข้าถึงหน้าจออย่างเต็มรูปแบบ รวมถึงพื้นที่ที่มองไม่เห็นในการแสดงผลสีหรือรูปภาพ ให้ใส่ viewport-fit=cover ในเนื้อหาของแท็ก <meta name="viewport"> จากนั้นใช้ตัวแปรสภาพแวดล้อม safe-area-inset-* เพื่อขยายเนื้อหาไปยังพื้นที่เหล่านั้นอย่างปลอดภัย