Chrome 73'teki yenilikler

Filiz LePage

Chrome 73'te aşağıdakiler için destek ekledik:

Ve çok daha fazlası da var!

Adım Pete LePage. Şimdi Chrome 73'teki geliştiriciler için yenilikleri görelim!

Değişiklik günlüğü

Öne çıkan bilgilerden yalnızca birkaçı bu bölümde yer alıyor. Chrome 73'teki ek değişiklikler için aşağıdaki bağlantılara göz atın.

Progresif Web Uygulamaları her yerde çalışır

Progresif Web Uygulamaları, doğrudan web üzerinden oluşturulup sunulan yüklenebilir, uygulamaya benzer bir deneyim sunar. Chrome 73'te, macOS desteği de eklendi. Böylece Mac, Windows, ChromeOS ve Linux'un yanı sıra mobil platformun yanı sıra Progresif Web Uygulamaları tüm masaüstü platformlarında desteklenerek web uygulaması geliştirme sürecini basitleştirdik.

Progresif Web Uygulaması hızlı ve güvenilir bir şekilde çalışır; ağ bağlantısından bağımsız olarak her zaman aynı hızda yüklenir ve performans gösterir. Bu reklamlar, cihaz özelliklerinden tam olarak yararlanan modern web özellikleri aracılığıyla zengin ve ilgi çekici deneyimler sunar.

Kullanıcılar PWA'nızı Chrome'un içerik menüsünden yükleyebilir veya yükleme deneyimini beforeinstallprompt etkinliğini kullanarak doğrudan tanıtabilirsiniz. PWA, yüklendiğinde yerel bir uygulama gibi davranmak üzere işletim sistemiyle entegre olur: Kullanıcılar bunları diğer uygulamalarla aynı yerden bulup başlatır, kendi pencerelerinde çalışır, görev değiştiricide görünür, simgelerinde bildirim rozeti gösterebilir vb.

Web'de sunulan modern uygulamalar için sağlam bir temel oluşturmak amacıyla web ile yerel arasındaki yetenek açığını kapatmak istiyoruz. Kullanıcılara PWA'nızın yüklenebileceğini bildirmek için dosya sistemi, uyanık kalma kilidi ve adres çubuğuna bir ambiyans rozeti ekleme, kuruluşlar için politika yükleme ve daha birçok özelliğe erişmenizi sağlayan yeni web platformu özellikleri eklemeye çalışıyoruz.

Mevcut bir mobil PWA kullanıyorsanız masaüstü PWA'da da durum farklı değildir. Hatta, duyarlı tasarımı kullandıysanız muhtemelen hazırsınız demektir. Tek kod tabanınız hem masaüstü hem de mobil cihazlarda çalışır. PWA kullanmaya yeni başlıyorsanız PWA'ları oluşturmanın ne kadar kolay olduğuna şaşıracaksınız!

  1. Manifest ekleme
  2. Simge grubu oluşturma
  3. Ortak metin hizmet çalışanı ekleme

Daha sonra, yineleme işlemini uygulayın.

İmzalanmış HTTP Takasları

Web Paketleri adlı yeni bir teknolojinin parçası olan imzalı HTTP Değişimleri (SXG) artık Chrome 73'te kullanılabilir. İmzalanmış HTTP Takası, diğer taraflarca sağlanabilen "taşınabilir" içerik oluşturmayı mümkün kılar ve bu temel noktadır; orijinal sitenin bütünlüğünü ve atıfını korur.

İmzalı Takas: The ssence

Bu işlem, içeriğin kaynağını gönderen sunucudan ayırır, ancak içerik imzalandığı için sanki sunucunuzdan teslim ediliyormuş gibidir. Tarayıcı bu İmzalı Değişim'i yüklediğinde URL'nizi adres çubuğunda güvenli bir şekilde gösterebilir. Bunun nedeni, exchange'deki imzanın içeriğin orijinal olarak kaynağınızdan geldiğini göstermesidir.

İmzalanmış HTTP takasları, kullanıcılar için daha hızlı içerik yayınlama olanağı sunarak sertifikanızın özel anahtarının kontrolünü bırakmak zorunda kalmadan CDN'nin avantajlarından yararlanmanızı sağlar. AMP ekibi, AMP URL'lerini iyileştirmek ve arama sonuçlarındaki tıklamaları hızlandırmak için Google arama sonucu sayfalarında imzalı HTTP exchange'leri kullanmayı planlamaktadır.

Nasıl başlayacağınızla ilgili ayrıntılar için Kinuko'nun İmzalanmış HTTP Takası yayınına göz atın.

Yapılabilir stil sayfaları

Chrome 73'te yeni kullanıma sunulan Yapılabilir Stil Sayfaları, yeniden kullanılabilir stiller oluşturup dağıtmamız için bize yeni bir yol sunuyor. Bu, özellikle Gölge DOM kullanılırken önemli bir noktadır.

JavaScript kullanarak stil sayfaları oluşturmak her zaman mümkün olmuştur. document.createElement('style') kullanarak bir <style> öğesi oluşturun. Ardından, temel CSSStyleSheet örneğine referans almak için ilgili sayfa özelliğine erişin ve stili ayarlayın.

CSS&#39;nin hazırlanmasını ve uygulanmasını gösteren şema

Bu yöntemin kullanılması stil sayfası şişmesine yol açma eğilimindedir. Daha da kötüsü, biraz biçimsiz içeriğin Yapılabilir Stil Sayfaları, paylaşılan CSS stillerini tanımlamayı ve hazırlamayı mümkün kılar. Daha sonra, bu stilleri birden fazla Gölge Köke veya Belge'ye kolaylıkla ve tekrarlamadan uygulayabilirsiniz.

Paylaşılan CSSStyleSheet için yapılan güncellemeler, benimsendiği tüm köklere uygulanır. Ayrıca, sayfa yüklendikten sonra stil sayfası hızlı ve eşzamanlı şekilde kullanılır.

Başlamak çok kolaydır. Yeni bir CSSStyleSheet örneği oluşturun, ardından stil sayfası kurallarını güncellemek için replace veya replaceSync kullanın.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Daha fazla ayrıntı ve kod örnekleri için Jason Miller'ın Constructable Stylesheets: sorunsuz yeniden kullanılabilir stiller yayınına göz atın!

Diğer ölçütler

Bunlar, Chrome 73'te geliştiriciler için yapılan değişikliklerden sadece birkaçı. Elbette bunlar dışında çok daha fazlası var.

  • matchAll(), dize prototipi üzerinde yeni bir normal ifade eşleştirme yöntemidir ve tam eşleşmeleri içeren bir dizi döndürür.
  • <link> öğesi artık HTMLImageElement srcset ve sizes özelliklerine karşılık gelen imagesrcset ve imagesizes özelliklerini desteklemektedir.
  • Blink'in gölge bulanıklaştırma yarıçapı uygulaması artık Firefox ve Safari ile eşleşiyor.
  • Chrome'un kullanıcı arayüzü için koyu mod artık Mac'te desteklenmektedir ve Windows desteği yakında sunulacaktır. Ayrıca, kullanıcının sistem için açık veya koyu renk teması isteyip istemediğini belirlemek için kullanılabilecek bir CSS medya sorgusu (prefers-color-scheme) üzerinde de çalışmalar vardır. Bu hatanın izleme hatası: Chrome ve Firefox için CSS prefers-color-scheme medya özelliği için destek ekleme.

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 74 yayınlanır yayınlanmaz size Chrome'daki yenilikler hakkında bilgi vereceğim.