Chrome 96'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Sonunda stüdyoda çekim yapıyorum. Şimdi Chrome 96'daki geliştiricilere yönelik yenilikleri görelim.

PWA'lar (Progresif Web Uygulaması) için manifest id

Kullanıcı PWA yüklediğinde, tarayıcının bunu benzersiz bir şekilde tanımlamak için bir yönteme ihtiyacı vardır. Ancak yakın zamana kadar web uygulaması manifest spesifikasyonu bir PWA'nın nasıl tanımlanacağını belirtmiyordu, bu yüzden tarayıcılar karar vermek zorunda kalıyor ve farklı uygulamalara yol açıyordu. Bazı tarayıcılarda start_url, bazılarında ise manifest dosyasının yolu kullanılır.

Bu da yükleme deneyimini bozmadan bu alanlardan ikisinin de değiştirilmesini imkansız kılar. Artık PWA'nız için kullanılan tanımlayıcıyı açık bir şekilde tanımlamanıza olanak tanıyan isteğe bağlı yeni bir id özelliği var.

id özelliğini manifest dosyasına eklemek, start_url öğesine veya manifest dosyasının konumuna bağımlılığı kaldırır ve bu alanların güncellenmesine olanak tanır.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Chrome 96 sürümünden itibaren masaüstü Chromium tabanlı tarayıcılarda id mülkü desteği sunulmaya başlandı. Şu anda benzersiz kimlik olarak manifest URL'sini kullanan mobil destek, 2022'nin ilk yarısında sunulacaktır.

Hesaplanan uygulama kimliğini gösteren Geliştirici Araçları

Üretimde zaten bir PWA'nız varsa ve manifest'inize bir id eklemek istiyorsanız tarayıcı tarafından atanan kimliği kullanmanız gerekir. id dosyasını Geliştirici Araçları'ndaki Uygulama panelinin Manifest bölmesinde bulabilirsiniz.

Yepyeni bir PWA için id özelliğini istediğiniz herhangi bir dize değerine ayarlayabilirsiniz. Ancak bu değeri gelecekte değiştiremeyeceğinizi unutmayın. Bu nedenle, seçiminizi akıllıca yapın.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Daha fazla bilgi için PWA'ları web uygulaması manifest kimliği mülküyle benzersiz şekilde tanımlama konusuna bakın.

PWA'lar (Progresif Web Uygulaması) için URL protokolü işleyicileri

Web uygulamaları, protokol işleyici olarak kaydolmak için navigator.registerProtocolHandler() aracını kullanabilir. Örneğin, Gmail mailto protokolünü kaydedebilir. Ardından, kullanıcı mailto: önekine sahip bir bağlantıyı tıkladığında Gmail açılır ve kullanıcının e-posta göndermesi kolaylaşır.

Chrome 96'dan itibaren PWA, yüklemesinin bir parçası olarak protokol işleyici olarak kaydedilebilir. PWA'nızda bunu yapmak için web uygulaması manifest dosyanıza bir protocol_handlers özelliği ekleyin, işlemek istediğiniz protocol öğesini ve tıklandığında açılması gereken url değerini belirtin.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Burada bazı kısıtlamalar vardır ve herhangi bir protokol kaydedemezsiniz. Bu nedenle, tüm ayrıntıları görmek ve kendi protokollerinizi oluşturmak için web+ söz dizimini nasıl kullanabileceğinizi görmek üzere PWA'lar için URL protokol işleyici kaydı sayfasına göz atın.

Öncelik ipuçları (kaynak denemesi)

Tarayıcı bir web sayfasını ayrıştırıp resimler, komut dosyaları veya CSS gibi kaynakları keşfedip indirmeye başladığında, sayfa yüklemesini optimize etmeyi denemek için onlara bir getirme önceliği atar. Tarayıcılar öncelikleri atama konusunda oldukça iyi ancak her durumda optimum olmayabilir.

Öncelikli İpuçları, Chrome 96'dan itibaren kaynak denemesi olarak kullanıma sunulan deneysel bir özelliktir ve Önemli Web Verileri'nin optimize edilmesine yardımcı olabilir. importance özelliği; CSS, yazı tipleri, komut dosyaları, resimler ve iframe'ler gibi kaynak türlerinin önceliğini belirtmenize olanak tanır.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Örneğin, Google Uçuş Arama sayfasını burada görebilirsiniz. Bu arka plan resmi, en büyük zengin içerikli boyamadır (LCP).

Büyük arka plan resmine sahip Google Uçuş Arama ekran görüntüsü

Öncelik ipuçlarıyla dolu ve bu ipuçları olmadan inceleyelim. Arka plan resminde öncelik high olarak ayarlandığında LCP 2,6 saniyeden 1,9 saniyeye düşer.

Tüm ayrıntılar, kaynak denemesine nasıl kaydolacağınız ve oluşturma performansınızı iyileştirmeye nasıl yardımcı olabileceğiyle ilgili bazı harika örnekler için Fetch Priority API ile kaynak yüklemesini optimize etme bölümüne göz atın.

UA dizesinde Chrome 100 emülasyonu

Gelecek yılın başlarında, üç haneli bir sürüm numarası olan Chrome 100'ü kullanıma sunacağız. Sürüm numaralarını kontrol eden veya UA dizesini ayrıştıran tüm kodlar, üç basamağı işlediğinden emin olmak için kontrol edilmelidir.

Chrome 96'dan itibaren, mevcut sürüm numarasını 100 olarak değiştirecek yeni bir #force-major-version-to-100 işareti vardır. Bu sayede her şeyin beklediğiniz gibi çalıştığından emin olabilirsiniz.

Yeni #force-major-version-to-100 seçeneğini vurgulayan Chrome İşaretleri sayfası

Ayrıntılar için User-Agent dizesinde Chrome ana sürümünü 100'e zorlama başlıklı makaleye göz atın.

Chrome Geliştirici Zirvesi

Chrome Geliştirici Zirvesi sona erdi. Tüm videolar ve içerikler online olarak sunuluyor. Chrome Dev Summit sitesine göz atın. Açılış konuşmasını veya canlı yayını kaçırdıysanız Chrome Geliştiricileri YouTube Kanalı'ndaki CDS Oynatma Listesi'ne göz atın.

Diğer ölçütler

Elbette dahası var.

  • Geri, ileri önbellek (veya bfcache) artık kararlı sürümde kullanılabilir ve Chrome'u hem Firefox hem de Safari ile uyumlu hâle getirir.

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 96'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 97 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!