Chrome 80'deki yenilikler

Pete LePage

Chrome 80 kullanıma sunuldu. Geliştiriciler için birçok yeni özellik bulunuyor.

Aşağıdakiler için destek sunulur:

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

Modül çalışanları

JavaScript modüllerinin ergonomi ve performans avantajlarını sunan, web çalışanları için yeni bir mod olan Modül Çalışanları artık kullanıma sunuldu. Worker yapıcısı, <script type="module"> ile eşleşecek şekilde komut dosyalarının yükleme ve yürütme şeklini değiştiren yeni bir {type: "module"} seçeneğini kabul eder.

const worker = new Worker('worker.js', {
  type: 'module'
});

JavaScript modüllerine geçiş, işleyicinin yürütülmesini engellemeden, gecikmeli yükleme kodu için dinamik içe aktarma özelliğinin kullanılmasını da sağlar. Daha fazla bilgi için Jason'ın web.dev'deki Modül işleyicilerle web'de iş parçacıkları oluşturma başlıklı makalesine göz atın.

İsteğe bağlı zincirleme

Bir nesnede derin iç içe yerleştirilmiş özellikleri okumaya çalışmak, özellikle de bir şeyin değerlendirilme olasılığı varsa hataya yol açabilir.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Devam etmeden önce her değeri kontrol etmek, kolayca derin iç içe yerleştirilmiş bir if ifadeye dönüşür veya try / catch bloğu gerektirir.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80, isteğe bağlı zincirleme adlı yeni bir JavaScript özelliği için destek ekler. İsteğe bağlı zincirleme kullanıldığında, özelliklerden biri null veya undefined döndürürse hata yerine tüm ifade undefined döndürülür.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Tüm ayrıntılar için v8 blogundaki İsteğe Bağlı Zincirleme blog yayınını inceleyin.

Origin deneme sürümünden geçişler

Kaynak denemesinden kararlı sürüme geçen üç yeni özellik, jeton olmadan herhangi bir site tarafından kullanılabilmesini sağlar.

Periyodik arka plan senkronizasyonu

İlk olarak periyodik arka plan senkronizasyonu'ndan bahsedelim. Bu özellik, verileri arka planda düzenli olarak senkronize eder. Böylece, kullanıcılar yüklü PWA'nızı açtığında her zaman en güncel verilere sahip olur.

Kişi seçici

Sırada, kullanıcıların kişi listelerinden giriş seçmesine ve seçilen girişlerle ilgili sınırlı bilgileri bir web sitesiyle paylaşmasına olanak tanıyan isteğe bağlı bir API olan Contact Picker API var.

Kullanıcıların istediklerini istedikleri zaman paylaşmasına olanak tanır ve kullanıcıların arkadaşları ve aileleriyle bağlantı kurmasını kolaylaştırır.

Son olarak, Yüklü İlgili Uygulamaları Al yöntemi, web uygulamanızın yerel uygulamanızın kullanıcının cihazında yüklü olup olmadığını kontrol etmesine olanak tanır.

En yaygın kullanım alanlarından biri, doğal uygulamanız yüklü değilse PWA'nızın yüklenmesini tanıtıp tanıtmayacağınıza karar vermektir. Alternatif olarak, diğer uygulama tarafından sağlanan bir uygulamanın bazı işlevlerini devre dışı bırakmak isteyebilirsiniz.

Yeni kaynak denemeleri

İçerik dizine ekleme API'si

Kullanıcılara, PWA'nızda önbelleğe aldığınız içerikleri nasıl bildirirsiniz? Burada bir keşif sorunu var. Kullanıcılar uygulamanızı açmayı bilecek mi? Hangi içerikler mevcut?

İçerik Dizine Ekleme API'si, çevrimdışı içeriklerin URL'lerini ve meta verilerini tarayıcı tarafından yönetilen ve kullanıcı tarafından kolayca görülebilen yerel bir dizine eklemenize olanak tanıyan yeni bir kaynak denemesidir.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Dizine bir şey eklemek için servis çalışanı kaydını almam, ardından index.add işlevini çağırıp içerikle ilgili meta verileri sağlamam gerekir.

Dizine eklendikten sonra Chrome for Android'in İndirmeler sayfasının özel bir alanında gösterilir. Ayrıntılı bilgi için Jeff'in web.dev'deki Content Indexing API ile çevrimdışı özellikli sayfalarınızı dizine ekleme başlıklı makalesine göz atın.

Bildirim tetikleyicileri

Bildirimler, birçok uygulamanın önemli bir parçasıdır. Ancak push bildirimleri, bağlı olduğunuz ağ kadar güvenilirdir. Bu yöntem çoğu durumda işe yarar ancak bazen çalışmayabilir. Örneğin, uçak modunda olduğunuz için önemli bir etkinlikle ilgili sizi bilgilendiren bir takvim hatırlatıcısı gönderilmezse etkinliği kaçırabilirsiniz.

Bildirim tetikleyicileri, bildirimleri önceden planlamanıza olanak tanır. Böylece işletim sistemi, ağ bağlantısı olmasa veya cihaz pil tasarrufu modunda olsa bile bildirimi doğru zamanda gönderir.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Bildirim planlamak için hizmet çalışanı kaydında showNotification işlevini çağırın. Bildirim seçeneklerinde, TimestampTrigger içeren bir showTrigger mülkü ekleyin. Belirtilen tarih geldiğinde tarayıcı bildirimi gösterir.

Kaynak denemesinin Chrome 83'e kadar sürmesi planlanmaktadır. Tüm ayrıntılar için Tom'un web.dev'deki Bildirim Tetikleyicileri makalesine göz atın.

Diğer kaynak denemeleri

Chrome 80'de başlayan birkaç kaynak denemesi daha vardır:

  • Web Serisi
  • PWA'ların dosya işleyici olarak kaydedilebilmesi
  • Kişi seçici için yeni özellikler

Kaynak deneme sürümündeki özelliklerin tam listesini inceleyin.

Başka pek çok bilgi

Elbette daha birçok özellik var.

  • Artık #:~:text=something kullanarak doğrudan bir sayfadaki metin parçalarına bağlantı verebilirsiniz. Chrome, metin parçasının ilk örneğine gidip bu örneği vurgular. Örneğin https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Masaüstü PWA'larında display: minimal-ui ayarını yaptığınızda, yüklü PWA'nın başlık çubuğuna geri ve yeniden yükle düğmesi eklenir.
  • Chrome artık favori simgesi olarak SVG resimlerinin kullanılmasını destekliyor.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 80'deki 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 81 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.