Chrome Dev Summit จบไปเมื่อ 2-3 สัปดาห์ที่ผ่านมา และนี่คือรายงานชุดแรกจากกิจกรรมดังกล่าว โดยเน้นที่การพัฒนาบนอุปกรณ์เคลื่อนที่และข้ามอุปกรณ์ เราจึงขอเริ่มที่หัวข้อนี้
รูปแบบ UX ที่ดีที่สุดสําหรับเว็บแอปบนอุปกรณ์เคลื่อนที่โดย Paul Kinlan
หลังจากวิเคราะห์ความเหมาะกับอุปกรณ์เคลื่อนที่ของเว็บไซต์ 1, 000 อันดับแรก เราพบปัญหาบางประการ ได้แก่ เว็บไซต์53% ยังคงให้บริการเฉพาะในเดสก์ท็อปเท่านั้น เว็บไซต์82% มีปัญหาเกี่ยวกับการโต้ตอบในอุปกรณ์เคลื่อนที่ และเว็บไซต์64% มีข้อความที่ผู้ใช้จะอ่านได้ยาก
เคล็ดลับสั้นๆ ที่ช่วยปรับปรุงประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ได้อย่างมาก
- กําหนดวิวพอร์ตเสมอ
- ปรับขนาดเนื้อหาให้พอดีภายในวิวพอร์ต
- ปรับขนาดแบบอักษรให้อ่านได้ง่าย
- จำกัดการใช้แบบอักษรเว็บ
- ปรับขนาดและเว้นระยะเป้าหมายการแตะให้เหมาะสม
- ใช้ประเภทที่สื่อความหมายสำหรับองค์ประกอบอินพุต
PageSpeed Insights เพิ่งเปิดตัวการวิเคราะห์ UX เพื่อพิจารณาความเหมาะกับอุปกรณ์เคลื่อนที่ของเว็บไซต์ ซึ่งจะช่วยให้คุณพบปัญหาที่พบได้ทั่วไปเกี่ยวกับ UX บนอุปกรณ์เคลื่อนที่ของเว็บไซต์ ลองใช้เลย!
สไลด์: รูปแบบ UX ที่ดีที่สุดสำหรับเว็บแอปบนอุปกรณ์เคลื่อนที่
การช่วยเหลือพิเศษในอุปกรณ์หลายเครื่องโดย Alice Boxhall
ผู้ใช้จะเข้าถึงเว็บไซต์และบริการของคุณจากอุปกรณ์จํานวนมากที่มีข้อกําหนดด้านการช่วยเหลือพิเศษที่หลากหลาย การใช้องค์ประกอบเชิงความหมายและบทบาท ARIA ที่ถูกต้องจะช่วยให้เบราว์เซอร์และเทคโนโลยีความช่วยเหลือพิเศษเข้าใจหน้าเว็บของคุณได้ดีขึ้นมาก
สไลด์: การช่วยเหลือพิเศษในอุปกรณ์หลายเครื่อง
วิธีหลักในการทำความเข้าใจและแก้ไขปัญหาการช่วยเหลือพิเศษ
- ตรวจสอบว่าผู้ใช้ได้รับประสบการณ์การใช้งานด้วยแป้นพิมพ์เพียงอย่างเดียวที่ดี
- แสดงความหมายของอินเทอร์เฟซด้วยการเลือกองค์ประกอบและ ARIA ที่ถูกต้อง
- ใช้ ChromeVox ในเดสก์ท็อปและ TalkBack ใน Android เพื่อทดสอบ
- ลองใช้ส่วนขยาย Chrome ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์การช่วยเหลือพิเศษ
- ผู้คนจากหลากหลายกลุ่มกำลังทยอยเข้ามาใช้อินเทอร์เน็ตมากขึ้น ซึ่งยิ่งทำให้การทำให้เว็บไซต์ของคุณเข้าถึงได้ง่ายขึ้นมีความจําเป็นมากขึ้น
สร้างแอปบนอุปกรณ์เคลื่อนที่โดยใช้ Chrome WebView โดย Matt Guant
เราทุกคนทราบดีถึงปัญหาที่นักพัฒนาแอปเคยพบเมื่อสร้างแอปสำหรับ WebView เช่น ฟีเจอร์ HTML5 ที่จำกัด ไม่มีเครื่องมือแก้ไขข้อบกพร่อง ไม่มีเครื่องมือสร้าง การเปิดใช้ WebView ที่ทำงานด้วย Chromium ใน Android 4.4 (KitKat) ทำให้นักพัฒนาแอปมีเครื่องมือใหม่ๆ มากมายที่พร้อมใช้งานในการสร้างแอปเนทีฟที่ยอดเยี่ยมโดยใช้ WebView
WebView รองรับการแก้ไขข้อบกพร่องระยะไกลอย่างเต็มรูปแบบด้วยเครื่องมือเดียวกับที่คุณใช้สำหรับ Chrome นอกจากนี้ คุณยังใช้เวิร์กโฟลว์การพัฒนาเว็บที่เชื่อถือได้กับ Grunt และผสานรวมเข้ากับเครื่องมือสแต็กแบบเนทีฟผ่าน Gradle ได้ด้วย การผสานโลกทั้งสองเข้าด้วยกันอีกขั้นคือการใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome เพื่อทดสอบโค้ดเนทีฟจาก JavaScript
สไลด์: สร้างแอปบนอุปกรณ์เคลื่อนที่โดยใช้ WebView ของ Chrome
สรุปสำหรับการพัฒนา WebView ที่มีประสิทธิภาพ
- สิ่งสำคัญไม่ใช่ฟีเจอร์ใหม่ แต่เป็นเครื่องมือที่คุณสามารถใช้เพื่อเร่งเวิร์กโฟลว์
- อย่าพยายามจําลอง UI ของอุปกรณ์ แต่อย่าลืมนำองค์ประกอบที่บ่งบอกว่าเป็นเนื้อหาบนเว็บออก
- ใช้การติดตั้งใช้งานฟีเจอร์แบบเนทีฟตามความเหมาะสม เช่น ใช้ DownloadManager แทน XHR สำหรับไฟล์ขนาดใหญ่
การเพิ่มประสิทธิภาพเวิร์กโฟลว์สำหรับโลกแบบข้ามอุปกรณ์โดย Matt Gaunt
หากเราต้องพัฒนาแอปสำหรับเดสก์ท็อป อุปกรณ์เคลื่อนที่ แท็บเล็ต อุปกรณ์ที่สวมใส่ได้ และรูปแบบอื่นๆ คุณจะช่วยเพิ่มประสิทธิภาพเวิร์กโฟลว์เพื่อลดความเครียดในชีวิตได้อย่างไร มีแนวทางที่มีประสิทธิภาพสำหรับอุปกรณ์หลายเครื่องสำหรับการทำซ้ำอย่างรวดเร็วด้วย LiveReload, Grunt, Yeoman และ Mini Mobile Device Lab ที่เพิ่งเปิดตัว สุดท้าย หากคุณไม่มีฮาร์ดแวร์จริงที่ต้องการทดสอบ ผู้ให้บริการบางรายก็ให้บริการผ่านระบบคลาวด์
สไลด์: การเพิ่มประสิทธิภาพเวิร์กโฟลว์สำหรับโลกแบบข้ามอุปกรณ์
ข้อมูลสำคัญ
- จำนวนอุปกรณ์ที่เราจะต้องรองรับจะเพิ่มขึ้นเรื่อยๆ
- ปรับเวิร์กโฟลว์ให้เหมาะกับ Grunt และ Yeoman
- ลดความซับซ้อนของการทดสอบข้ามเบราว์เซอร์และข้ามอุปกรณ์ด้วย Mini Mobile Device Lab
- เลือกการจําลองอย่างชาญฉลาดโดยใช้การจําลองของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome, โปรแกรมจําลองที่มาพร้อมเครื่อง, โปรแกรมจําลองระบบคลาวด์ เช่น Saucelabs, Browserstack และ appexperience รวมถึงโปรแกรมจําลองของบุคคลที่สามอย่าง Genymotion
- การทดสอบอุปกรณ์เคลื่อนที่ไม่ใช่แค่การทดสอบการเชื่อมต่อ Wi-Fi เท่านั้น แต่ยังใช้พร็อกซีเพื่อจำลองความเร็วเครือข่ายที่ช้าลงด้วย
การเชื่อมต่อเครือข่าย: ไม่บังคับ โดย Jake Archibald
เราเรียนรู้หลายสิ่งจากการพูดคุยครั้งนี้ เช่น Jake ไม่ใส่รองเท้าเวลานำเสนอ Business Kinlan กำลังจะออกหนังสือเล่มใหม่ในเร็วๆ นี้ ผู้ให้บริการเบราว์เซอร์ให้ความสำคัญกับโหมดออฟไลน์อย่างจริงจัง และอีกไม่นานคุณจะมีเครื่องมือที่จะช่วยสร้างประสบการณ์การใช้งานที่ยอดเยี่ยมเมื่อออฟไลน์
ServiceWorker จะช่วยให้เรามีความยืดหยุ่นในการสร้างประสบการณ์การใช้งานแบบออฟไลน์ที่ยอดเยี่ยมได้อย่างง่ายดายโดยไม่ต้องทนทุกข์กับปัญหาที่ AppCache ก่อขึ้น คุณยังทดสอบ API โดยใช้ Polyfill ได้ด้วย
สไลด์: การเชื่อมต่อเครือข่าย: ไม่บังคับ
ServiceWorker เข้ามาช่วย
- ในรุ่นถัดไปของการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอน เราจะถือว่าเครือข่ายเป็นการเพิ่มประสิทธิภาพที่เป็นไปได้
- ServiceWorker ช่วยให้คุณควบคุมคําขอเครือข่ายได้อย่างเต็มที่ เขียนสคริปต์ได้ และแก้ไขข้อบกพร่องได้
- หากมีเวอร์ชันออฟไลน์ อย่ารอให้เครือข่ายไม่ทำงานแล้วค่อยแสดงเวอร์ชันดังกล่าว เนื่องจากอาจใช้เวลานาน