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

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

ใน Chrome 49 (เบต้า 2 ก.พ. 2016 วันที่คาดการณ์สำหรับเวอร์ชันเสถียร: มีนาคม 2016) มีการเปลี่ยนแปลงหลายอย่างใน Chrome

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

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

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

ดูเหมือนว่าจะเป็น API ที่มีประโยชน์มาก เราจะเปลี่ยนแปลงอะไรบ้าง

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

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

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

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

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

ความตั้งใจที่จะนำออก เครื่องมือติดตามสถานะของ Chrome ปัญหา CRBug

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

เราเลิกใช้งาน "TouchEvent.initTouchEvent" แล้วและจะนำออกใน M53 ประมาณเดือนกันยายน 2016
 โปรดใช้ตัวสร้าง TouchEvent แทน
เราเลิกใช้งาน "TouchEvent.initTouchEvent" แล้วและจะนำออกใน M53 ประมาณเดือนกันยายน 2016 โปรดใช้ตัวสร้าง TouchEvent แทน ดูรายละเอียดเพิ่มเติมได้ที่ https://www.chromestatus.com/features/5730982598541312

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

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

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

เนื่องจากการติดตั้งใช้งาน initTouchEvent API ใน 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

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

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

ซึ่งเป็นส่วนหนึ่งของการเตรียมพร้อมสำหรับการเปิดตัว Promise ในเมธอดเหล่านี้ ตามที่ข้อกำหนดของ 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 แล้ว

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

ความตั้งใจที่จะนำออก เครื่องมือติดตามสถานะของ Chrome ปัญหา CRBug

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

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

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

เราเลิกใช้งาน &quot;Document.defaultCharset&quot; แล้วและจะนำออกใน M50 ประมาณเดือนเมษายน 2016
เราเลิกใช้งาน "Document.defaultCharset" แล้วและจะนำออกใน M50 ประมาณ เดือนเมษายน 2016 ดูรายละเอียดเพิ่มเติมได้ที่ https://www.chromestatus.com/features/6217124578066432

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

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

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

ความตั้งใจที่จะนำออก เครื่องมือติดตามสถานะของ Chrome ปัญหา CRBug

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

ข้อกำหนด HTML5 (เวอร์ชันเก่ามาก) ระบุไว้ดังนี้

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

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

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

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

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

ความตั้งใจที่จะนำออก เครื่องมือติดตามสถานะของ Chrome ปัญหา CRBug

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

เราเลิกใช้งาน &quot;Object.observe&quot; แล้วและจะนำออกใน M50 ประมาณเดือนเมษายน 2016
เราเลิกใช้งาน "Object.observe" แล้วและจะนำออกใน M50 ประมาณเดือนเมษายน 2016 ดูรายละเอียดเพิ่มเติมได้ที่ https://www.chromestatus.com/features/6147094632988672

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