Chrome 73'teki yenilikler

Pete LePage

Chrome 73'te aşağıdaki özellikler için destek ekledik:

Çok daha fazlası!

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.

Progresif Web Uygulamaları her yerde kullanılabilir

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 Uygulaması, hızlı ve güvenilir bir şekilde çalışır. Uygulama, ağ bağlantısından bağımsız olarak her zaman aynı hızda yüklenir ve çalışır. Bu siteler, 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 bağlam menüsünden yükleyebilir veya beforeinstallprompt etkinliğini kullanarak yükleme deneyimini doğrudan tanıtabilirsiniz. Yüklenen bir PWA, yerel 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 ve uyanık kalma kilidi gibi şeylere erişmenizi sağlayan yeni web platformu özellikleri eklemek için çalışıyoruz. Ayrıca kullanıcılara PWA'nızın yüklenebileceğini, kuruluşlar için politika yüklemesini ve daha pek çok şeyi bildiren bir adres çubuğuna ambiyans rozeti ekliyoruz.

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ü bilgisayarlarda hem de mobil cihazlarda ç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 işçisi ekleme

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

İmzalanmış HTTP Takasları

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.

İmzalı Değişim: Özet

Bu işlem, içeriğin kaynağını onu ileten sunucudan ayırır, ancak içerik imzalandığı için sanki sunucunuzdan teslim ediliyormuş gibidir. 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 alışverişleri kullanmayı planlıyor.

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

Oluşturulabilir stil sayfaları

Chrome 73'te yeni kullanıma sunulan Oluşturulabilir Stil Sayfaları, yeniden kullanılabilir stiller oluşturmanın ve dağıtmanın yeni bir yolunu sunuyor. Bu, özellikle Shaadow DOM kullanılırken önemli bir nokta.

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 ve stili ayarlamak için e-tablo mülküne erişin.

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

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 CSSStyleSheet güncellemeleri, benimsendiği tüm köklere uygulanır. Stil sayfası yüklendikten sonra hızlı ve eşzamanlı bir şekilde benimsenir.

Başlamak çok kolaydır. Yeni bir CSSStyleSheet örneği oluşturun ve 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 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 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 öğ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.