Chrome 79'daki yenilikler

Pete LePage

Chrome 79 kullanıma sunuldu.

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

Maskelenebilir Simgeler

Android O veya sonraki bir sürümü kullanıyorsanız ve Progressive Web Uygulaması yüklediyseniz simgenin etrafındaki can sıkıcı beyaz daireyi fark etmişsinizdir.

Neyse ki Chrome 79, artık yüklü Progressive Web Uygulamaları için maskelenebilir simgeleri destekliyor. Simgenizi, güvenli alana sığacak şekilde tasarlamanız gerekir. Bu alan, temel olarak kanvasın% 80'i kadar çapa sahip bir dairedir.

Ardından, web uygulaması manifest dosyasında simge için yeni bir purpose mülkü eklemeniz ve değerini maskable olarak ayarlamanız gerekir.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes'in CSS Tricks'te yer alan Maskelenebilir Simgeler: PWA'nız için Android Uyumlu Simgeler başlıklı makalesinde tüm ayrıntılar yer alıyor. Ayrıca, simgeleri uygun olduklarından emin olmak için test etmek üzere kullanabileceğiniz mükemmel bir araç da bu makalede bulunuyor.

Web XR

Artık WebXR Device API ile akıllı telefonlar ve kafaya takılan ekranlar için etkileyici deneyimler oluşturabilirsiniz.

WebXR, sürükleyici bir deneyim yelpazesi sunuyor. Yeni bir koltuğu satın almadan önce, artırılmış gerçeklikten yararlanarak evinizde nasıl görüneceğine bakmak, sanal gerçeklik oyunları, 360 derecelik filmler ve daha fazlası sizi bekliyor.

Yeni API'yi kullanmaya başlamak için Sanal Gerçeklik Web'e Geliyor başlıklı makaleyi okuyun.

Yeni kaynak denemeleri

Kaynak denemeleri, deneysel özellikleri ve API'leri doğrulamamıza olanak tanır. Ayrıca, bu özelliklerin kullanılabilirliği ve daha geniş bir dağıtımdaki etkinliği hakkında geri bildirimde bulunmanızı sağlar.

Deneysel özellikler genellikle yalnızca bir işaretle kullanılabilir. Ancak bir özellik için kaynak deneme sürümü sunduğumuzda, özelliği kaynağınızdaki tüm kullanıcılar için etkinleştirmek üzere bu kaynak deneme sürümüne kaydolabilirsiniz.

Kaynak deneme sürümünü etkinleştirmek, beta test kullanıcılarınızın Chrome'da özel işaretler etkinleştirmelerine gerek kalmadan deneme süresi boyunca deneyebilecekleri demolar ve prototipler oluşturmanıza olanak tanır.

Kaynak denemeleri hakkında daha fazla bilgiyi Web Geliştiricileri İçin Kaynak Deneme Kılavuzu'nda bulabilirsiniz. Etkin kaynak denemelerinin listesini görebilir ve Chrome Kaynak Deneme Sürümleri sayfasından bu denemelere kaydolabilirsiniz.

Uyanık Kalma Kilidi

Google Slaytlar'daki en can sıkıcı özelliklerden biri, tek bir slaytta çok uzun süre açık bırakırsanız ekran koruyucunun devreye girmesidir. Devam edebilmek için bilgisayarınızın kilidini açmanız gerekir. Yine mi?

Ancak yeni Wake Lock API ile bir sayfa kilit isteyebilir ve ekranın kararmasını veya ekran koruyucunun etkinleşmesini engelleyebilir. Slaytlar için mükemmeldir, ancak talimatları uygularken ekranın açık kalmasını isteyebileceğiniz tarifler gibi siteler için de faydalıdır.

Uyanık kalma kilidi istemek için navigator.wakeLock.request() öğesini çağırmanız ve döndürdüğü WakeLockSentinel nesnesini kaydetmeniz gerekir.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Kilit, kullanıcı sayfadan çıkana veya daha önce kaydettiğiniz WakeLockSentinel nesnesi üzerinde release çağrılana kadar korunur.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Daha fazla bilgiyi web.dev/wakelock adresinde bulabilirsiniz.

rendersubtree özellik

DOM'un bir bölümünün hemen oluşturulmasını istemediğiniz durumlar olabilir. Örneğin, büyük miktarda içeriğe sahip kaydırıcılar veya herhangi bir zamanda içeriğin yalnızca bir kısmının görünür olduğu sekmeli kullanıcı arayüzleri.

Yeni rendersubtree özelliği, tarayıcıya bu alt ağacı oluşturmayı atlayabileceğini bildirir. Bu, tarayıcının sayfanın geri kalanını işlemeye daha fazla zaman harcamasına olanak tanıyarak performansı artırır.

rendersubtree invisible olarak ayarlandığında öğenin içeriği çizilmez veya isabet testi uygulanmaz. Bu sayede oluşturma optimizasyonları yapılabilir.

rendersubtree değerini activatable olarak değiştirdiğinizde invisible özelliği kaldırılır ve içerik oluşturulur. Böylece içerik görünür hale gelir.

Chrome Geliştirici Zirvesi 2019

Chrome Dev Summit'i kaçırdıysanız tüm konuşmaları YouTube kanalımızda bulabilirsiniz.

Jake'in, ekibimizin yeni üyesi Surjiko da dahil olmak üzere konuşmalar arasında gerçekleşen tüm eğlenceli anların yer aldığı harika bir Twitter ileti dizisi de var.

Daha fazla bilgi

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