Chrome 84'teki yenilikler

Pete LePage

Chrome 84, kararlı sürüm olarak kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. Chrome 84'te geliştiriciler için neler yeni olduğuna göz atalım.

Uygulama simgesi kısayolları

Twitter'ın PWA'sı için uygulama simgesi kısayolları

Uygulama simgesi kısayolları, kullanıcıların uygulamanızdaki yaygın görevleri hızlı bir şekilde başlatmasını kolaylaştırır. Örneğin, yeni bir tweet oluşturma, mesaj gönderme veya bildirimlerini görme. Android için Chrome'da desteklenir.

Bu kısayollar, Android'de uygulama simgesine uzun basılarak çağrılır. PWA'nıza kısayol eklemek kolaydır. Web uygulaması manifest dosyanızda yeni bir shortcuts mülkü oluşturun, kısayolu tanımlayın ve simgelerinizi ekleyin.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Ayrıntılı bilgi için Uygulama kısayollarıyla işlerinizi hızlıca halletme başlıklı makaleyi inceleyin.

Web animations API

Chrome 84, Web Animasyonları API'ye daha önce desteklenmeyen bir dizi özellik ekler.

  • animation.ready ve animation.finished için söz verildi.
  • Tarayıcı artık eski animasyonları temizleyip kaldırarak bellek tasarrufu yapabilir ve performansı artırabilir.
  • Ayrıca, add ve accumulate seçenekleriyle birleşik modları kullanarak animasyonları birleştirebilirsiniz.

Tüm iyileştirmeleri burada ayrıntılı olarak açıklayamıyor veya iyi örnekler sunamıyorum. Ayrıntılı bilgi için Chromium 84'teki Web Animations API iyileştirmelerine göz atın.

İçerik dizine ekleme API'si

İçeriğiniz ağ bağlantısı olmadan kullanılabiliyorsa. Ancak kullanıcının bundan haberi yok mu? Gerçekten kullanılabilir mi? Keşif sorunu var.

Orijinal deneme sürümünden yeni çıkan Content Indexing API ile çevrimdışı olarak kullanılabilen içeriklerin URL'lerini ve meta verilerini ekleyebilirsiniz. Bu meta veriler kullanılarak içerik kullanıcıya gösterilir ve içeriğin bulunabilirliği artar.

Dizine içerik eklemek için hizmet çalışanı kaydında index.add() işlevini çağırın ve içerikle ilgili gerekli meta verileri sağlayın.


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

Dizininizde neler olduğunu görmek ister misiniz? Hizmet çalışanı kaydı için index.getAll() numaralı telefonu arayın.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Ayrıntılı bilgi için İnternete bağlı olmayan sayfalarınızı Content Indexing API ile dizine ekleme başlıklı makaleyi inceleyin.

Wake lock API

Betty Crocker web sitesinde uyanık kalma kilidi uygulaması.

Yemek yapmayı seviyorum ancak tarifi takip ederken ekran koruyucunun devreye girmesini çok can sıkıcı buluyorum. Chrome 84'te kaynak denemesinden çıkan uyanık kalma kilidi API'si sayesinde siteler, ekranın karartılmasını ve kilitlenmesini önlemek için uyanık kalma kilidi isteyebilir.

Betty Crocker web sitesi de bu yöntemi kullanıyor ve web.dev'de satın alma niyeti göstergelerinde %300 artış gösteren bir başarılı örnek yayınladı.

Uyandırma kilidi almak için navigator.wakeLock.request() işlevini çağırın. Bu işlev, uyandırma kilidini "salma"k için kullanılan bir WakeLockSentinel nesnesi döndürür.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Elbette bununla ilgili daha fazla bilgi var. Screen Wake Lock API ile uyanık kalma başlıklı makaleyi inceleyin. En azından ekranım artık un içinde kalmayacak.

Kaynak denemeleri

İki yeni kaynak denemesinden bahsetmek istiyorum. Kaynak denemeleri konusunda yeniyseniz Chrome'un kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.

Boşta kalma algılama

Boş Zaman Algılama API'si, bir kullanıcı boştayken sizi bilgilendirerek bilgisayarının başında olmadığını gösterir. Bu özellik, sohbet uygulamaları veya sosyal ağ siteleri gibi platformlarda kullanıcıların, kişilerinin müsait olup olmadığını öğrenmesi için idealdir.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

API hakkında daha fazla bilgi edinmek ve API'yi hemen kullanmaya nasıl başlayabileceğinizi öğrenmek için Etkin Olmayan Kullanıcıları Etkin Olmayan Kullanıcıları Tespit API'si ile Tespit Etme başlıklı makaleyi inceleyin.

Web Assembly SIMD

Web Assembly SIMD ise bir kaynak denemesi başlatır. Donanımda yaygın olarak bulunan SIMD talimatlarıyla eşleşen işlemleri kullanıma sunar. SIMD işlemleri, özellikle multimedya uygulamalarında performansı artırmak için kullanılır.

WebAssembly SIMD hakkında daha fazla bilgi edinmek için WebAssembly SIMD ile hızlı ve paralel uygulamalar başlıklı makaleyi inceleyin.

Başka pek çok bilgi

Chrome 84 önemli bir sürüm olsa da vurgulamak istediğim birkaç önemli güncelleme daha var.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 84'teki 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.

Ben Pete LePage. Saçımı kestirmem gerekiyor ama Chrome 85 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.