Web Bileşenleri güncellemesi - v1 API'lerine yükseltme için daha fazla süre

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

Web Bileşenleri v1 API'leri; Chrome, Safari, Firefox ve (yakında) Edge'de de kullanıma sunulacak olan bir web platformu standardıdır. Milyonlarca site tarafından kullanılan v1 API'leri her gün milyarlarca kullanıcıya ulaşıyor. Taslak v0 API'lerini kullanan geliştiriciler, özellikleri etkileyen değerli geri bildirimler sağladı. Ancak v0 API'leri yalnızca Chrome tarafından destekleniyordu. Birlikte çalışabilirliği sağlamak için geçtiğimiz yılın sonlarında bu taslak API'lerin kullanımdan kaldırıldığını ve Chrome 73 itibarıyla kaldırılmasının planlandığını duyurmuştuk.

Yeterli sayıda geliştirici taşıma işlemi için daha fazla süre istediğinden API'ler henüz Chrome'dan kaldırılmadı. Şubat 2020 civarında v0 taslak API'lerinin Chrome 80'de kaldırılması hedeflenmektedir.

v0 API'lerini kullanıyor olabileceğinizi düşünüyorsanız bilmeniz gerekenler:

Geleceğe dönüş: v0 API'lerini devre dışı bırakma

v0 API'leri devre dışıyken sitenizi test etmek için Chrome'u aşağıdaki işaretleri kullanarak komut satırından başlatmanız gerekir:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

Komut satırından başlatmadan önce Chrome'dan çıkmanız gerekir. Bilgisayarınızda Chrome Canary yüklüyse bu sayfayı Chrome'da yüklü tutarken testi Canary'de çalıştırabilirsiniz.

v0 API'leri devre dışıyken sitenizi test etmek için:

  1. Mac OS kullanıyorsanız Chrome'un yürütülebilir yolunu bulmak için chrome://version adresine gidin. 3. adımdaki yola ihtiyacınız olacaktır.
  2. Chrome'dan çıkın.

  3. Chrome'u komut satırı işaretleriyle yeniden başlatın:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    Chrome'u bayraklarla başlatma talimatları için Chromium'u işaretlerle çalıştırma konusuna bakın. Örneğin, Windows'da şunu çalıştırabilirsiniz:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

  4. Tarayıcıyı doğru şekilde başlattığınızdan emin olmak için yeni bir sekme açın, Geliştirici Araçları konsolunu açın ve aşağıdaki komutu çalıştırın:

    console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

    Her şey beklendiği gibi çalışıyorsa şunları görürsünüz:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

    Tarayıcı bu özelliklerin herhangi biri veya tümü için doğru rapor veriyorsa bir sorun var demektir. İşaretleri kullanarak yeniden başlatmadan önce Chrome'dan tamamen çıktığınızdan emin olun.

  5. Son olarak uygulamanızı yükleyin ve özellikleri inceleyin. Her şey beklendiği gibi çalışırsa işiniz tamamlanmıştır.

v0 çoklu dolgularını kullanma

Web Bileşenleri v0 çoklu dolguları, yerel destek sağlamayan tarayıcılarda v0 API'leri için destek sağlar. Siteniz v0 API'leri devre dışıyken Chrome'da çalışmıyorsa muhtemelen çoklu dolguları yüklemiyorsunuzdur. Birkaç olasılık vardır:

  • Çoklu dolguları hiç yüklemiyorsunuz. Bu durumda, siteniz Firefox ve Safari gibi diğer tarayıcılarda başarısız olur.
  • Çoklu dolguları tarayıcı algılamasına göre koşullu olarak yüklüyorsunuz. Bu durumda, siteniz diğer tarayıcılarda çalışmalıdır. Çoklu dolguları yükleme adımına atlayın.

Geçmişte Polymer Project ekibi ve diğerleri, poli dolguları özellik algılamaya göre koşullu olarak yüklemenizi öneriyorlardı. Bu yaklaşım, v0 API'leri devre dışı bırakıldığında düzgün şekilde çalışacaktır.

v0 çoklu dolgularını yükleme

Web Bileşenleri v0 çoklu dolguları, npm kayıt defterinde hiç yayınlanmadı. Projenizde zaten Bower kullanılıyorsa çoklu dolguları Bower kullanarak yükleyebilirsiniz. İsterseniz bir zip dosyasından da yükleyebilirsiniz.

  • Bower ile yüklemek için:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • ZIP dosyasından yüklemek için GitHub'dan en son 0.7.x sürümünü indirin:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    ZIP dosyasından yüklerseniz başka bir sürüm çıktığında çoklu dolguları manuel olarak güncellemeniz gerekir. Çoklu dolguları kodunuza eklemek isteyebilirsiniz.

