Chrome 63'teki yenilikler

Pete LePage

Daha birçok özellikten yararlanabilirsiniz.

Adım Pete LePage. Chrome 63'te geliştiriciler için neler yeniye göz atalım.

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

Dinamik modül içe aktarma işlemleri

JavaScript modüllerini içe aktarmak çok kullanışlıdır ancak statiktir. Modülleri çalışma zamanı koşullarına göre içe aktaramazsınız.

Neyse ki Chrome 63'te yeni dinamik içe aktarma söz dizimi ile bu durum değişti. Çalışma zamanında modüllere ve komut dosyalarına kodu dinamik olarak yüklemenizi sağlar. Komut dosyalarını yalnızca gerektiğinde geç yüklemek için kullanılabilir ve uygulamanızın performansını artırır.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Kullanıcı sayfanıza ilk geldiğinde uygulamanızın tamamını yüklemek yerine oturum açmak için ihtiyacınız olan kaynakları alabilirsiniz. İlk yüklemeniz küçük ve çok hızlı olmalıdır. Kullanıcı oturum açtıktan sonra diğerlerini de yüklediğinizde işlemi tamamlayabilirsiniz.

Eşzamansız iteratör ve jeneratörler

async işlevleriyle herhangi bir tür yineleme yapan kod yazmak can sıkıcı olabilir. Hatta en sevdiğim kodlama mülakatı sorusunun ana kısmı budur.

Şimdi ise eş zamansız oluşturucu işlevleri ve eş zamansız yineleme protokol ile, akış veri kaynaklarının kullanımı ve uygulanması kolaylaşıyor ve kodlama sorum çok daha kolaylaşıyor.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Eşzamansız yinelemeler for-of döngülerinde ve eşzamansız yineleme fabrikaları aracılığıyla kendi özel eşzamansız yinelemelerinizi oluşturmak için kullanılabilir.

Aşırı kaydırma davranışı

Sayfalarla etkileşime geçmenin en temel yollarından biri kaydırma olsa da belirli kalıplarla başa çıkmak zor olabilir. Örneğin, tarayıcıların yenilemek için aşağı kaydır özelliği, sayfanın üst kısmından aşağı kaydırıldığında sayfayı tamamen yeniden yükler.

Tam sayfa yenilemeyle önceden.

Ardından yalnızca içeriği yenileyin.

Bazı durumlarda bu davranışı geçersiz kılmak ve kendi deneyiminizi sağlamak isteyebilirsiniz. Twitter'ın progresif web uygulaması bunu yapar. Sayfayı aşağı çektiğinizde, tüm sayfayı yeniden yüklemek yerine, sadece yeni tweet'leri geçerli görünüme ekler.

Chrome 63 artık CSS overscroll-behavior özelliğini desteklediğinden tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılmayı kolaylaştırır.

Bu işlemle aşağıdakileri yapabilirsiniz:

En iyi yanı, overscroll-behavior'ün sayfa performansınızı olumsuz etkilememesidir.

İzin kullanıcı arayüzü değişiklikleri

Web push bildirimlerini seviyorum ancak sayfa yüklenirken herhangi bir bağlam olmadan izin isteyen sitelerin sayısı beni gerçekten rahatsız ediyor. Bu konuda yalnız değilim.

Tüm izin isteklerinin% 90'ı yok sayılır veya geçici olarak engellenir.

Chrome 59'da, kullanıcı isteği üç kez reddettiyse izni geçici olarak engelleyerek bu sorunu gidermeye başladık. M63'te Android için Chrome, izin isteklerini modal iletişim kutuları olarak gösterecek.

Bu durumun yalnızca push bildirimleri için değil, tüm izin istekleri için geçerli olduğunu unutmayın. Uygun zamanda ve bağlama uygun bir şekilde izin istediğinizde kullanıcıların izin verme olasılığının iki buçuk kat daha yüksek olduğunu tespit ettik.

Diğer özellikler

Bunlar, Geliştiriciler için Chrome 63'teki değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

  • finally artık Promise örneklerinde kullanılabilir ve bir Promise karşılanıp reddedildikten sonra çağrılır.
  • Yeni Device Memory JavaScript API, kullanıcının cihazındaki toplam RAM miktarı hakkında ipuçları vererek performans kısıtlamalarını anlamanıza yardımcı olur. Deneyimi çalışma zamanında özelleştirerek düşük kaliteli cihazlardaki karmaşıklığı azaltabilir, kullanıcılara daha az sorun yaşatarak daha iyi bir deneyim sunabilirsiniz.
  • Intl.PluralRules API, belirli bir sayı ve dil için hangi çoğul biçimin geçerli olduğunu belirterek belirli bir dilin çoğul hâlini anlayan uygulamalar oluşturmanıza olanak tanır. Sıralamalı sayılar konusunda da yardımcı olabilir.

YouTube kanalımıza abone olmayı unutmayın. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 64 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.