Chrome 76'daki yenilikler

Filiz LePage

Chrome 76'da aşağıdakiler için destek ekledik:

Ben Pete LePage. Şimdi Chrome 76'daki geliştiricilere yönelik yenilikleri görelim!

PWA Çok Amaçlı Adres Çubuğu Yükleme Düğmesi

Chrome 76'da adres çubuğuna bazen çok amaçlı adres çubuğu da denen bir yükleme düğmesi ekleyerek, kullanıcıların masaüstüne Progresif Web Uygulamaları yüklemesini daha kolay hale getiriyoruz.

Siteniz Progresif Web Uygulaması yüklenebilirlik ölçütlerini karşılıyorsa Chrome, çok amaçlı adres çubuğunda kullanıcıya PWA'nızın yüklenebileceğini belirten bir yükleme düğmesi gösterir. Kullanıcı yükle düğmesini tıklarsa bu işlem, beforeinstallprompt etkinliğinde prompt() çağrısıyla aynı şeydir. Yükleme iletişim kutusu görüntülenerek kullanıcının PWA'nızı yüklemesini kolaylaştırır.

Tüm ayrıntılar için Masaüstünde Progresif Web Uygulamaları İçin Adres Çubuğu Yükleme bölümüne bakın.


PWA mini bilgi çubuğu üzerinde daha fazla kontrol

AirHorner için Ana ekrana ekle mini bilgi çubuğu örneği

Mobil cihazlarda Chrome, siteniz Progresif Web Uygulaması yüklenebilirlik ölçütlerini karşılıyorsa sitenizi ilk kez ziyaret ettiğinde mini bilgi çubuğunu gösterir. Mini bilgi çubuğunun görünmesini engelleyip bunun yerine kendi yükleme tanıtımınızı sunmak istediğinizi duyduk.

Chrome 76'dan itibaren, beforeinstallprompt etkinliğinde preventDefault() çağrısı yapıldığında mini bilgi çubuğunun görünmesi durdurulur.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Kullanıcılara PWA'nızın yüklenebileceğini bildirmek için kullanıcı arayüzünüzü güncellemeyi unutmayın. Progresif Web Uygulamalarınızın kurulumunu tanıtmak için önerdiğimiz en iyi uygulamaları görmek üzere PWA Yüklemesini Tanıtma Kalıpları'na göz atın.

WebAPK'larında daha hızlı güncellemeler

Android'e bir Progresif Web Uygulaması (Progresif Web Uygulaması) yüklendiğinde, Chrome otomatik olarak bir Web APK'sı ister ve yükler. Chrome, yüklendikten sonra, yeni bir WebAPK'sının gerekli olup olmadığını görmek için web uygulaması manifestinin değişip değişmediğini (örneğin, simgeleri veya renkleri ya da uygulama adını değiştirmiş olabilirsiniz) düzenli olarak kontrol eder.

Chrome 76'dan itibaren Chrome, manifest dosyasını daha sık kontrol edecek. Bunu üç günde bir yerine her gün kontrol edecek. Temel özelliklerden herhangi biri değişirse Chrome; başlığın, simgelerin ve diğer özelliklerin güncel olduğundan emin olarak yeni bir WebAPK'sı isteyip yükler.

Tüm ayrıntılar için WebAPK'larını Daha Sık Güncelleme konusuna bakın.

Koyu mod

Birçok işletim sistemi artık koyu modu veya koyu temayı desteklemektedir.

prefers-color-scheme medya sorgusu, sitenizin görünümünü ve tarzını kullanıcının tercih ettiği modla eşleşecek şekilde ayarlamanıza olanak tanır.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom'un web.dev'de bilmeniz gereken her şeyi içeren Merhaba karanlık, eski arkadaşım adlı güzel bir makalesi, ayrıca stil sayfalarınızı hem ışık hem de koyu modu destekleyecek şekilde tasarlamayla ilgili ipuçları var.

Diğer ölçütler

Bunlar, Chrome 76'da geliştiriciler için yapılan değişikliklerden sadece birkaçı. Tabii ki çok daha fazlası.

Promise.allSettled()

Kişisel olarak Promise.allSettled() konusunda çok heyecanlıyım. Promise.all() ile benzerdir, ancak geri dönmeden önce tüm vaatlerin yerine getirilmesini bekler.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Blobları okumak daha kolay

Blob öğeleri şu üç yeni yöntemle daha kolay okunur: text(), arrayBuffer() ve stream(). Bu sayede artık dosya okuyucu etrafında sarmalayıcı oluşturmamız gerekmiyor.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Eş zamansız pano API'sinde resim desteği

Ayrıca Async Clipboard API'ye resim desteği de ekledik. Bu sayede resimleri programlı bir şekilde kopyalayıp yapıştırmayı kolaylaştırdık.

Daha fazla bilgi

Öne çıkan bilgilerden yalnızca bazıları burada verilmiştir. Chrome 76'daki ek değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Videolarımızla ilgili güncel bilgileri edinmek isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 77 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!