- Progressive Web App (PWA) เป็นเครื่องมือทรงพลังที่ทำให้เว็บแอปพลิเคชันให้ความรู้สึก เหมือนแอปเนทีฟ และสามารถปรับประสบการณ์ผู้ใช้ให้เหมาะสมได้ผ่านโหมดการแสดงผลที่หลากหลาย
- โหมดการแสดงผล ที่กำหนดในไฟล์ manifest ของ PWA ใช้ปรับระดับการมองเห็นของ UI เบราว์เซอร์ และช่วยปรับส่วนติดต่อผู้ใช้ตามแต่ละโหมดเพื่อลดช่องว่างระหว่างประสบการณ์แบบเว็บกับแบบแอป
- ใช้ CSS media query และ JavaScript เพื่อปรับเนื้อหาและความสามารถตามแต่ละโหมดการแสดงผล มอบประสบการณ์ที่ปรับให้ตรงกับความต้องการของผู้ใช้
- ผู้ใช้ PWA และผู้เข้าชมเว็บไซต์ทั่วไปมี ความคาดหวังที่แตกต่างกัน ดังนั้นจึงควรปรับการนำทาง พรอมป์ต์การติดตั้ง และเนื้อหาให้เหมาะกับแต่ละโหมดการแสดงผล
- การเพิ่มประสิทธิภาพตามโหมดการแสดงผลทำให้ PWA ดูประณีตและเหมือนแอปมากขึ้น และเป็นเทคนิคสำคัญในการยกระดับประสบการณ์แบบแอปบนเว็บ
โหมดการแสดงผลของ PWA และเหตุผลที่ต้องเพิ่มประสิทธิภาพ
- PWA เป็นเทคโนโลยีที่ทำให้เว็บแอปพลิเคชันทำงาน เหมือนแอปเนทีฟ แต่เมื่อออกจากสภาพแวดล้อมของเบราว์เซอร์ก็อาจเกิด ปัญหาด้านการใช้งาน ได้
- อาจสูญเสียความสามารถอย่างการย้อนกลับ รีเฟรช หรือคัดลอก URL ที่ปกติเบราว์เซอร์มีให้
- องค์ประกอบที่เหมาะกับเว็บไซต์อาจดูไม่เป็นธรรมชาติในสภาพแวดล้อมแบบแอป
- โหมดการแสดงผล ที่ตั้งค่าได้ในไฟล์
manifest มีดังนี้
fullscreen: ซ่อน UI ของเบราว์เซอร์ทั้งหมดและใช้งานเต็มหน้าจอstandalone: ซ่อนคอนโทรลของเบราว์เซอร์และดูเหมือนแอปเนทีฟminimal-ui: แสดงองค์ประกอบ UI ของเบราว์เซอร์เพียงเล็กน้อยbrowser: ใช้อินเทอร์เฟซเบราว์เซอร์มาตรฐาน
- เมื่อ UI ของเบราว์เซอร์ถูกซ่อน อาจส่งผลต่อ ประสบการณ์ผู้ใช้ จึงจำเป็นต้องเพิ่มประสิทธิภาพให้เหมาะกับแต่ละโหมดการแสดงผล
การใช้ media query สำหรับโหมดการแสดงผล
- สามารถใช้ media query เพื่อปรับสไตล์และความสามารถตามโหมดการแสดงผลได้
- ตัวอย่าง:
@media (display-mode: standalone) จะมีผลเฉพาะในโหมด standalone
- รองรับ query สำหรับโหมด
fullscreen, minimal-ui และ browser ด้วย
- โหมดทดลองอย่าง
window-controls-overlay และ tabbed สามารถกำหนดลำดับแบบกำหนดเองได้ผ่าน display_override
window-controls-overlay: แสดงปุ่มควบคุมหน้าต่างแบบ overlay บนเดสก์ท็อปtabbed: รองรับหลายสภาพแวดล้อมของแอปพลิเคชันภายในหน้าต่างเดียว
- สามารถตรวจสอบโหมดการแสดงผลและปรับแบบไดนามิกด้วย JavaScript
- ตัวอย่าง: ตรวจสอบโหมดปัจจุบันด้วย
window.matchMedia("(display-mode: standalone)").matches
- เมื่อตรวจจับเหตุการณ์เปลี่ยนโหมด ก็สามารถปรับ UI แบบไดนามิกได้
ตัวอย่างการใช้งานจริง
- เนื้อหาที่ปรับให้เหมาะกับผู้ใช้ PWA: ผู้ที่ติดตั้ง PWA แล้วถือเป็นผู้ใช้ที่ตัดสินใจใช้งานแล้ว จึงควรลดเนื้อหาเชิงการตลาดและโฟกัสที่ ประสบการณ์ผู้ใช้
- ซ่อนองค์ประกอบที่ไม่จำเป็นอย่างพรอมป์ต์การติดตั้ง
- การมีตัวเลือกเพิ่มเติม: หากไม่มี UI ของเบราว์เซอร์ ก็ควรมี ทางเลือกภายในแอป เช่น ปรับขนาดฟอนต์ สลับโหมดสว่าง/มืด หรือฟังก์ชันแชร์
- ฟีเจอร์ที่เหมาะกับแพลตฟอร์ม: แถบนำทางด้านล่าง ที่พบได้บ่อยในแอปเนทีฟบนมือถือเหมาะกับ PWA แต่ดูไม่เป็นธรรมชาติบนเว็บไซต์
- ฟังก์ชันอย่างปุ่มพิมพ์เอกสารควรถูกซ่อนในโหมด PWA
- การจัดการพรอมป์ต์การติดตั้ง: ควรควบคุมไม่ให้แสดงพรอมป์ต์การติดตั้งใน PWA ที่ติดตั้งแล้วด้วย media query หรือ JavaScript
- ตัวอย่าง: ใช้ utility class
.hide-in-pwa เพื่อซ่อนองค์ประกอบในโหมด PWA
- กลยุทธ์ scope และ start_url: ใช้
scope และ start_url เพื่อแยกความแตกต่างของเนื้อหาระหว่างสภาพแวดล้อม PWA กับเว็บ
scope: กำหนดพาธระดับบนสุดของ PWA และหากออกนอกขอบเขตนี้ UI ของเบราว์เซอร์จะกลับมาแสดงstart_url: ระบุหน้าที่จะแสดงเมื่อเปิดแอป เช่น เข้าแดชบอร์ดโดยตรง
- เสริมการเปลี่ยนมุมมอง: ใช้เอฟเฟ็กต์ view transition ที่พบได้บ่อยในแอปเนทีฟกับ PWA โดยเฉพาะ
- ตัวอย่าง: ตั้งค่า CSS สำหรับ view transition ภายใน
@media (display-mode: standalone)
การรองรับของเบราว์เซอร์และการทดสอบ
- media query สำหรับโหมดการแสดงผลได้รับ การรองรับอย่างกว้างขวาง ในเบราว์เซอร์ส่วนใหญ่
- Firefox ไม่รองรับ PWA และ Firefox บน Android จะแสดงได้เฉพาะโหมด
browser
- ใช้ progressive enhancement เพื่อให้เบราว์เซอร์ที่ไม่รองรับยังคงลดระดับการทำงานอย่างเป็นธรรมชาติ
- การทดสอบควรทำใน สภาพแวดล้อมที่หลากหลาย เพราะพฤติกรรมอาจต่างกันไปตามอุปกรณ์และเบราว์เซอร์
- เบราว์เซอร์ไม่ได้มีระบบจำลองโหมดการแสดงผล จึงต้องทดสอบบนอุปกรณ์จริงร่วมกับระบบปฏิบัติการจริง
สรุปและข้อสังเกต
- ใช้ media query
display-mode เพื่อให้ PWA มอบ ประสบการณ์แบบปรับตามบริบท ตามการติดตั้งและบริบทการแสดงผล
- สามารถซ่อนพรอมป์ต์การติดตั้ง รองรับการนำทาง ปรับเนื้อหา เสริมความรู้สึกแบบเนทีฟ และพัฒนาแบบค่อยเป็นค่อยไปได้
- ผู้ใช้ PWA มี ความต้องการและความคาดหวัง ต่างจากผู้เข้าชมเว็บทั่วไป จึงต้องมีการปรับแต่งอย่างละเอียดตามโหมดการแสดงผล
- ยิ่ง PWA มีความสมบูรณ์มากขึ้น การลงรายละเอียดในการพัฒนา และการเพิ่มประสิทธิภาพยิ่งเป็นหัวใจสำคัญของการสร้างประสบการณ์แบบแอปที่น่าสนใจ
- สำหรับข้อมูลเพิ่มเติม แนะนำให้อ่าน “Extensive Guide To Progressive Web Applications” ของ Smashing Magazine
2 ความคิดเห็น
Firefox ก็เริ่มกลับมารองรับ PWA อีกครั้งในเวอร์ชัน nightly แล้ว เร็ว ๆ นี้ก็น่าจะถูกเพิ่มเข้ามาใน stable ด้วย
เพราะต้องใช้งานผ่านช่องทางที่เรียกว่าเบราว์เซอร์ด้วยล่ะมั้ง.. เลยยังชอบแบบเนทีฟอยู่เสมอ แต่พอเห็นเรื่อง PWA ทีไรก็น่าสนใจตลอด
ต่างก็ไล่ตามการทำให้เหมาะสมที่สุดเหมือนกัน แต่ทิศทางต่างกัน…