การออกแบบแอป

บทนี้จะเน้นที่บางแง่มุมที่สําคัญของการแสดงผลเนื้อหานอกแท็บเบราว์เซอร์

ระบบปฏิบัติการต่างๆ มีแนวคิดที่แตกต่างกันเกี่ยวกับหน้าต่างแอปพลิเคชัน ตัวอย่างเช่น ใน iPhone แอปพลิเคชันจะใช้พื้นที่หน้าจอ 100% เสมอ บน Android และ iPad แอปพลิเคชันมักจะทำงานแบบเต็มหน้าจอ แต่คุณแชร์หน้าจอระหว่าง 2 แอปได้ อย่างไรก็ตาม คุณจะเปิดอินสแตนซ์แอปได้เพียงอินสแตนซ์เดียวในแต่ละครั้ง ในทางตรงกันข้าม อุปกรณ์เดสก์ท็อปสามารถเปิดอินสแตนซ์ของแอปพลิเคชันได้มากกว่า 1 อินสแตนซ์พร้อมกัน โดยแอปพลิเคชันดังกล่าวจะแชร์พื้นที่หน้าจอที่มีอยู่กับแอปพลิเคชันอื่นๆ ที่เปิดอยู่ทั้งหมด อินสแตนซ์แอปพลิเคชันแต่ละรายการสามารถปรับขนาดและวางตำแหน่งที่ใดก็ได้บนหน้าจอ แม้จะวางซ้อนกับแอปพลิเคชันอื่นๆ ก็ตาม

ไอคอน

เราจดจำแอปจากไอคอน ไอคอนดังกล่าวจะปรากฏขึ้นเมื่อคุณค้นหาแอป ในการตั้งค่า ในทุกที่ที่คุณเปิดแอป และทุกที่ที่คุณเห็นแอปที่ทำงานอยู่

ซึ่งได้แก่

  • หน้าจอหลัก (iOS, iPadOS, Android)
  • ตัวเปิดแอป (macOS, Android)
  • เมนูเริ่มหรือเมนูแอป (Windows, ChromeOS, Linux)
  • แถบ Dock, แถบงาน หรือแผงการทำงานหลายอย่างพร้อมกัน (ระบบปฏิบัติการทั้งหมด)

เมื่อสร้างไอคอนสำหรับ Progressive Web App ให้ตรวจสอบว่าไอคอนนั้นใช้ได้กับทุกแพลตฟอร์ม เนื่องจากระบบปฏิบัติการแต่ละระบบสามารถแสดงผลไอคอนและใช้มาสก์รูปร่างต่างๆ กับไอคอนได้ เช่น ไอคอนในรูปภาพด้านล่าง

ไอคอน PWA ในรูปแบบต่างๆ สำหรับแพลตฟอร์มต่างๆ

การใช้ธีมในแอป

คุณปรับแต่งสไตล์ของแอปใน PWA ได้หลายวิธี ดังนี้

  • สีธีม: กำหนดสีของแถบชื่อของหน้าต่างบนเดสก์ท็อปและสีของแถบสถานะในอุปกรณ์เคลื่อนที่ การใช้เมตาแท็กช่วยให้คุณมีตัวเลือกสำหรับรูปแบบต่างๆ เช่น โหมดมืดหรือโหมดสว่าง และระบบจะใช้รูปแบบตามความต้องการของผู้ใช้
  • สีพื้นหลัง: กําหนดสีของหน้าต่างก่อนที่จะโหลดแอปและ CSS ของแอป
  • สีไฮไลต์: กำหนดสีของคอมโพเนนต์เบราว์เซอร์ในตัว เช่น ตัวควบคุมแบบฟอร์ม
PWA บนเดสก์ท็อปที่แสดงธีมและสีไฮไลต์ รวมถึงหน้าจอแนะนำของ PWA บน Android ที่แสดงธีมและสีพื้นหลัง
PWA บนเดสก์ท็อปที่แสดงธีมและสีไฮไลต์ รวมถึงหน้าจอแนะนำของ PWA บน Android ที่แสดงธีมและสีพื้นหลัง

โหมดการแสดงผล

คุณกำหนดประสบการณ์การใช้งานหน้าต่างประเภทใดก็ได้สำหรับ Progressive Web App โดยมี 3 ตัวเลือกดังนี้

  • เต็มหน้าจอ
  • สแตนด์อโลน
  • อินเทอร์เฟซผู้ใช้แบบมินิมอล

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

ประสบการณ์การใช้งานแบบเต็มหน้าจอ

