Chrome 80'deki yenilikler

Pete LePage

Chrome 80 şu anda kullanıma sunuluyor ve geliştiricilere yönelik pek çok yeni özellik var!

Aşağıdakiler desteklenmektedir:

Ben Pete LePage. Şimdi Chrome 80'de geliştiricilere yönelik yenilikleri görelim!

Modül çalışanları

Web çalışanları için JavaScript modüllerinin ergonomik ve performans avantajlarına sahip yeni bir modu olan Modül Çalışanları artık kullanılabilir. Çalışan oluşturucu, komut dosyalarının yüklenme ve yürütülme şeklini <script type="module"> ile eşleşecek şekilde değiştiren yeni bir {type: "module"} seçeneğini kabul eder

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

JavaScript modüllerine geçmek, çalışanın yürütülmesini engellemeden kodları geç yükleme için dinamik içe aktarma özelliğinin kullanılabilmesini de sağlar. Daha ayrıntılı bilgi için Jason'ın web.dev adresindeki Threading the web with modül works (web'de modül çalışanlarla iş parçacığı oluşturma) başlıklı yayınına göz atın.

İsteğe bağlı zincirleme

Bir nesnedeki derinlemesine iç içe yerleştirilmiş özellikleri okumaya çalışmak, özellikle de bir şeyin değerlendirilememe olasılığı varsa hataya açık olabilir.

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

Devam etmeden önce her değerin kontrol edilmesi, derinlemesine iç içe yerleştirilmiş bir if ifadesine 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'de, isteğe bağlı zincir adı verilen yeni bir JavaScript özelliği için destek eklendi. İsteğe bağlı zincirleme ile, özelliklerden biri hata bildirmek yerine null veya tanımsız döndürürse tüm sonuç yalnızca tanımsız değerini döndürü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ına göz atın.

Kaynak denemesinin mezuniyetleri

Kaynak Denemesi'nden kararlı hale getirilmiş üç yeni özellik bulunur. Bu sayede, jeton olmadan herhangi bir site tarafından kullanılabilecektir.

Periyodik arka plan senkronizasyonu

İlki, periyodik arka plan senkronizasyonudur. Verileri arka planda düzenli olarak senkronize eder. Böylece bir kullanıcı, yüklü PWA'nızı açtığında her zaman en yeni verilere sahip olur.

Kişi seçici

Sırada, kullanıcıların kişi listelerindeki girişleri seçmelerine ve seçili girişlerin sınırlı ayrıntılarını bir web sitesiyle paylaşmalarına olanak tanıyan isteğe bağlı bir API olan Contact Picker API.

Kullanıcıların yalnızca istedikleri içeriği istedikleri zaman paylaşmalarına olanak tanıyan bu özellik, kullanıcıların arkadaşlarına ve ailelerine ulaşıp onlarla iletişim kurmalarını kolaylaştırır.

Son olarak, İlgili Uygulamaları Yükle yöntemi, web uygulamanızın yerel uygulamanızın bir kullanıcının cihazında yüklü olup olmadığını kontrol etmesini sağlar.

En yaygın kullanım alanlarından biri, yerel uygulamanız yüklü değilse PWA'nızın yüklenmesini teşvik edip etmeyeceğinize karar vermektir. Veya başka bir uygulama tarafından sağlanıyorsa bir uygulamanın bazı işlevlerini devre dışı bırakmak isteyebilirsiniz.

Yeni kaynak denemeleri

İçerik dizine ekleme API'si

PWA'nızda önbelleğe aldığınız içeriği kullanıcılara nasıl bildirirsiniz? Burada bir keşif sorunu var. Uygulamanızı açacağını bilecekler mi? Ya da hangi içerikler mevcut?

İçerik Dizine Ekleme API'si, çevrimdışı özellikli içeriğin URL'lerini ve meta verilerini yerel bir dizine, tarayıcı tarafından yönetilen ve kullanıcı tarafından kolayca görülebilen bir yerel 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 öğe eklemek için Service Worker kaydını almam, ardından index.add öğesini çağırmam ve içerikle ilgili meta verileri sağlamam gerekiyor.

Dizin doldurulduğunda, Android için Chrome'un İndirilenler sayfasında özel bir alanda gösterilir. Tüm ayrıntılar için Jeff'in web.dev adresindeki İçerik Dizine Ekleme API'si ile çevrimdışı özellikli sayfalarınızı dizine ekleme konulu yayınına göz atın.

Bildirim tetikleyicileri

Bildirimler birçok uygulamanın önemli bir parçasıdır. Ancak push bildirimleri yalnızca bağlı olduğunuz ağ kadar güvenilirdir. Bu çoğu durumda işe yarasa da bazen bozulur. Örneğin, uçak modunda olduğunuz için önemli bir etkinliğin size bildirildiği bir takvim hatırlatıcısı gelmezse 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 numaralı telefonu arayın. Bildirim seçeneklerinde TimestampTrigger içeren bir showTrigger mülkü ekleyin. Daha sonra, zaman geldiğinde tarayıcı bildirimi gösterir.

Kaynak denemesinin Chrome 83'te çalışması planlanmıştır. Bu nedenle, tüm ayrıntılar için Tom'un web.dev'deki Bildirim Tetikleyicileri yayınına göz atın.

Diğer kaynak denemeleri

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

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

Kaynak denemesindeki özelliklerin tam listesini inceleyin.

Daha birçok avantaj

Elbette çok daha fazlası var!

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

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 80'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri almak isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 81 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım.