Chrome 79'daki yenilikler

Chrome 79 kullanıma sunuluyor!

Ben Pete LePage. Şimdi Chrome 79'daki geliştiricilere özel yenilikleri görelim!

Maskelenebilir Simgeler

Android O veya sonraki bir sürümü çalıştırıyorsanız ve Progresif Web Uygulaması yüklediyseniz simgenin çevresindeki rahatsız edici beyaz daireyi fark etmişsinizdir.

Neyse ki Chrome 79, yüklenen Progresif Web Uygulamaları için maskelenebilir simgeleri destekliyor.Simgenizi, güvenli bölgeye (yani çapı zeminin% 80'ini kaplayan bir daire) sığacak şekilde tasarlamanız gerekir.

Ardından, web uygulaması manifest dosyasında simgeye yeni bir purpose özelliği 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, CSS Püf Noktaları'nda Maskable Simgeler: Android Adaptive Icons for Your PWA (Progresif Web'iniz İçin Uyarlanabilir Simgeler) başlıklı mükemmel bir yayına sahip. Simgelerinizin sığdığından emin olmak için bunları test etmek üzere kullanabileceğiniz mükemmel bir araç var.

Web XR

Artık WebXR Device API'yi kullanarak akıllı telefonlar ve başa takılan ekranlar için etkileyici deneyimler oluşturabilirsiniz.

WebXR, eksiksiz bir sürükleyici deneyim yelpazesi sunuyor. Artırılmış gerçeklik kullanarak, yeni bir koltuğu satın almadan önce evinizde nasıl görüneceğine bakmaktan sanal gerçeklik oyunlarına, 360 derece filmlere ve daha pek çok şey yapabilirsiniz.

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ız için bir fırsat sunar. Ayrıca sizin de bu özelliklerin daha geniş çapta dağıtımda kullanılabilirliği ve etkinliğiyle ilgili geri bildirim sağlamanıza olanak tanır.

Deneysel özellikler genellikle yalnızca bir bayrak arkasında kullanılabilir. Ancak bir özellik için Kaynak Denemesi sunduğumuzda, özelliği kaynağınızdaki tüm kullanıcılar için etkinleştirmek amacıyla söz konusu kaynak denemesine kaydolabilirsiniz.

Kaynak denemesine katılmak, beta testi kullanıcılarınızın Chrome'da özel işaretleri çevirmelerine gerek kalmadan deneme süresi boyunca deneyebilecekleri demolar ve prototipler oluşturmanıza olanak tanır.

Web Geliştiricileri İçin Kaynak Denemeleri Kılavuzu'nda kaynak denemeleri hakkında daha fazla bilgi bulabilirsiniz. Etkin kaynak denemelerinin bir listesini görebilir ve Chrome Kaynak Denemeleri sayfasında bunlara kaydolabilirsiniz.

Uyandırma Kilidi

Google Slaytlar'la ilgili en çok kızdığım şeylerden biri, tek bir slaytın üstünde çok uzun süre açık bırakırsanız ekran koruyucunun devreye girmesidir. Devam etmeden önce bilgisayarınızın kilidini açmanız gerekir. Öf.

Ancak yeni Wake Lock API'si ile bir sayfa kilit isteyebilir ve ekranın kararmasını veya ekran koruyucunun devreye girmesini engelleyebilir. Slaytlar için idealdir, ancak talimatları uygularken ekranı açık tutmak isteyebileceğiniz yemek tarifi siteleri gibi yerlerde de işe yarar.

Uyanık kalma kilidi istemek için navigator.wakeLock.request() yöntemini ç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 ayrılana veya siz daha önce kaydettiğiniz WakeLockSentinel nesnesinde release çağrısı yapana 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ği olan 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 şekilde tarayıcı, sayfanın geri kalanını işlemeye daha fazla zaman ayırarak performansı artırır.

rendersubtree, invisible değerine ayarlandığında öğenin içeriği çizilmez veya isabet testi yapılmaz. Böylece oluşturma optimizasyonlarına izin verilir.

rendersubtree öğesinin activatable olarak değiştirilmesi, invisible özelliğini kaldırıp içeriği oluşturarak içeriği görünür hale getirir.

Chrome Geliştirici Zirvesi 2019

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

Jake, ekibimizin en yeni üyesi Surjiko da dahil olmak üzere görüşmeler arasındaki eğlenceli işlerinin yer aldığı harika bir Twitter ileti dizisi de hazır.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerin yalnızca bazıları anlatılmıştır. Chrome 78'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri edinmek isterseniz 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. Chrome 80 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.