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

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

หน้าต่าง

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

ไอคอน

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

ซึ่งได้แก่

  • หน้าจอหลัก (iOS, iPadOS, Android)
  • เครื่องเรียกใช้งานแอป (macOS, Android)
  • เมนูเริ่มต้นหรือเมนูแอป (Windows, ChromeOS, Linux)
  • แผง Dock, TaskBar หรือมัลติทาสก์ (ทุกระบบปฏิบัติการ)

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

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

การกำหนดธีมให้กับแอปของคุณ

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

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

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

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

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

การใช้งานแบบเต็มหน้าจอ

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

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

ให้ความสำคัญกับองค์ประกอบ <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

เครื่องคิดเลข 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-* เพื่อขยายเนื้อหาไปยังพื้นที่เหล่านั้นอย่างปลอดภัย

แหล่งข้อมูล