Chrome 63'teki yenilikler

Daha birçok özellik de var.

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. Bir komut dosyasını yalnızca gerektiğinde yüklemek için kullanılabilir ve böylece uygulamanızın performansını iyileştirir.

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 ihtiyaç duyduğunuz kaynakları alabilirsiniz. İlk yüklemeniz küçük ve çok hızlı olmalıdır. Ardından, kullanıcı oturum açtıktan sonra geri kalanı yükleyin.

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.

Artık asynchronize oluşturucu işlevleri ve asynchronize iterasyon protokolüyle akış veri kaynaklarının tüketimi veya uygulanması kolaylaştı ve kodlama sorum çok daha kolay hale geldi.

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

Arayüzdeki iterasyonlar, for-of döngülerinde ve ayrıca arayüzdeki iterasyon fabrikaları aracılığıyla kendi özel arayüzdeki iterasyonlarınızı oluşturmak için kullanılabilir.

Ekranı aşırı kaydırma davranışı

Sayfayla 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 sayfanın üst kısmından aşağı kaydırarak yenileme özelliğini kullanması, sayfanın tamamen yeniden yüklenmesine neden olur.

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ı da bunu yapar. Sayfayı aşağı kaydırdığınızda sayfanın tamamını yeniden yüklemek yerine yeni tweet'leri mevcut görünüme ekler.

Chrome 63 artık CSS overscroll-behavior mülkünü destekliyor. Bu sayede, tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılabilirsiniz.

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'ı yoksayı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 yerine getirildikten veya reddedildikten sonra çağrılır.
  • Yeni Cihaz Hafızası JavaScript API'si, 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 cihazlarda 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 biçimini anlayan uygulamalar oluşturmanıza olanak tanır. Sıralamalı sayılar konusunda da yardımcı olabilir.

Yeni video yayınladığımızda e-posta bildirimi almak için YouTube kanalımıza abone olun.

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