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

Web Components v1 API'leri, Chrome, Safari, Firefox ve (yakında) Edge'de kullanıma sunulan bir web platformu standardıdır. 1. sürüm API'ler milyonlarca site tarafından kullanılarak günlük olarak milyarlarca kullanıcıya ulaşıyor. Taslak v0 API'lerini kullanan geliştiriciler, spesifikasyonları etkileyen değerli geri bildirimler sağladı. Ancak v0 API'leri yalnızca Chrome tarafından destekleniyordu. Geçen yılın sonlarında, birlikte çalışabilirliği sağlamak amacıyla bu taslak API'lerin desteğinin sonlandırıldığını ve Chrome 73'ten itibaren kaldırılacağını duyurmuştuk.

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

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

• Sitenizi v0 API'leri devre dışıyken test edin. Siteniz beklendiği gibi çalışıyorsa tebrikler. Hepsi bu kadar. Talimatlar için Gelecekten gelen çağrı: v0 API'lerini devre dışı bırakma başlıklı makaleyi inceleyin.
• Polymer kitaplığının 1. veya 2. sürümünü kullanıyorsanız Polymer ekibi tarafından daha önce yayınlanan talimatları uygulayın.
• Gölge DOM v0, özel öğeler v0 veya HTML içe aktarmalarını kullanıyorsanız bazı çoklu dolguları yüklemeniz gerekir. v0 polyfill'lerini kullanma başlıklı makaleyi inceleyin.
• Hangisini kullandığınızdan emin değilseniz endişelenmeyin. Yardım edin! Hangi API'leri kullandığımı bilmiyorum.

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

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

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

Chrome'u komut satırından başlatmadan önce Chrome'dan çıkmanız gerekir. Chrome Canary yüklüyse bu sayfayı Chrome'da açık tutarken testi Canary'da çalıştırabilirsiniz.

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

1. Mac OS kullanıyorsanız Chrome'un yürütülebilir dosyasının yolunu bulmak için chrome://version'ye gidin. 3. adımda yola ihtiyacınız olacak.
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 işaretlerle başlatmayla ilgili talimatlar için Chromium'u işaretlerle çalıştırma başlıklı makaleyi inceleyin. Örneğin, Windows'ta şunları ç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 değerini bildiriyorsa bir sorun vardır. İşaretleri kullanarak yeniden başlatmadan önce Chrome'u tamamen kapattığınızdan emin olun.

5. Son olarak uygulamanızı yükleyin ve özellikleri gözden geçirin. Her şey beklendiği gibi çalışırsa işlem tamamlanır.

v0 polyfill'lerini kullanma

Web Components v0 polyfill'leri, 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 polyfill'leri yüklemiyorsunuzdur. Birkaç olasılık vardır:

• polyfill'leri hiç yüklemiyorsunuz. Bu durumda, siteniz Firefox ve Safari gibi diğer tarayıcılarda başarısız olur.
• Tarayıcı koku alma özelliğine göre polyfill'leri koşullu olarak yüklüyorsunuz. Bu durumda siteniz diğer tarayıcılarda çalışabilir. Polifill'leri yükleme bölümüne atlayın.

Geçmişte, Polymer Project ekibi ve diğerleri, özellik algılamasına bağlı olarak polyfill'leri koşullu olarak yüklemeyi öneriyordu. Bu yaklaşım, v0 API'leri devre dışıyken sorunsuz şekilde çalışır.

v0 polyfill'lerini yükleme

Web Components v0 polyfill'leri hiçbir zaman npm kayıt defterinde yayınlanmamıştır. Projenizde Bower kullanılıyorsa polyfill'leri Bower'ı kullanarak yükleyebilirsiniz. Dilerseniz 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

  Bir zip dosyasından yüklerseniz başka bir sürüm yayınlandığında polyfill'leri manuel olarak güncellemeniz gerekir. Muhtemelen kodunuzda polyfill'leri kontrol etmek isteyeceksiniz.

v0 polyfill'lerini yükleme

Web Components v0 polyfill'leri iki ayrı paket olarak sağlanır:

Web bileşenleri polyfill paketinin bir parçası olarak bağımsız polyfill'ler de mevcuttur. Ayrı polyfill'leri ayrı ayrı kullanmak ileri düzey bir konudur ve burada ele alınmamıştır.

Polifill'leri 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>

Polifill'leri doğrudan GitHub'dan yüklediyseniz polifill'leri yüklediğiniz yolu sağlamanız gerekir.

Polifill'leri özellik algılamaya göre koşullu olarak yüklerseniz v0 desteği kaldırıldığında siteniz çalışmaya devam eder.

Tarayıcı koku alma özelliğini kullanarak polyfill'leri koşullu olarak yüklerseniz (yani polyfill'leri Chrome dışındaki tarayıcılarda yüklerseniz) Chrome'dan v0 desteği 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 kullanıp kullanmadığınızı veya hangi API'leri kullandığınızı bilmiyorsanız Chrome'daki konsol çıkışını kontrol edebilirsiniz.

1. Daha önce Chrome'u v0 API'leri devre dışı bırakma işaretleriyle başlattıysanız Chrome'u kapatıp normal şekilde yeniden başlatın.
2. Yeni bir Chrome sekmesi açıp sitenizi yükleyin.
3. DevTools Konsolunu açmak için Control+Shift+J (Windows, Linux, ChromeOS) veya Command+Option+J (Mac) tuşlarına basın.
4. Desteği sonlandırılan mesajlar için konsol çıkışını kontrol edin. Çok fazla konsol çıkışı varsa Filtre kutusuna "Destek sonlandırıldı" yazın.

Kullandığınız her v0 API için desteğin sonlandırılmasıyla ilgili mesajlar görürsünüz. Yukarıdaki çıktıda HTML İçe Aktarmaları, özel öğeler v0 ve gölge DOM v0 ile ilgili mesajlar gösterilmektedir.

Bu API'lerden en az birini kullanıyorsanız v0 polyfill'lerini kullanma başlıklı makaleyi inceleyin.

Sonraki adımlar: v0 sürümünden vazgeçme

v0 polyfill'lerinin yüklendiğinden emin olmak, v0 API'leri kaldırıldığında sitenizin çalışmaya devam etmesini sağlar. Geniş bir şekilde desteklenen Web Components 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 geçmeniz gerekir. Şu kaynaklardan yararlanabilirsiniz:

• Özel Öğeler'deki Yenilikler
• Gölge DOM v1'de Neler Yeni?

Özet

Web Components v0 taslak API'leri kullanımdan kaldırılıyor. Bu gönderiden edineceğiniz tek bilgi, uygulamanızı v0 API'leri devre dışıyken test ettiğinizden ve polyfill'leri gerektiği gibi yüklediğinizden emin olmanız gerektiğidir.

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