Chrome 76'da aşağıdakiler için destek ekledik:
prefers-color-scheme
medya sorgusu, web sitelerine koyu modu getirir.- Progresif Web Uygulamaları'nın masaüstünde daha kolay yüklenmesini sağlamak için çok amaçlı adres çubuğuna bir yükle düğmesi.
- Mobil cihazlardaki Progresif Web Uygulamalarında mini bilgi çubuğunun görünmesini engelleme.
- WebAPK'larının daha sık güncellenmesi.
- Ve daha fazlası.
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
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.
- Chrome Geliştirici Araçları'ndaki yenilikler (76)
- Chrome 76'da kullanımdan kaldırma ve kaldırma işlemleri
- Chrome 76 için ChromeStatus.com güncellemeleri
- Chrome 76'da JavaScript'teki yenilikler
- Chromium kaynak deposu değişiklik listesi
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!