v0 çoklu dolgularını yükle

Web Bileşenleri v0 çoklu dolguları iki ayrı paket halinde sağlanır:

webcomponents-min.js Çoklu dolguların tümünü içerir. Bu paket, diğer çoklu dolgulardan çok daha büyük olan ve daha fazla performans etkisine sahip olan gölge DOM çoklu dolgusunu içerir. Bu paketi yalnızca gölge DOM desteğine ihtiyacınız varsa kullanın.
webcomponents-lite-min.js Gölge DOM'u hariç tüm çoklu dolguları içerir. Not: Gölge DOM emülasyonu doğrudan Polymer kitaplığına dahil olduğundan Polymer 1.x kullanıcıları bu paketi seçmelidir. Polymer 2.x kullanıcıları, farklı bir çoklu dolgu sürümüne ihtiyaç duyar. Ayrıntılar için Polymer Project blog yayınına bakın.

Web Bileşenleri çoklu dolgu paketinin parçası olarak bağımsız çoklu dolgular da vardır. Bağımsız çoklu dolguları ayrı olarak kullanmak, ileri düzey bir konudur ve burada ele alınmamıştır.

Çoklu dolguları koşulsuz olarak yüklemek için:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

veya:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

Çoklu dolguları doğrudan GitHub'dan yüklediyseniz polyfill'leri yüklediğiniz yolu sağlamanız gerekir.

Çoklu dolguları özellik algılamaya bağlı olarak koşullu olarak yüklerseniz v0 desteği kaldırıldığında siteniz çalışmaya devam eder.

Çoklu dolguları tarayıcı yoklama işlevini kullanarak koşullu olarak yüklerseniz (diğer bir deyişle, çoklu dolguları Chrome dışındaki tarayıcılarda yüklerseniz) v0 desteği Chrome'dan kaldırıldığında siteniz başarısız olur.

Yardıma ihtiyacım var. Hangi API'leri kullandığımı bilmiyorum!

v0 API'lerinden herhangi birini veya hangi API'leri kullandığınızı bilmiyorsanız konsol çıkışını Chrome'dan kontrol edebilirsiniz.

  1. Chrome'u daha önce v0 API'lerini devre dışı bırakma işaretleriyle başlattıysanız Chrome'u kapatın ve normal şekilde yeniden başlatın.
  2. Yeni bir Chrome sekmesi açın ve sitenizi yükleyin.
  3. Control+Üst Karakter+J (Windows, Linux, ChromeOS) veya Command+Option+J (Mac) tuşlarına basarak Geliştirici Araçları Konsolu'nu açın.
  4. Desteği sonlandırma mesajları için konsol çıkışını kontrol edin. Çok sayıda konsol çıkışı varsa Filtre kutusuna "Kullanımdan kaldırma" yazın.
Desteği sonlandırma uyarıları gösteren konsol penceresi

Kullandığınız her v0 API için desteği sonlandırma mesajları göreceksiniz. Yukarıdaki çıkışta HTML İçe Aktarmaları, özel öğeler v0 ve gölge DOM v0 ile ilgili mesajlar gösterilmektedir.

Bu API'lerden birini veya daha fazlasını kullanıyorsanız v0 çoklu dolgularını kullanma başlıklı makaleyi inceleyin.

Sonraki adımlar: v0'dan çıkma

v0 çoklu dolgularının yüklendiğinden emin olmak, v0 API'leri kaldırıldığında sitenizin çalışmaya devam etmesini sağlayacaktır. Yaygın bir şekilde desteklenen Web Bileşenleri v1 API'lerine geçmenizi öneririz.

Polymer kitaplığı, X-Tag veya SkateJS gibi bir Web Bileşenleri kitaplığı kullanıyorsanız ilk adım, kitaplığın v1 API'lerini destekleyen daha yeni sürümlerinin olup olmadığını kontrol etmektir.

Kendi kitaplığınız varsa veya kitaplık olmadan özel öğeler yazdıysanız yeni API'lere güncellemeniz gerekir. Şu kaynaklar yardımcı olabilir:

Özet

Web Bileşenleri v0 taslak API'leri kullanımdan kaldırılıyor. Bu yayında ele alınacak bir konu varsa uygulamanızı v0 API'leri devre dışı olarak test ettiğinizden ve polyfill'leri gerektiği gibi yüklediğinizden emin olun.

Uzun vadede, en yeni API'lara geçmenizi ve Web Bileşenleri'ni kullanmaya devam etmenizi öneririz.