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
สไลด์: สร้างแอปบนอุปกรณ์เคลื่อนที่โดยใช้ Chrome WebView
สรุปประเด็นสำคัญเกี่ยวกับการพัฒนา WebView ที่มีประสิทธิภาพ
- สิ่งที่สำคัญไม่ใช่ฟีเจอร์ใหม่ แต่เป็นเครื่องมือที่คุณสามารถใช้เพื่อเพิ่มความเร็วให้กับเวิร์กโฟลว์ได้แล้ว
- อย่าพยายามจำลอง UI เนทีฟ แต่อย่าลืมลบสิ่งที่บอกว่าเป็นเนื้อหาเว็บ
- ใช้ฟีเจอร์เนทีฟในกรณีที่เหมาะสม เช่น ใช้ DownloadManager แทนที่จะเป็น XHR สำหรับไฟล์ขนาดใหญ่
การเพิ่มประสิทธิภาพเวิร์กโฟลว์สำหรับโลกแบบหลายอุปกรณ์ โดย Matt Gaunt
หากเราต้องพัฒนาเดสก์ท็อป อุปกรณ์เคลื่อนที่ แท็บเล็ต อุปกรณ์ที่สวมใส่ได้ และรูปแบบของอุปกรณ์อื่นๆ คุณจะเพิ่มประสิทธิภาพเวิร์กโฟลว์เพื่อลดความเครียดในชีวิตได้อย่างไร มีแนวทางที่มีประสิทธิภาพดีสำหรับหลายๆ อุปกรณ์เพื่อการปรับปรุงอย่างรวดเร็วด้วย LiveReload, Grunt, Yeoman และ Mini Mobile Device Lab ที่เปิดตัวใหม่ สุดท้าย หากคุณไม่มีฮาร์ดแวร์ที่ต้องการทดสอบ ผู้ให้บริการบางรายจะให้บริการผ่านระบบคลาวด์
สไลด์: การเพิ่มประสิทธิภาพเวิร์กโฟลว์สำหรับโลกแห่งอุปกรณ์ที่หลากหลาย
ข้อมูลสำคัญ
- จำนวนอุปกรณ์ที่เราต้องรองรับมีแต่จะเพิ่มขึ้น
- สร้างเวิร์กโฟลว์ที่เหมาะสมด้วย Grunt และ Yeoman
- ลดความซับซ้อนของการทดสอบข้ามเบราว์เซอร์และข้ามอุปกรณ์ด้วย Mini Mobile Device Lab
- คุณสามารถใช้ตัวเลือกการจำลองได้อย่างชาญฉลาดโดยใช้โปรแกรมจำลอง Chrome DevTools, โปรแกรมจำลองหุ้น, โปรแกรมจำลองในระบบคลาวด์ เช่น Saucelabs, Browserstack และ appexperiences รวมถึงโปรแกรมจำลองของบุคคลที่สาม Genymotion
- การทดสอบบนอุปกรณ์เคลื่อนที่ไม่ใช่แค่การทดสอบการเชื่อมต่อ Wi-Fi ลองใช้พร็อกซีเพื่อจำลองความเร็วของเครือข่าย
การเชื่อมต่อเครือข่าย: ไม่บังคับโดย Jake Archibald
เราได้เรียนรู้สิ่งต่างๆ มากมายจากการพูดคุยครั้งนี้ Jake ไม่สวมรองเท้าขณะนำเสนอ ส่วน Business Kinlan มีหนังสือเล่มใหม่เร็วๆ นี้ ส่วนผู้ให้บริการเบราว์เซอร์จะให้ความสำคัญกับการใช้งานออฟไลน์เป็นอย่างมาก และอีกไม่นานคุณก็จะมีเครื่องมือที่จะช่วยสร้างประสบการณ์ที่ยอดเยี่ยมในการใช้งานเมื่อออฟไลน์
ServiceWorker จะช่วยให้เรามีความยืดหยุ่นในการสร้างประสบการณ์การใช้งานออฟไลน์ที่น่าสนใจได้อย่างง่ายดายและไม่ทุกข์ทรมานจากปัญหาที่เกิดจาก AppCache นอกจากนี้ คุณยังทดสอบ API โดยใช้ Polyfill ได้ด้วย
สไลด์: การเชื่อมต่อเครือข่าย: ไม่บังคับ
ServiceWorker ช่วยเหลือคุณ
- ในการเพิ่มประสิทธิภาพแบบก้าวหน้ารุ่นถัดไป เราถือว่าเครือข่ายนั้นเป็นการเพิ่มประสิทธิภาพที่เป็นไปได้
- ServiceWorker ให้การควบคุมคำขอเครือข่ายอย่างเต็มรูปแบบ เขียนสคริปต์ได้ และแก้ไขข้อบกพร่องได้
- หากคุณมีประสบการณ์แบบออฟไลน์ อย่ารอให้เครือข่ายล้มเหลวก่อนที่จะแสดง เนื่องจากอาจใช้เวลานาน