Progressive Web App (PWA) บนเดสก์ท็อปเป็นวิธีที่ยอดเยี่ยมในการสร้างแอปแบบข้ามแพลตฟอร์มและข้ามเบราว์เซอร์ด้วยโมเดลการรักษาความปลอดภัยที่มุ่งเน้นความปลอดภัยและความเป็นส่วนตัวของผู้ใช้ รวมถึงการแชร์ในตัวด้วยความสามารถในการลิงก์โดยธรรมชาติของเว็บ สร้างเว็บแอปใหม่หรือปรับปรุงเว็บแอปที่มีอยู่ด้วย API สมัยใหม่เพื่อให้มีความสามารถ ความน่าเชื่อถือ และความสามารถในการติดตั้งเหมือนแอปบนเดสก์ท็อป PWA เป็นวิธีที่ดีที่สุดในการส่งเว็บแอปสำหรับ ChromeOS
ใน ChromeOS แพลตฟอร์มเว็บจะมีความสำคัญเป็นอันดับแรกและเป็นศูนย์กลาง โดยเว็บแอปเป็นฟีเจอร์หลักของแพลตฟอร์ม PWA ที่ติดตั้งจะปรากฏในตัวเรียกใช้ ChromeOS ปักหมุดไว้ที่ชั้นวางได้ และผสานรวมกับส่วนอื่นๆ ของระบบปฏิบัติการอย่างลึกซึ้ง
เริ่มต้นใช้งานโดยตรวจสอบรายการตรวจสอบ PWA และตรวจสอบว่าเว็บแอปผ่านรายการตรวจสอบ PWA หลัก คุณใช้ PWABuilder เพื่อช่วยในการระบุหน้าออฟไลน์ที่กำหนดเองและทำให้แอปติดตั้งได้ จากนั้นใช้คำแนะนำเหล่านี้เพื่อทำให้ PWA ของคุณโดดเด่นใน ChromeOS
ทำให้ติดตั้งได้
ข้อดีอย่างหนึ่งของ PWA ที่เหนือกว่าเว็บแอปทั่วไปคือความสามารถในการติดตั้งเหมือนกับแอปเดสก์ท็อปแบบเดิม เส้นทาง Progressive Web App ใน web.dev มีส่วนที่อธิบายการทำให้ PWA ติดตั้งได้โดยเฉพาะ ให้ใช้ส่วนนั้นเพื่อเริ่มต้นใช้งาน หากต้องการให้ระบบระบุ PWA ว่าติดตั้งได้ใน ChromeOS จะต้องเป็นไปตามเกณฑ์ต่อไปนี้ ซึ่งตรวจสอบได้โดยใช้การตรวจสอบความสามารถในการติดตั้งของ Lighthouse
- ต้องมีไฟล์ Manifest ของเว็บแอปที่ถูกต้อง
-
โดยต้องเป็นไปตามเกณฑ์การติดตั้งของ Chrome
- สำหรับ PWA ใน ChromeOS ข้อความแจ้งให้ติดตั้งจะแสดงในแถบออมนิบ็อกซ์โดยไม่ต้องมีเกณฑ์การคาดคะเนการมีส่วนร่วมของผู้ใช้
ไอคอนเป็นส่วนสำคัญของเอกลักษณ์ของ PWA ดังนั้นโปรดตรวจสอบว่าไอคอนน่าสนใจและไม่ซ้ำใคร โดยอาจมีพื้นหลังโปร่งใสด้วยก็ได้ เนื่องจาก PWA มีโค้ดเบสเดียวที่แชร์ในทุกแพลตฟอร์ม คุณจึงควรตรวจสอบว่ามีไอคอนที่ปรับได้พร้อมใช้งาน ตรวจสอบว่าคุณได้รวมไอคอนปกติไว้ด้วยสำหรับระบบปฏิบัติการที่ไม่รองรับไอคอนที่มาสก์ได้
เมื่อติดตั้ง PWA ได้แล้ว PWA จะปรากฏใน ChromeOS ตั้งแต่ตัวเรียกใช้งานไปจนถึงชั้นวาง การติดตั้ง PWA ยังช่วยให้คุณมีความสามารถเพิ่มเติมบางอย่างที่จะทำให้แอปของคุณโดดเด่นอย่างแท้จริง
หมายเหตุเกี่ยวกับการทำงานแบบออฟไลน์
การทำให้แอปติดตั้งได้มีข้อดีมากมายในด้านการค้นพบ ความสามารถในการใช้งาน และความสามารถ การทำให้ PWA ติดตั้งได้ไม่ได้หมายความว่าประสบการณ์การใช้งานทั้งหมดต้องทำงานแบบออฟไลน์ได้ อย่างไรก็ตาม เพื่อให้เว็บแอปที่ติดตั้งแล้วดูเหมือนแอปแบบเดิม เว็บแอปควรมีฟังก์ชันการทำงานแบบออฟไลน์ในรูปแบบใดรูปแบบหนึ่ง หน้าออฟไลน์ที่กำหนดเองขั้นพื้นฐานก็เพียงพอต่อการเริ่มต้นใช้งานแล้ว ผู้ใช้คาดหวังว่าแอปที่ติดตั้งจะไม่ขัดข้องเมื่อสถานะการเชื่อมต่อเปลี่ยนแปลง เช่นเดียวกับแอปแบบเดิมที่ไม่เคยแสดงหน้าว่างเมื่อออฟไลน์ PWA ก็ไม่ควรแสดงหน้าออฟไลน์เริ่มต้นของเบราว์เซอร์ หน้าออฟไลน์ที่กำหนดเองอาจเป็นข้อความที่แจ้งให้ผู้ใช้ทราบว่าต้องเชื่อมต่อกับเกมเพื่อฆ่าเวลาจนกว่าจะเชื่อมต่ออีกครั้ง การมอบประสบการณ์ออฟไลน์ที่กำหนดเองนี้สำหรับหน้าเว็บหรือฟีเจอร์ที่ไม่ได้แคชซึ่งต้องมีการเชื่อมต่อจะช่วยลดช่องว่างของประสบการณ์การใช้งานแอปของผู้ใช้
คุณสามารถสร้างหน้าออฟไลน์แบบง่ายๆ ในระหว่างinstallเหตุการณ์ของ Service Worker ได้โดยการแคชล่วงหน้าหน้าเว็บที่ต้องการเพื่อใช้ในภายหลัง และตอบกลับด้วยหน้าเว็บนั้นหากผู้ใช้ออฟไลน์ คุณสามารถดูตัวอย่างการทำงานของฟีเจอร์นี้และวิธีติดตั้งใช้งานด้วยตนเองได้ในตัวอย่างหน้าเว็บแบบออฟไลน์ที่กำหนดเอง
หากต้องการมอบประสบการณ์การใช้งานที่ดียิ่งขึ้น นอกเหนือจาก Cache Storage API แล้ว คุณยังใช้ฟีเจอร์ต่างๆ เช่น IndexedDB สำหรับพื้นที่เก็บข้อมูล NoSQL ในเบราว์เซอร์ และการซิงค์ข้อมูลในเบื้องหลังเพื่อให้ผู้ใช้ดำเนินการได้ในขณะที่ออฟไลน์และเลื่อนการสื่อสารกับเซิร์ฟเวอร์จนกว่าผู้ใช้จะมีการเชื่อมต่อที่เสถียรอีกครั้ง นอกจากนี้ คุณยังใช้รูปแบบต่างๆ เช่น เซสชันที่ปลอดภัยและมีอายุการใช้งานยาวนานเพื่อให้ผู้ใช้ได้รับการตรวจสอบสิทธิ์อยู่เสมอ และหน้าจอโครงร่างเพื่อให้ผู้ใช้ทราบอย่างรวดเร็วว่าคุณกำลังโหลดเนื้อหาที่สามารถเปลี่ยนไปใช้เนื้อหาที่แคชไว้หรือตัวบ่งชี้ออฟไลน์ได้หากจำเป็น
ทำให้แตะได้
อุปกรณ์ ChromeOS เกือบทั้งหมดรองรับการสัมผัส และหลายอุปกรณ์รองรับสไตลัสด้วย ดังนั้นคุณจึงต้องตรวจสอบว่าแอปทำงานร่วมกับการป้อนข้อมูลทั้ง 2 แบบได้อย่างราบรื่น นอกเหนือจากแป้นพิมพ์และเมาส์ปกติ Pointer Events API ออกแบบมาเพื่อจัดการกับปัญหานี้โดยเฉพาะ เหตุการณ์พื้นฐานบางอย่างที่เกี่ยวข้องกับเคอร์เซอร์ที่คุณอาจไม่ต้องเปลี่ยนแปลง เช่น เหตุการณ์ click ส่วนเหตุการณ์อื่นๆ เช่น mouseup หรือ touchstart ควรย้ายไปยังเหตุการณ์เคอร์เซอร์ที่เทียบเท่ากันเพื่อให้ทำงานได้อย่างราบรื่นในเคอร์เซอร์ทุกประเภท และยังจัดการอินพุตประเภทต่างๆ แยกกันได้ด้วยหากต้องการ สำหรับแอปและเกมที่ต้องพึ่งพาการป้อนข้อมูลของผู้ใช้ผ่านการสัมผัสเป็นอย่างมาก การเปลี่ยนไปใช้ Pointer Events API จะสร้างความแตกต่างอย่างมากในอุปกรณ์ ChromeOS
การวาดภาพอย่างราบรื่นบนเว็บ
หากคุณกำลังสร้างแอปที่ให้ผู้ใช้วาดด้วยนิ้วหรือสไตลัส การรักษาเวลาในการตอบสนองระหว่างอินพุตของผู้ใช้กับเอาต์พุตของคุณให้เร็วพอที่จะรู้สึกว่าลื่นไหลนั้นเป็นเรื่องยากมาโดยตลอด เมื่อสร้างแอปที่ขับเคลื่อนด้วย Canvas API ประเภทนี้สำหรับ ChromeOS เราขอแนะนำให้ใช้คำใบ้ desynchronized สำหรับ canvas.getContext() เพื่อให้การแสดงผลที่มีเวลาในการตอบสนองต่ำ หากต้องการใช้desynchronizedคำแนะนำสำหรับ Canvas ให้ทำดังนี้
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
ข้อควรพิจารณาในการออกแบบสำหรับการสัมผัส
คุณควรพิจารณาการรองรับการแตะและสไตลัสเมื่อออกแบบเว็บแอป การโต้ตอบที่คุณอาจมองข้ามไป เช่น การวางเมาส์เหนือองค์ประกอบ จะทำงานได้ไม่ดีนักหรืออาจไม่ทำงานเลยสำหรับวิธีการป้อนข้อมูลอื่นๆ ต่อไปนี้คือแนวทางปฏิบัติแนะนำบางประการที่คุณควรทราบเมื่อออกแบบอินเทอร์เฟซที่เหมาะกับการสัมผัสและสไตลัส
- อย่าคาดเดาอินพุตตามขนาดหน้าจอ แต่ให้ใช้การตรวจหาฟีเจอร์แทน โดยควรใช้ในเวลาที่ป้อนข้อมูลเพื่อพิจารณาวิธีการตอบสนอง โปรดทราบว่าใน ChromeOS ผู้ใช้สามารถสลับไปมาระหว่างเมาส์ การสัมผัส และสไตลัสได้อย่างราบรื่นภายในเซสชันเดียว
- ตรวจสอบว่าองค์ประกอบที่คุณคาดหวังให้ผู้ใช้แตะมีขนาดเป้าหมายขั้นต่ำที่ใหญ่พอ เพื่อไม่ให้ผู้ใช้แตะองค์ประกอบโดยรอบโดยไม่ตั้งใจ
- ถือว่าการวางเมาส์เหนือเป็นการเพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไป และตรวจสอบว่าการโต้ตอบสามารถทำได้ด้วยวิธีอื่นๆ สำหรับการแตะและสไตลัส (เช่น การกดค้างหรือการแตะ)
- ผู้ใช้ที่ใช้ระบบสัมผัสคาดหวังว่าจะโต้ตอบกับองค์ประกอบบนหน้าจอได้โดยตรง เช่น การบีบนิ้วเพื่อซูมในแผนที่แทนการใช้ปุ่มซูมเข้า/ออก การเพิ่มท่าทางสัมผัสทั่วไปในที่ที่เหมาะสมจะช่วยให้แอปของคุณดูเป็นธรรมชาติได้
ทำให้มีความสามารถ
แม้ว่าความสามารถบางอย่างของ PWA จะเป็นที่รู้จักกันโดยทั่วไป เช่น Notifications API ที่ช่วยให้เว็บแอปรับและเผยแพร่การแจ้งเตือนของแพลตฟอร์มได้ แต่ก็มีฟีเจอร์ใหม่ๆ ที่กำลังจะเปิดตัวบนเว็บเพื่อเพิ่มประสิทธิภาพแอปของคุณ โปรเจ็กต์ความสามารถของเว็บใน Chromium หรือที่รู้จักกันในชื่อโปรเจ็กต์ Fugu 🐡 เป็นความพยายามที่จะเปิดใช้มาตรฐานเว็บใหม่ๆ ที่มีประสิทธิภาพสูง โดยยังคงรักษาเอกลักษณ์ของเว็บไว้ นั่นคือความปลอดภัยที่เน้นผู้ใช้เป็นหลัก ความสะดวก และความเข้ากันได้ข้ามแพลตฟอร์ม
หมายเหตุ: ความสามารถเหล่านี้อยู่ในสถานะต่างๆ ตั้งแต่กำลังพิจารณาไปจนถึงพร้อมใช้งาน และอาจกำหนดเป้าหมายเฉพาะอุปกรณ์เดสก์ท็อปหรืออุปกรณ์เคลื่อนที่เท่านั้น ไม่ใช่ทั้ง 2 อย่าง แม้ว่าผู้ใช้ ChromeOS มีแนวโน้มที่จะได้รับฟีเจอร์ที่กำหนดเป้าหมายไปยังเดสก์ท็อปเมื่อพร้อมใช้งาน แต่การรองรับข้ามแพลตฟอร์ม แม้แต่การรองรับที่เสถียรใน ChromeOS ก็อาจต้องใช้เวลาหลายปี