Chrome 73'teki yenilikler

Pete LePage

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

• İmzalanmış HTTP takasları ile taşınabilir içerik oluşturma işlemi kolaylaştırıldı.
• Oluşturulabilir stil sayfaları sayesinde dinamik olarak değişen stiller çok daha kolay hale gelir.
• Progresif Web Uygulamaları için Mac desteği kullanıma sunuldu. Bu sayede, PWA'lar tüm masaüstü ve mobil platformlarda destekleniyor. Böylece, web üzerinden dağıtılan yüklenebilir uygulamalar oluşturmak kolaylaşıyor.

Daha birçok özellik de var.

Adım Pete LePage. Chrome 73'teki geliştiricilere yönelik yenilikleri inceleyelim.

Değişiklik günlüğü

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

• Chromium kaynak deposu değişiklik listesi
• Chrome 73 için ChromeStatus.com güncellemeleri
• Chrome 73'te kullanımdan kaldırılan ve kaldırılan özellikler
• Chrome 73 medya güncellemeleri
• Chrome 73'teki JavaScript'de yenilikler

Progresif web uygulamaları her yerde çalışır

Progresif web uygulamaları, doğrudan web üzerinden geliştirilip dağıtılan, uygulama benzeri, yüklenebilir bir deneyim sunar. Chrome 73'te macOS desteğini ekledik. Böylece, Progresif Web Uygulamaları'na tüm masaüstü platformlarında (Mac, Windows, ChromeOS ve Linux) ve mobil cihazlarda destek getirdik. Bu sayede web uygulaması geliştirmeyi basitleştirdik.

Progresif Web Uygulamaları hızlı ve güvenilirdir. Ağ bağlantısından bağımsız olarak her zaman aynı hızda yüklenir ve çalışır. Cihaz özelliklerinden tam olarak yararlanan modern web özellikleri aracılığıyla zengin ve ilgi çekici deneyimler sunarlar.

Kullanıcılar PWA'nızı Chrome'un bağlam menüsünden yükleyebilir veya beforeinstallprompt etkinliğini kullanarak yükleme deneyimini doğrudan tanıtabilirsiniz. Yüklenen bir PWA, yerel bir uygulama gibi davranmak için işletim sistemiyle entegre olur: Kullanıcılar bu uygulamaları 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österilebilir vb.

Web'de sunulan modern uygulamalar için sağlam bir temel sağlamak amacıyla web ile yerel uygulamalar arasındaki yetenek açığını kapatmak istiyoruz. Dosya sistemi, uyandırma kilidi, kullanıcılara PWA'nızın yüklenebileceğini bildirmek için adres çubuğuna ortam rozeti ekleme, kuruluşlar için politika yükleme ve birçok özellik gibi öğelere erişim sağlayan yeni web platformu özellikleri eklemek için çalışıyoruz.

Halihazırda mobil PWA geliştiriyorsanız masaüstü PWA'da da aynı adımları uygulayabilirsiniz. Hatta duyarlı tasarım kullandıysanız muhtemelen hazırsınız demektir. Tek kod tabanınız hem masaüstünde hem de mobilde çalışır. PWA'ları kullanmaya yeni başladıysanız bunların ne kadar kolay oluşturulduğuna şaşıracaksınız.

1. Manifest ekleme
2. Simge grubu oluşturma
3. Hazır şablon hizmet çalışanı ekleme

Ardından, bu bilgilerden yola çıkarak tekrarlayın.

İmzalanmış HTTP Takası

Web Paketleri adlı yeni bir teknolojinin parçası olan İmzalı HTTP Takası (SXG), artık Chrome 73'te kullanılabilir. İmzalanmış HTTP Takası, diğer taraflarca yayınlanabilecek "taşınabilir" içerikler oluşturmayı mümkün kılar. Bu, asıl sitenin bütünlüğünü ve ilişkilendirmesini koruması açısından önemli bir özelliktir.

Bu işlem, içeriğin kaynağını sunan sunucudan ayırsa da imzalandığı için sunucunuzdan yayınlanmış gibi görünür. Tarayıcı bu imzalı takası yüklediğinde, URL'nizi adres çubuğunda güvenli bir şekilde gösterebilir. Bunun nedeni, takastaki imzanın içeriğin orijinal olarak kaynağınızdan geldiğini belirtmesidir.

İmzalı HTTP takasları, kullanıcılara daha hızlı içerik yayınlama olanağı tanır. Böylece, sertifikanızın özel anahtarının kontrolünü vermek zorunda kalmadan CDN'nin avantajlarından yararlanabilirsiniz. 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 takasları kullanmayı planlıyor.

Başlama hakkında ayrıntılı bilgi için Kinuko'nun İmzalanmış HTTP Takasları başlıklı makalesine göz atın.

Oluşturulabilir stil sayfaları

Chrome 73'te kullanıma sunulan derlenebilir stil sayfaları, yeniden kullanılabilir stiller oluşturmak ve dağıtmak için yeni bir yöntem sunar. Bu özellikle Shadow DOM kullanılırken önemlidir.

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

Bu yöntemin kullanılması, stil sayfasının şişmesine neden olur. Daha da kötüsü, stili olmayan içeriğin yanıp sönmesine neden olur. Oluşturulabilir stil sayfaları, paylaşılan CSS stillerini tanımlayıp hazırlamayı ve ardından bu stilleri birden fazla gölge köküne veya dokümana kolayca ve kopya oluşturmadan uygulamayı mümkün kılar.

Paylaşılan bir CSSStyleSheet'teki güncellemeler, benimsendiği tüm köklere uygulanır ve e-tablo yüklendikten sonra stil sayfası benimseme işlemi hızlı ve senkronize bir şekilde gerçekleşir.

Başlamak için yeni bir CSSStyleSheet örneği oluşturun, ardından stil sayfası kurallarını güncellemek için replace veya replaceSync'yi 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 bilgi ve kod örneği için Jason Miller'ın Oluşturulabilir stil sayfaları: sorunsuz şekilde yeniden kullanılabilir stiller başlıklı makalesine göz atın.

Diğer özellikler

Bunlar, Geliştiriciler için Chrome 73'teki değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

• matchAll(), dize prototipinde yeni bir normal ifade eşleme yöntemidir ve eşleşmelerin tamamını içeren bir dizi döndürür.
• <link> öğesi artık HTMLImageElement öğesinin srcset ve sizes özelliklerine karşılık gelen imagesrcset ve imagesizes özelliklerini desteklemektedir.
• Blink'in gölge bulanıklık 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. Windows desteği de yakında kullanıma sunulacaktır. Ayrıca, kullanıcının sistemde açık veya koyu renk teması kullanılmasını isteyip istemediğini algılamak için kullanılabilecek bir CSS medya sorgusu (prefers-color-scheme) üzerinde de çalışmalarımız devam ediyor. Bununla ilgili izleme hatası: CSS prefers-color-scheme medya özelliği için destek ekleme (Chrome ve Firefox için).

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 74 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.