การเลิกใช้งานและการนำ API ออกใน Chrome 49

เราเห็นการอัปเดตและการปรับปรุงผลิตภัณฑ์ ประสิทธิภาพการทำงาน และความสามารถของแพลตฟอร์มเว็บใน Chrome เกือบทุกเวอร์ชัน

ใน Chrome 49 (เบต้าวันที่ 2 กุมภาพันธ์ 2016 วันที่เสถียรโดยประมาณ: มีนาคม 2016) มีการเปลี่ยนแปลงหลายประการใน Chrome

เลิกใช้งานคำนำหน้า "css" ใน getComputedStyle(e.cssX แล้ว

TL;DR: เราได้เลิกใช้งานคำนำหน้า "css" ใน getComputedStyle(e) แล้วเนื่องจากไม่ได้เป็นส่วนหนึ่งของspecอย่างเป็นทางการ

• ความตั้งใจที่จะนำออก
• ตัวติดตาม Chromestatus
• ปัญหาเกี่ยวกับ CRBug

getComputedStyle เป็นฟังก์ชันเล็กๆ ที่ยอดเยี่ยม ฟังก์ชันจะแสดงผลค่า CSS ทั้งหมดสำหรับรูปแบบขององค์ประกอบ DOM ตามที่ได้รับการคำนวณโดยเครื่องมือแสดงผล ตัวอย่างเช่น คุณเรียกใช้ getComputedStyle(_someElement_).height ได้ และตัวแปรอาจแสดงผล 224.1px เพราะนี่คือความสูงขององค์ประกอบตามที่แสดงอยู่

ดูเหมือนว่าจะเป็น API ที่มีประโยชน์มากทีเดียว สิ่งที่เรากำลังเปลี่ยนแปลง

ก่อนที่เครื่องมือการแสดงผลของ Chrome จะเปลี่ยนเป็น Blink เครื่องมือนี้ขับเคลื่อนโดย WebKit และช่วยให้คุณสามารถใส่คำนำหน้า "css" ไว้หน้าจุดเริ่มต้นของพร็อพเพอร์ตี้ได้ เช่น getComputedStyle(e).cssHeight แทนที่จะเป็น getComputedStyle(e).height ทั้ง 2 แบบจะแสดงผลข้อมูลเดียวกันกับที่แมปกับค่าพื้นฐานเดียวกัน แต่มีการใช้คำนำหน้า "css" ที่ไม่เป็นไปตามมาตรฐาน รวมทั้งเลิกใช้งานและนำออกแล้ว

หมายเหตุ - cssFloat เป็นพร็อพเพอร์ตี้มาตรฐานและไม่ได้รับผลกระทบจากการเลิกใช้งานนี้

หากคุณเข้าถึงพร็อพเพอร์ตี้ด้วยวิธีนี้ใน Chrome 49 จะคืนค่า undefined และคุณจะต้องแก้ไขโค้ด

เลิกใช้งาน initTouchEvent แล้ว

TL;DR: initTouchEvent เลิกใช้งานแล้วเพื่อเปลี่ยนไปใช้ TouchEvent constructor เพื่อปรับปรุงการปฏิบัติตามข้อกำหนดและจะถูกนำออกทั้งหมดใน Chrome 54

Intent to Remove Chromestatus Tracker ปัญหา CRBug

คุณสามารถสร้างเหตุการณ์การแตะแบบสังเคราะห์ใน Chrome โดยใช้ API ของ initTouchEvent มาเป็นเวลานานแล้ว โดยใช้ initTouchEvent API ที่ใช้บ่อยเพื่อจำลองเหตุการณ์การแตะ ไม่ว่าจะสำหรับการทดสอบหรือการทำให้ UI บางอย่างในเว็บไซต์ทำงานโดยอัตโนมัติ เราเลิกใช้งาน API นี้ใน Chrome 49 แล้ว และจะแสดงคำเตือนต่อไปนี้โดยตั้งใจที่จะนำออกโดยสมบูรณ์ใน Chrome 53

มีสาเหตุหลายประการที่ทำให้การเปลี่ยนแปลงนี้ดี นอกจากนั้น ก็ไม่ได้อยู่ในข้อมูลจำเพาะของกิจกรรมการแตะ การใช้งาน Chrome ของ initTouchEvent ไม่สามารถใช้ร่วมกับ initTouchEvent API ของ Safari ได้เลย และแตกต่างจาก Firefox ใน Android และสุดท้าย เครื่องมือสร้าง TouchEvent ใช้งานง่ายมาก

เราได้ตัดสินใจที่จะทำตามข้อกำหนด แทนที่จะคง API ที่ไม่ได้ระบุไว้หรือไม่เข้ากันกับการใช้งานแบบอื่นๆ เพียงอย่างเดียว ก่อนอื่น เราจะเลิกใช้งาน แล้วนำฟังก์ชัน initTouchEvent ออก และกำหนดให้นักพัฒนาซอฟต์แวร์ใช้ตัวสร้าง TouchEvent

มีการใช้งาน API นี้บนเว็บ แต่เราทราบว่ามีเว็บไซต์เพียงไม่กี่แห่งที่ใช้ API นี้ เราจึงไม่ได้นำ API นี้ออกได้เร็วเหมือนปกติ เราเชื่อว่าการใช้งานบางส่วนเกิดความเสียหายเนื่องจากไซต์ไม่ได้จัดการลายเซ็นในเวอร์ชัน Chrome

เนื่องจากการใช้งาน API initTouchEvent ใน iOS และ Android/Chrome นั้นแตกต่างกันอย่างมาก คุณจึงมักจะมีโค้ดบางส่วนตาม (ซึ่งมักจะลืม Firefox)

    var event = document.createEvent('TouchEvent');
    
    if(ua === 'Android') {
      event.initTouchEvent(touchItem, touchItem, touchItem, "touchstart", window,
        300, 300, 200, 200, false, false, false, false);
    } else {
      event.initTouchEvent("touchstart", false, false, window, 0, 300, 300, 200,
        200, false, false, false, false, touches, targetTouches, changedTouches, 0, 0);
    }
    
    document.body.dispatchEvent(touchEvent);

อย่างแรกเลย วิธีนี้แย่เพราะมองหาคำว่า "Android" ใน User-Agent และ Chrome ใน Android จะตรงกันและทำการเลิกใช้งานนี้ อย่างไรก็ตาม ยังนำออกไม่ได้เพราะยังมีเบราว์เซอร์อื่นๆ ที่ใช้ WebKit และเบราว์เซอร์ Blink รุ่นเก่าบน Android อีกระยะหนึ่งซึ่งคุณยังคงต้องรองรับ API รุ่นเก่าอยู่

ในการจัดการ TouchEvents ในเว็บอย่างถูกต้อง คุณควรเปลี่ยนโค้ดให้รองรับ Firefox, IE Edge และ Chrome โดยตรวจหาการมีอยู่ของ TouchEvent ในออบเจ็กต์ window และมี "length" เป็นบวก (ระบุว่าเป็นเครื่องมือสร้างที่ใช้อาร์กิวเมนต์) คุณควรใช้โค้ดนั้น

    if('TouchEvent' in window && TouchEvent.length > 0) {
      var touch = new Touch({
        identifier: 42,
        target: document.body,
        clientX: 200,
        clientY: 200,
        screenX: 300,
        screenY: 300,
        pageX: 200,
        pageY: 200,
        radiusX: 5,
        radiusY: 5
      });
    
      event = new TouchEvent("touchstart", {
        cancelable: true,
        bubbles: true,
        touches: [touch],
        targetTouches: [touch],
        changedTouches: [touch]
      });
    }
    else {
      event = document.createEvent('TouchEvent');
    
      if(ua === 'Android') {
        event.initTouchEvent(touchItem, touchItem, touchItem, "touchstart", window,
          300, 300, 200, 200, false, false, false, false);
      } else {
        event.initTouchEvent("touchstart", false, false, window, 0, 300, 300, 200,
          200, false, false, false, false, touches, targetTouches, 
          changedTouches, 0, 0);
      }
    }
    
    document.body.dispatchEvent(touchEvent);

ต้องมีเครื่องจัดการข้อผิดพลาดและความสำเร็จในเมธอด RTCPeerConnection

TL;DR: ตอนนี้ WebRTC เมธอด RTCPeerConnection createOffer() และ createAnswer() จำเป็นต้องมีตัวแฮนเดิลข้อผิดพลาดและตัวแฮนเดิลวัดความสำเร็จ ก่อนหน้านี้เราเรียกวิธีการเหล่านี้ด้วยเครื่องจัดการความสำเร็จเท่านั้น เราจะเลิกใช้งานการใช้งานดังกล่าว

ใน Chrome 49 เราได้เพิ่มคำเตือนหากคุณเรียกใช้ setLocalDescription() หรือ setRemoteDescription() โดยไม่ระบุเครื่องจัดการข้อผิดพลาด เราคาดว่าจะใช้อาร์กิวเมนต์ของเครื่องจัดการข้อผิดพลาด สำหรับเมธอดเหล่านี้ใน Chrome 50

ซึ่งเป็นส่วนหนึ่งของการล้างวิธีการให้คำมั่นสัญญาในวิธีการเหล่านี้ตามที่ข้อกำหนดของ WebRTC กำหนด

นี่คือตัวอย่างจากการสาธิต RTCPeerConnection ของ WebRTC (main.js บรรทัดที่ 126)

    function onCreateOfferSuccess(desc) {
      pc1.setLocalDescription(desc, function() {
         onSetLocalSuccess(pc1);
      }, onSetSessionDescriptionError);
      pc2.setRemoteDescription(desc, function() {
        onSetRemoteSuccess(pc2);
      }, onSetSessionDescriptionError);
      pc2.createAnswer(onCreateAnswerSuccess, onCreateSessionDescriptionError);
    }

โปรดทราบว่าทั้ง setLocalDescription() และ setRemoteDescription() จะมีพารามิเตอร์เครื่องจัดการข้อผิดพลาดเสมอ ดังนั้นการระบุพารามิเตอร์นั้นเป็นการเปลี่ยนแปลงที่ปลอดภัย

โดยทั่วไปแล้ว สำหรับแอปพลิเคชัน WebRTC เวอร์ชันที่ใช้งานจริง เราขอแนะนำให้ใช้ adapter.js ซึ่งเป็น Shim ที่ดูแลโดยโปรเจ็กต์ WebRTC เพื่อปกป้องแอปจากการเปลี่ยนแปลงข้อมูลจำเพาะและความแตกต่างของคำนำหน้า

เลิกใช้งาน Document.defaultCharset แล้ว

TL;DR: เราได้เลิกใช้งาน Document.defaultCharset แล้วเพื่อปรับปรุงการปฏิบัติตามข้อกำหนด

Intent to Remove Chromestatus Tracker ปัญหา CRBug

Document.defaultCharset เป็นพร็อพเพอร์ตี้แบบอ่านอย่างเดียวที่แสดงผลการเข้ารหัสอักขระเริ่มต้นของระบบของผู้ใช้ตามการตั้งค่าระดับภูมิภาค เราไม่พบประโยชน์ในการรักษาค่านี้ไว้เนื่องจากเบราว์เซอร์ใช้ข้อมูลการเข้ารหัสอักขระในการตอบกลับ HTTP หรือในเมตาแท็กที่ฝังอยู่ในหน้าเว็บ

เมื่อใช้ document.characterSet คุณจะได้รับค่าแรกที่ระบุไว้ในส่วนหัว HTTP หากไม่มี คุณจะเห็นค่าที่ระบุในแอตทริบิวต์ charset ขององค์ประกอบ <meta> (เช่น <meta charset="utf-8">) สุดท้ายนี้หากไม่มีค่าดังกล่าวเลย document.characterSet จะเป็นการตั้งค่าระบบของผู้ใช้

Gecko ไม่ได้สนับสนุนพร็อพเพอร์ตี้นี้และไม่ได้ระบุอย่างชัดเจน ดังนั้นจะเลิกใช้งานพร็อพเพอร์ตี้นี้จาก Blink ใน Chrome 49 (เบต้าในเดือนมกราคม 2016) คำเตือนต่อไปนี้จะปรากฏในคอนโซลของคุณจนกว่าจะมีการนำพร็อพเพอร์ตี้ใน Chrome 50 ออก

อ่านการสนทนาเพิ่มเติมเกี่ยวกับเหตุผลที่ไม่ระบุเรื่องนี้ได้ที่ github https://github.com/whatwg/dom/issues/58

นำ getStorageUpdates() ออกแล้ว

TL;DR: เรานำ Navigator.getStorageUpdates() ออกแล้วเนื่องจากไม่ได้อยู่ในข้อกำหนดของ Navigator แล้ว

Intent to Remove Chromestatus Tracker ปัญหา CRBug

ถ้าสิ่งนี้ส่งผลกระทบต่อใครก็ตาม ฉันจะกินหมวกฉันน่ะ getStorageUpdates() แทบจะไม่เคยมีการใช้งาน (หากไม่มี) บนเว็บ

ในการอ้างอิงข้อกำหนดของ HTML5 (ซึ่งเป็นเวอร์ชันเก่ามาก) ให้ปฏิบัติดังนี้:

ฟังดูดีใช่ไหม ข้อกำหนดใช้คำว่า "เมื่อ" ด้วย (ซึ่งเหตุการณ์เกิดขึ้นเป็นเพียงอินสแตนซ์เดียวของเวลาในข้อมูลจำเพาะ) ในระดับข้อมูลจำเพาะจะมี StorageMutex ที่ควบคุมการเข้าถึงพื้นที่เก็บข้อมูลซึ่งบล็อก เช่น localStorage และคุกกี้ และ API นี้จะช่วยปล่อย Mutex ทำให้ StorageMutex เครื่องนี้ไม่บล็อกสคริปต์อื่นๆ แต่ไม่มีการนำไปใช้ และไม่ได้รับการสนับสนุนใน IE หรือ Gecko ดังนั้นการใช้งานของ WebKit (ของ Blink) จึงไม่ใช่เรื่องง่ายเลย

เรานำฟีเจอร์ดังกล่าวออกจากข้อกำหนดมานานพอสมควรและได้นำออกจาก Blink โดยสมบูรณ์ (เป็นเวลานานที่สุดที่จะไม่มีการดำเนินการและไม่ได้ดำเนินการใดๆ แม้ว่าจะเรียกใช้ก็ตาม)

ในกรณีที่พบไม่บ่อยนักว่าคุณมีโค้ดที่เรียกใช้ navigator.getStorageUpdates() คุณจะต้องตรวจหาฟังก์ชันดังกล่าวก่อนที่จะเรียกใช้ฟังก์ชันดังกล่าว

Object.observe() เลิกใช้งานแล้ว

TL;DR: เราเลิกใช้งาน Object.observe() แล้วเนื่องจากไม่อยู่ในแทร็กการกำหนดมาตรฐานอีกต่อไป และจะถูกนำออกในรุ่นถัดไป

Intent to Remove Chromestatus Tracker ปัญหา CRBug

ในเดือนพฤศจิกายน 2015 เราได้ประกาศว่า Object.Observe จะถูกถอนออกจาก TC39 เราได้เลิกใช้งาน Chrome 49 แล้ว และคุณจะเห็นคำเตือนต่อไปนี้ในคอนโซลหากคุณพยายามใช้

นักพัฒนาซอฟต์แวร์หลายรายชอบ API นี้และหากคุณได้ทดลองและมองหาเส้นทางการเปลี่ยนผ่านอยู่แล้ว ให้ลองใช้ Polyfill เช่น MaxArt2501/object-observe หรือไลบรารี Wrapper เช่น polymer/observe-js