ประสบการณ์แบบเต็มหน้าจอเหมาะสำหรับประสบการณ์ที่สมจริง เช่น เกม ประสบการณ์ VR หรือ AR ปัจจุบันฟีเจอร์นี้ใช้ได้เฉพาะในอุปกรณ์ Android และจะซ่อนแถบสถานะและแถบนําทาง ซึ่งจะช่วยให้ PWA แสดงเนื้อหาได้เต็มหน้าจอ 100%

บนเดสก์ท็อปและ iPadOS ระบบไม่รองรับ PWA แบบเต็มหน้าจอ แต่คุณใช้ Fullscreen API จากภายใน PWA เพื่อแสดงแอปแบบเต็มหน้าจอตามคำขอของผู้ใช้ได้

ประสบการณ์การใช้งานแบบสแตนด์อโลน

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

  • คัดลอก URL ปัจจุบัน
  • ดู ใช้ หรือปิดใช้ส่วนขยายเบราว์เซอร์
  • ดูและเปลี่ยนสิทธิ์
  • ตรวจสอบต้นทางปัจจุบันและใบรับรอง SSL

แถบชื่อยังอาจแสดงสิทธิ์และการใช้ฮาร์ดแวร์แทนแถบอเนกประสงค์หรือแถบ URL เมื่อ PWA แสดงผลในแท็บ

PWA ที่ติดตั้งด้วย Microsoft Edge บนเดสก์ท็อปซึ่งแสดงเมนู PWA ที่ติดตั้งกับ Google Chrome บนเดสก์ท็อปซึ่งแสดงเมนูแบบเลื่อนลงและไอคอนปลั๊กอิน
รูปภาพด้านบนแสดงวิธีที่ PWA แสดงในโหมดสแตนด์อโลนในเดสก์ท็อปใน Microsoft Edge และ Chrome

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

อุปกรณ์ iOS ที่แสดงผลแอปแบบสแตนด์อโลน

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

การแจ้งเตือน Android ที่ Chrome แสดงผลซึ่งแสดงการดำเนินการบางอย่างใน PWA ที่ใช้งานอยู่ในปัจจุบัน

อินเทอร์เฟซผู้ใช้แบบมินิมอล

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

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

UI แบบมินิมอลบนเดสก์ท็อปใน Microsoft Edge ที่มีปุ่มย้อนกลับและโหลดซ้ำ
ใน Android เบราว์เซอร์จะใช้แถบนําทางธีมแบบอ่านอย่างเดียวสําหรับ UI แบบมินิมอล ซึ่งได้แก่ Firefox และ Chrome

การเพิ่มประสิทธิภาพการออกแบบสำหรับเดสก์ท็อป

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

ในบทที่ 3 เราได้พูดถึงโหมดมินิ ซึ่งแอปบนเดสก์ท็อปสามารถมีขนาดเพียง 200 x 100 พิกเซล หน้าต่างนี้จะใช้เนื้อหาขององค์ประกอบ <title> ใน HTML เป็นชื่อของหน้าต่าง เนื้อหาดังกล่าวจะแสดงผลเมื่อคุณกด Alt-Tab ระหว่างแอปและที่อื่นๆ ด้วย

ให้ความสำคัญกับองค์ประกอบ <title> ของ HTML และพิจารณาวิธีใช้ใหม่ <title> ไม่ได้มีไว้เพื่อ SEO หรือแสดงผลเฉพาะอักขระแรกในแท็บของเบราว์เซอร์เท่านั้น แต่ยังเป็นส่วนหนึ่งของประสบการณ์ของผู้ใช้สำหรับหน้าต่างเดสก์ท็อปแบบสแตนด์อโลนด้วย

แนวทางปฏิบัติแนะนำสำหรับ CSS

ประสบการณ์ทั้งหมดเกี่ยวกับเลย์เอาต์ การออกแบบ และภาพเคลื่อนไหว CSS จะใช้งานได้เมื่อเนื้อหาแสดงผลในประสบการณ์การใช้งานแบบสแตนด์อโลน อย่างไรก็ตาม เรามีเคล็ดลับเล็กๆ น้อยๆ ที่จะทำให้ประสบการณ์การใช้งานในหน้าต่างแบบสแตนด์อโลนดีขึ้น

การค้นหาสื่อ

คําค้นหาสื่อรายการแรกที่คุณใช้ประโยชน์ได้ใน 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

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

หากต้องการเข้าถึงหน้าจออย่างเต็มรูปแบบ รวมถึงพื้นที่ที่มองไม่เห็น เพื่อแสดงผลสีหรือรูปภาพ ให้ใส่ viewport-fit=cover ในเนื้อหาของแท็ก <meta name="viewport"> จากนั้นใช้ตัวแปรสภาพแวดล้อม safe-area-inset-* เพื่อขยายเนื้อหาไปยังพื้นที่เหล่านั้นอย่างปลอดภัย

แหล่งข้อมูล