บทนี้จะเน้นไปที่แง่มุมที่สำคัญบางประการของการแสดงเนื้อหานอกแท็บเบราว์เซอร์
หน้าต่าง
ระบบปฏิบัติการต่างๆ มีแนวคิดที่แตกต่างกันเกี่ยวกับหน้าต่างแอปพลิเคชัน ตัวอย่างเช่น บน iPhone แอปพลิเคชันจะกินพื้นที่ 100% ของหน้าจอเสมอ แอปพลิเคชัน Android และ iPad มักจะแสดงแบบเต็มหน้าจอ แต่คุณสามารถแชร์หน้าจอระหว่าง 2 แอปได้ อย่างไรก็ตาม จะมีการเปิดอินสแตนซ์ของแอปเพียงครั้งละ 1 แอปเท่านั้น ในทางตรงกันข้าม บนอุปกรณ์เดสก์ท็อป แอปพลิเคชันจะเปิดได้มากกว่าหนึ่งอินสแตนซ์พร้อมกัน โดยจะแชร์พื้นที่หน้าจอที่มีอยู่กับแอปพลิเคชันอื่นๆ ที่เปิดอยู่ทั้งหมด อินสแตนซ์ของแอปพลิเคชันแต่ละรายการสามารถปรับขนาดและจัดตำแหน่งไว้ที่ใดก็ได้บนหน้าจอ แม้จะทับซ้อนกับแอปพลิเคชันอื่นๆ ก็ตาม
ไอคอน
เราจดจำแอปได้จากไอคอนของแอป ไอคอนดังกล่าวจะปรากฏเมื่อคุณค้นหาแอป ในการตั้งค่า ที่ใดก็ตามที่คุณเปิดแอป และที่ที่คุณเห็นแอปทำงานอยู่
ซึ่งรวมถึงการใช้งานดังต่อไปนี้
- หน้าจอหลัก (iOS, iPadOS, Android)
- ตัวเปิดแอป (macOS, Android)
- เมนูเริ่มต้นหรือเมนูแอป (Windows, ChromeOS, Linux)
- แผงแท่นชาร์จ แถบงาน หรือแผงแบบมัลติทาสก์ (ระบบปฏิบัติการทั้งหมด)
เมื่อสร้างไอคอนสำหรับ Progressive Web App ให้ตรวจดูว่าไอคอนทำงานได้โดยไม่จำเป็นต้องคำนึงถึงแพลตฟอร์ม เนื่องจากระบบปฏิบัติการแต่ละระบบสามารถแสดงผลไอคอนและใช้มาสก์รูปร่างต่างๆ เหมือนกับในภาพด้านล่าง
การกำหนดธีมของแอป
คุณปรับแต่งสไตล์แอปใน PWA ได้หลายวิธี ดังนี้
- สีของธีม: กำหนดสีของแถบชื่อของหน้าต่างบนเดสก์ท็อป และสีของแถบสถานะบนอุปกรณ์เคลื่อนที่ การใช้เมตาแท็กช่วยให้คุณมีตัวเลือกสำหรับรูปแบบต่างๆ เช่น โหมดมืดหรือโหมดสว่าง และระบบจะใช้ตัวเลือกดังกล่าวโดยอิงตามความต้องการของผู้ใช้
- สีพื้นหลัง: กำหนดสีของหน้าต่างก่อนที่แอปและ CSS จะโหลด
- สีเฉพาะจุด: กำหนดสีขององค์ประกอบของเบราว์เซอร์ที่มีในตัว เช่น ส่วนควบคุมแบบฟอร์ม
โหมดการแสดงผล
คุณกําหนดประเภทของประสบการณ์การใช้งานหน้าต่างที่ต้องการสําหรับ Progressive Web App ได้ โดยมี 3 ตัวเลือกให้เลือกดังนี้
- เต็มหน้าจอ
- สแตนด์อโลน
- อินเทอร์เฟซผู้ใช้แบบเรียบง่าย
ประสบการณ์การใช้งานแบบเต็มหน้าจอ
ประสบการณ์การใช้งานแบบเต็มหน้าจอเหมาะสำหรับประสบการณ์ที่สมจริง เช่น การเล่นเกม, VR หรือ AR ปัจจุบันฟีเจอร์นี้ใช้ได้เฉพาะในอุปกรณ์ Android และจะซ่อนแถบสถานะและแถบนำทางไว้ ซึ่งทำให้ PWA 100% ของหน้าจอสำหรับเนื้อหา
เดสก์ท็อปและ iPadOS จะไม่รองรับ PWA แบบเต็มหน้าจอ แต่คุณใช้ 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-3 ข้อที่จะช่วยให้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้นสำหรับกรอบเวลาแบบสแตนด์อโลน
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-* เพื่อขยายเนื้อหาในพื้นที่เหล่านั้นอย่างปลอดภัย