Chrome 84'teki yenilikler

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

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi 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ızda sık yapılan görevlere hızlı bir şekilde başlamalarını kolaylaştırır. Örneğin, yeni tweet oluşturma, mesaj gönderme veya bildirimlerini görme. 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 dosyanızda yeni bir shortcuts özelliği 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ını kullanarak işleri hızlı bir şekilde halletme makalesine göz atın.

Web animasyonları API'sı

Chrome 84, Web Animasyonları API'sine daha önce desteklenmeyen birçok özellik ekliyor.

  • animation.ready ve animation.finished için taahhüt verildi.
  • Tarayıcı artık eski animasyonları temizleyip kaldırabilir, böylece bellekten tasarruf eder ve performansı artırır.
  • Artık animasyonları add ve accumulate seçenekleriyle birleşik modları kullanarak 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 Animasyonları API'sı iyileştirmelerine göz atın.

İçerik dizine ekleme API'si

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

Orijinal denemeden yeni mezun olan İçerik Dizine Ekleme API'si ile çevrimdışı kullanılabilen içeriklerin URL'lerini ve meta verilerini ekleyebilirsiniz. Bu meta veriler kullanılarak içerikler kullanıcıya gösterilerek keşfedilebilirliği artırılır.

Dizine içerik eklemek için Service Worker kaydında index.add() çağrısı yapın ve içerik hakkında 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.

Wake Lock API'si

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

Yemek yapmayı seviyorum ama bir tarifi takip ederken çok sinir bozucu buluyorum ve ekran koruyucu devreye giriyor. Chrome 84'teki kaynak denemesinden de sonlandırılan uyanık kalma kilidi API'si ile siteler, ekranın kararmasını ve kilitlenmesini önlemek için bir uyanık kalma kilidi isteyebilir.

Öyle ki, Betty Crocker web sitesinde bugün bunu kullanıyor ve web.dev'de 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() yöntemini çağırın. Bu işlev, uyanık kalma kilidini "serbest bırakmak" 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();

Tabii ki daha fazlası da var. Bu nedenle Ekran Uyandırma Kilidi API'siyle uyanık kalın'a göz atın, ancak en azından ekranım artık unla kaplanmayacak!

Kaynak denemeleri

Bahsetmek istediğim iki yeni kaynak denemesi var. Kaynak denemelerini yeni kullanmaya başladıysanız Chrome'un kaynak denemelerini kullanmaya başlama başlıklı makaleye göz atın.

Boşta kalma algılama

Boşta Algılama API'sı, kullanıcı boşta kaldığında sizi bilgilendirir ve bilgisayarından uzakta olduğunu belirtir. Bu, sohbet uygulamaları veya sosyal ağ siteleri gibi şeyler için, kullanıcılara kişilerinin müsait olup olmadığını bildirmek 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 ve API ile denemeler yapmaya nasıl başlayabileceğiniz hakkında daha fazla bilgi edinmek için Boşta Kalma Algılama API'si ile etkin olmayan kullanıcıları tespit etme bölümüne bakın.

Web montajı SIMD

Web Assembly SIMD ise bir kaynak denemesi başlatır. Donanımda yaygın olarak kullanılan SIMD talimatlarıyla eşleşen 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.

Daha birçok avantaj

Chrome 84 büyük, ancak vurgulamak istediğim birkaç önemli güncelleme daha var.

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 84'teki 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 ve hala saçını kestirmek istiyorum, ama Chrome 85 çıkar çıkmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!