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 simgeye 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 harika 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, çok çeşitli sürükleyici deneyimler sunar. Artırılmış gerçekliği kullanarak yeni bir kanepenin satın almadan önce evinizde nasıl görüneceğini görmenin yanı sıra sanal gerçeklik oyunları ve 360 derecelik filmler gibi birçok özelliği kullanabilirsiniz.

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 etmeden önce bilgisayarınızın kilidini açmanız gerekir. Hay aksi.

Ancak yeni Wake Lock API ile bir sayfa kilit isteyebilir ve ekranın kararmasını veya ekran koruyucunun etkinleşmesini engelleyebilir. Bu özellik, Slaytlar için mükemmeldir ancak talimatları uygularken ekranı açık tutmak isteyebileceğiniz yemek tarifi siteleri gibi yerlerde de faydalıdır.

Uyandırma kilidi isteğinde bulunmak için navigator.wakeLock.request() işlevini ç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, çok fazla içeriğe sahip kaydırma çubuğu veya belirli 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 sayede tarayıcı, sayfanın geri kalanını işlemek için daha fazla zaman harcayarak performansı artırır.

rendersubtree invisible olarak ayarlandığında öğenin içeriği çizilmez veya isabet testi yapılmaz. 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 geç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.