สรุป Feature ใหม่ บน Chrome จากงาน Google Chrome Dev summit 2016

พอดีว่าผมได้มีโอกาสไปงาน Google Chrome Dev Summit 2016 ที่ San fransico มาซึ่ง หลายๆ Session ก็เป็นการลงลึก Feature ต่างๆของ Chrome ไป แต่ Session ที่เด็ดที่สุดคือ Session สุดท้ายที่ Paul Kinlan Chrome Developer Advocate มาสรุป Feature ใหม่ทั้งหมดทั้งที่ Statble แล้ว และยังไม่ Stable ซึ่งเหมือนเป็นการบอกเลยว่า จะมีอะไรออกใหม่บ้าง เนื่องจากมันเยอะมาก เพราะฉะนั้น ผมจะอธิบายน้อยมากๆนะครับ ………เริ่มเลย

1. Camera, Microphone ที่เรียกผ่าน Tag input ปรับให้ใช้ได้แค่ HTTPS แล้ว เพื่อความปลอดภัย และต้องขอ Permission user ก่อน
2. Geo location Feature ดึง location จาก GPS ไม่ HTTPS ใช้ไม่ได้แล้ว
3. Battery Status API มาแล้ว สามารถเรียก % ของ Battery ปัจจุบันได้ Paul บอกว่า ถ้าลองเอาไปปรับ UI ให้ animation ลดลง เวลาแบตใกล้หมด ก็คงน่าสนใจดีนะ
4. Network information API เราสามารถ เช็คได้แล้วว่ามือถือต่อ Network อะไรอยู่ ไอเดียคือ ลอง ปรับ content ให้โหลดตาม network ที่ใช้ได้ เหมือน Battery ก็น่าสนใจดี
5. Credential management API ตัวจัดการ login ที่ให้ User Login แบบ ข้ามเครื่องได้ หรือทำ auto login ได้ มาแล้ว (จริงๆมันคือ Auto Fill Password เวอร์ชั่นเทพ) คือ เราไม่ต้อง display form เลย ถ้า browser จับได้ว่า user เคย login แล้ว มันจะยิง action ใส่ ajax ให้เองเลย
6. Payment Request API ผมเคยเขียนเรื่องนี้ไปแล้วว่าเป็น feature ที่ช่วยให้ user ไม่ต้องมากรอก form เวลาซื้อของให้วุ่นวายไม่ว่าจะเป็น ที่อยู่หรือบัตร เครดิตเพราะ Google Chrome จะส่งลงไปที่เว็บไซต์ให้เลย
7. Push notification API จริงๆมาซักพักแล้ว และอยู่ในกลุ่ม PWA แต่ก็เป็นของใหม่เหมือนกัน แต่ที่เพิ่มมาคือ ใน Version ใหม่ๆ Notification จะทำได้มากกว่าเดิมไม่ว่าจะเป็นใส่รูปใหญ่ขึ้น ทำปุ่มเพิ่มได้ หรือแม้แต่กระทั่งทำ reply ได้
8. Offline Support เหมือนกันครับมาซักพักแล้ว อยู่ในกลุ่ม PWA เหมือนกัน
9. Install ก็ คือ Feature “Add to Home screen” ที่จะกลายเป็น PWA บนมือถือเรา แต่ด้วยการเทสมาซักพัก คำว่า “Add to Home screen” มันไม่ Work ซึ่งต่อไปจะเปลี่ยนเป็น “Install” นอกจาก เปลี่ยนคำตอน Add ยังจะเอา icon app ของเราไปโชว์ใน App drawer ด้วย เมื่อก่อน จะโชว์แค่ใน Home screen ทั้งหมดนี้ต้องไปเปิดใน chrome://flags “Improved add to Home Screen” ก่อนครับยังไม่มีในตัวจริง
10. CSS position: sticky มันคือ position:fixed vesion ที่เก่งขึ้น เพราะโดยปกติแล้ว fixed จะค้างอยู่ข้างบนตลอดไม่ว่าเราเลื่อนไปไหน แต่ถ้า sticky มันจะค้างข้างบนก็ต่อเมื่อ element นั้น ชนขอบบนเท่านั้น แต่ก่อนเราทำได้เหมือนกันแต่ต้องใช้ javascript จัดการเอาเอง (ถ้างงไปดูในวิดีโอข้างล่างนาทีที่ 19 ครับ)
11. Intersection Observer ต่อไปเราสามารถรู้ได้แล้วว่า Element ไหนโชว์บน viewport กี่ % สำหรับ feature นี้น่าจะช่วยให้เราจัดการ Element ที่ไม่โชว์ใน Viewport ได้ง่ายขึ้นไม่ว่าจะ clear มัน หรือ hide มัน โดยไม่ต้อง เช็คจาก position ของหน้า
12. Web component already “NATIVE” หลังจาก Polymer ต้องใช้ Polyfill มานานตอนนี้ไม่ต้องแล้วเพราะ Web component กลายเป็น native เต็มตัวแล้ว และ ถ้าจำไม่ผิด iOS ก็ ship feature นี้แล้ว
13. PointerEvent เป็น Feature ที่เอาไว้ check จุดที่นิ้ว touch บนหน้าจอ Support Multi Touch ด้วย ซึ่งตอนแรก Chrome บอกว่าจะไม่ support มันไปแล้วเมื่อหลายปีก่อน แต่สุดท้ายก็ตัดใจเอากลับมา ต่อไปเราคงทำ พวก Gesture จาก Multi Touch ได้ง่ายขึ้นครับ
14. Manifest Update มีการอัพเดทความสามารถบางส่วนของ manifest.json หลักๆเลยก็คือ ถ้าเราอัพเดท ไฟล์ manifest.json Application ในเครื่องที่ install ไปแล้วจะ update ไปด้วย ต่อมาคือ เราสามารถกำหนด scope ใน Application ได้ว่า ถ้าเรียก URL ไหนให้เรียก progressive web app ของเราขึ้นมาได้เลย
15. Web Intent โดนตัดทิ้งไปแล้ว เนื่องจากว่า Chrome พยายามทำให้มันซับซ้อนมากๆ เหมือน Intent ของ Android แต่สุดท้ายก็ยังไม่โอเค Chrome ก็เลยตัดเหลือบางส่วนแล้วเปลี่ยนชื่อ
16. Web Share พอตัด Web Intent Webshare ก็เลยมาแทน ต่อไปเราก็สามารถ จะแชร์ URL เข้าไปยัง app ต่างๆใน android หรือ iOS ได้โดยไม่ต้องมาเขียน javascript ทีละอันสองอัน เพราะ chrome จะไปเรียก Share dialog ของ native มาเลย
17. Web Target มีขาออกแล้วต้องมีขาเข้าบ้าง Chrome เรียกมันว่า Web target เพียงแค่เราเขียนไว้ใน manifest ว่า ให้ app อื่นแชร์ผ่าน app เราได้ ใน Dialog share ของ native ก็จะมี Application ของเรา list ขึ้นมาด้วย สำหรับ web Share และ Web target ต้องไป Enable Experiment Feature ใน chrome://flags ก่อนนะครับ อีกนานกว่าจะมาในตัวจริง
18. Background Playback อันนี้ไม่ต้องทำอะไรเลยใน chrome ใหม่ ต่อให้ ปิด หน้าจอ chrome ไปแล้ว media ที่เล่นอยู่จะยังเล่นต่อไป ลองดู youtube ได้ครับ
19. Capture Stream อันนี้เป็นอะไรที่ควรทำได้นานแล้วนั่นคือ สั่งอัดวิดีโอจาก canvas ได้โดยตรง จะอัดเป็น Stream data หรือ อัดเป็นวิดิโอก็ได้
20. Stream พอเราสั่ง ให้อัดวิดีโอได้จาก Canvas ได้แล้ว เราก็เอา Stream data ที่ได้ ส่งไปเครื่องอื่นผ่าน Web RTC ได้ต่อผ่าน Feature Stream
21. Take a photo หลังจากที่เราต้องมานั่ง เอารูปจาก getUserMedia มาใส่ canvas แล้ว convert เป็น image มาตั้งนาน ตอนนี้มันจบลงแล้ว เพราะเรา ถ่ายรูปเองได้แล้ว แค่สั่ง takePhoto ก็จะได้มาเป็น base64 URI เลยน้ำตาจะไหลลลลลลล
22. Camera Setting เราจะสามารถเข้าถึง camera setting ได้มากขึ้น หลักๆตอนนี้คือ zoom level ซึ่งเราสามารถเข้าไปวั่ง zoom กล้องได้เลย
23. Object Detection ด้วย feature กลุ่มนี้เราจะสั่ง detect object ใน canvas ได้จาก chrome เองเลย ซึ่ง ตอนนี้ ที่ใช้งานได้แล้ว จะเป็น face detection ก่อนแล้วอย่างอื่นจะตามมา
24. Generic Sensor เราจะสามารถเข้าถึง sensor ต่างๆของ คอมพิวเตอร์ หรือ มือถือได้ ทั้งหมด โดยเราสามรถเลือก format ได้ว่าจะดึงข้อมูลจาก sensor อะไร ซึ่งตอน demo เค้าโชว์ Ambient light API ,Compass sensor, Gyroscope Sensor
25. Physical web ที่ Chrome จะแจ้งเตือนเวลา มี Beacon อยู่ใกล้ๆ มาแล้ว และจะเปิดเป็น Default บน stable เร็วๆนี้
26. Web Bluetooth Feature ที่จะทำให้ เว็บต่อ Bluetooth ได้ มาแล้วเช่นกัน แต่ยังต้องไป เปิดใน chrome://flags อยู่ ผมเคยเขียนบทความไปแล้ว
27. Web USB Feature ที่ทำให้ เว็บสามารถต่อ USB Device ได้ จริงเสร็จแล้วแต่ยังมีประเด็นเรื่อง ความปลอดภัยอยู่ เลยยังไม่ปล่อยออกมา และต้องไปเปิดใน chrome://flags อยู่ เบื้องต้นน่าจะ Whitelist ไม่กี่ Device ก่อน
28. Web VR เป็น Feature ที่ทำให้ chrome ใช้ VR แบบ Native ได้ ซึ่ง จะสามารถ Enable ใน Experiment ได้ ใน chrome 56 (Firefox ทำไปนานแล้ว)

และนี้คือ feature ทั้งหมดของ chrome ที่จะมีในเร็วๆนี้และ มีไปแล้ว โดย Paul บอกว่า จริงๆแล้ว Google ไม่ได้พยายาม มองว่า Native ทำอะไรได้แล้วลอกนะ Google แค่พยายามเข้าใจว่า Feature ไหนใน Native ที่ Web ควรทำได้แล้วเค้าถึงเอามา Inplement (ถึงแม้จะเหมือน ลอก Native มาก็ตามเถอะ) และยังมีอีกเยอะเลยครับที่อยู่ในแผนแล้วแต่ยังไม่ได้ทำออกมา ซึ่งไปดูได้ที่ https://github.com/jpchase/OriginTrials

ใครอยากดูวิดีโอเต็มๆดูได้ข้างล่างเลยครับ Session นี้น่าสนใจมากๆ