Chrome 84'teki yenilikler

Pete LePage

Chrome 84 şu anda kararlı kanalında kullanıma sunulmaya başlıyor.

Şunları bilmeniz gerekir:

Ben Pete LePage, evden çalışıyor ve fotoğraf çekiyorum. Birlikte ilerleyelim ve Chrome 84'teki geliştiricilere yönelik yenilikleri görelim!

Uygulama simgesi kısayolları

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

Uygulama simgesi kısayolları, kullanıcıların uygulamanızdaki genel görevleri hızlı bir şekilde başlatmalarını kolaylaştırır. Örneğin, yeni bir tweet oluşturabilir, bir mesaj gönderebilir veya kullanıcıların bildirimlerini görebilirsiniz. Bunlar, 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'inizde yeni bir shortcuts mülkü oluşturun, kısayolu açıklayı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" }
    ]
  },
]

Tüm ayrıntılar için Uygulama kısayollarıyla işleri hızlı bir şekilde tamamlama başlıklı makaleye göz atın.

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 sağlayabilir ve performansı artırabilir.
  • Ayrıca, add ve accumulate seçenekleriyle birleşik modları kullanarak animasyonları birleştirebilirsiniz.

Tüm iyileştirmelerin hakkını veremiyorum veya burada iyi örnekler sunamıyorum, bu nedenle tüm ayrıntılar 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 İçerik Dizine Ekleme API'si ile çevrimdışı kullanılabilen içerik için URL'ler ve meta veriler 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 zaten nelerin bulunduğ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.
}

Tüm ayrıntılar için Çevrimdışı özellikli sayfalarınızı İçerik Dizine Ekleme API'si ile dizine ekleme bölümüne bakın.

Uyanık kalma kilidi API'sı

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

Yemek yapmayı severim ama bir tarifi takip ederken bunu çok sinir bozucu buluyorum. Ekran koruyucu devreye giriyor. Chrome 84'teki kaynak denemesinden de mezun olan uyanık kalma kilidi API'sini kullanarak siteler ekranın kararmasını ve kilitlenmesini önlemek için uyanık kalma kilidi isteyebilir.

Hatta Betty Crocker web sitesi bu durumu bugün kullanıyor ve web.dev adresinde satın alma amacı göstergelerinde %300 artış olduğunu gösteren bir örnek olay yayınladı.

Uyanık kalma kilidi almak için navigator.wakeLock.request() komutunu çağırın, uyanık kalma kilidini "açmak" 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 biraz daha 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

Idle Detection API, bir kullanıcı boşta kaldığında sizi bilgilendirerek bilgisayarından uzakta olabileceğini 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ı Enerji Tasarrufu API'si ile algılama başlıklı makaleyi inceleyin.

Web Derlemesi SIMD'si

Web Assembly SIMD ise bir kaynak denemesi başlatır. Donanımda yaygın olarak kullanılan SIMD talimatlarıyla eşlenen işlemler 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ı, paralel uygulamalar sayfasına göz atın.

Başka pek çok bilgi

Chrome 84 çok büyük, ancak belirtmek 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ıları inceleyin.

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 ve saçımı kestirmeye hala ihtiyacım var, ancak Chrome 85 çıkar çıkmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!