Chrome 76'daki yenilikler

Pete LePage

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

Adım Pete LePage. Chrome 76'ta geliştiriciler için neler yeni olduğuna göz atalım.

PWA Çok Amaçlı Adres Çubuğu Yükle 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 Progresif Web Uygulamalarını masaüstüne yüklemesini kolaylaştırıyoruz.

Siteniz Progresif Web Uygulaması yüklenilebilirlik ölçütlerini karşılıyorsa Chrome, kullanıcıya PWA'nızın yüklenebileceğini belirten bir yükle düğmesi gösterir. Kullanıcı yükle düğmesini tıkladığında, bu işlem temelde beforeinstallprompt etkinliğinde prompt() çağrılmasıyla aynıdır. Yükleme iletişim kutusunu gösterir ve kullanıcının PWA'nızı yüklemesini kolaylaştırır.

Ayrıntılı bilgi için Masaüstünde Progresif Web Uygulamaları için Adres Çubuğu Yüklemesi başlıklı makaleyi inceleyin.


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

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

Mobil cihazlarda Chrome, Progresif Web Uygulaması yüklenilebilirlik ölçütlerini karşılıyorsa kullanıcı sitenizi ilk kez ziyaret ettiğinde mini bilgi çubuğunu gösterir. Mini bilgi çubuğunun gösterilmesini engellemek ve bunun yerine kendi yükleme promosyonunuzu sunmak istediğinizi bildirmiştiniz.

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

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. Progressive Web uygulamalarınızın yüklenmesini tanıtmak için önerilen en iyi uygulamalarımız için PWA Yüklemesini Tanıtmaya Yönelik Trendler başlıklı makaleyi inceleyin.

WebAPK'larda daha hızlı güncellemeler

Bir Progresif Web Uygulaması Android'e yüklendiğinde, Chrome otomatik olarak bir Web APK'sı ister ve yükler. Chrome, yüklendikten sonra yeni bir WebAPK'nın gerekip gerekmediğini görmek için web uygulaması manifest'inin değişip değişmediğini (ör. simgeleri, renkleri güncellemiş veya uygulama adını değiştirmiş olabilirsiniz) düzenli olarak kontrol eder.

Chrome 76'dan itibaren Chrome, manifest dosyasını üç 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 olmasını sağlayarak yeni bir WebAPK'yı ister ve yükler.

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

Koyu mod

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

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

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

Tom'un web.dev adresinde Merhaba karanlık, eski dostum başlıklı harika bir makalesi var. Bu makalede, bilmeniz gereken her şeyin yanı sıra stil sayfalarınızı hem açık hem de koyu modu destekleyecek şekilde tasarlamayla ilgili ipuçları yer alıyor.

Diğer özellikler

Bunlar, Chrome 76'ta geliştiriciler için yapılan değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

Promise.allSettled()

Şahsen Promise.allSettled() konusunda çok heyecanlıyım. Promise.all() ile benzerdir ancak döndürmeden ö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).

Blob'ları okumak daha kolay

Blob dosyalarının okunması, text(), arrayBuffer() ve stream() adlı üç yeni yöntemle daha kolay hale geldi. Bu sayede artık dosya okuyucu etrafında bir 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);
});

Asynchronize Clipboard API'de resim desteği

Ayrıca, Eşzamansız Panoya API'sine resim desteği ekledik. Bu sayede, resimleri programatik olarak kopyalayıp yapıştırmak kolaylaştı.

Daha fazla bilgi

Bu makalede, önemli değişikliklerden yalnızca bazıları ele alınmıştır. Chrome 76'daki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Videolarımızdan haberdar olmak için Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

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