Chrome 96'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Sonunda stüdyoda çekim yapıyorum. Chrome 96'ta geliştiriciler için neler yeni olduğuna göz atalım.

PWA'lar için manifest id

Kullanıcı bir PWA yüklediğinde tarayıcının bu uygulamayı benzersiz şekilde tanımlayabilmesi gerekir. Ancak yakın zamana kadar web uygulaması manifest spesifikasyonu, bir PWA'nın nasıl tanımlanacağını belirtmediğinden, karar verme işlemi tarayıcılara bırakılmış ve farklı uygulamalara yol açmıştı. Bazı tarayıcılarda start_url kullanılırken diğerlerinde manifest dosyasının yolu kullanılır.

Bu nedenle, yükleme deneyimini bozmadan bu alanların hiçbirini değiştirmek mümkün değildir. Artık PWA'nız için kullanılan tanımlayıcıyı açıkça tanımlamanıza olanak tanıyan yeni bir isteğe bağlı id mülkü var.

id mülkünü manifest'e eklemek, manifest'in start_url veya konumuna olan bağımlılığı ortadan kaldırır ve bu alanların güncellenmesini mümkün kılar.

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

id mülkü için destek, Chrome 96'dan itibaren Chromium tabanlı masaüstü tarayıcılarda kullanıma sunulur. Şu anda benzersiz kimlik olarak manifest URL'sini kullanan mobil cihaz desteği 2022'nin ilk yarısında kullanıma sunulacaktır.

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

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

Yepyeni bir PWA için id değerini istediğiniz dize değerine ayarlayabilirsiniz. Ancak bunu ileride değiştiremeyeceğinizi unutmayın. Bu nedenle, seçiminizi dikkatli yapın.

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

Daha fazla bilgi için Web uygulaması manifest kimliği mülküyle PWA'ları benzersiz şekilde tanımlama başlıklı makaleyi inceleyin.

PWA'lar için URL protokolü işleyicileri

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

Chrome 96'dan itibaren PWA'lar, yüklemelerinin bir parçası olarak protokol işleyici olarak kaydedilebilir. PWA'nızda bunu yapmak için web uygulaması manifest dosyanıza bir protocol_handlers mülkü ekleyin, işlemek istediğiniz protocol'ı ve tıklandığında açılması gereken url'yi 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 istediğiniz protokolü kaydedemezsiniz. Bu nedenle, tüm ayrıntılar ve kendi protokollerinizi oluşturmak için web+ söz dizimini nasıl kullanabileceğiniz hakkında bilgi edinmek üzere PWA'lar için URL protokol işleyici kaydı başlıklı makaleyi inceleyin.

Öncelik ipuçları (kaynak denemesi)

Bir tarayıcı, bir web sayfasını ayrıştırıp resim, komut dosyası veya CSS gibi kaynakları keşfetmeye ve indirmeye başladığında, sayfa yüklemesini optimize etmek için bu kaynaklara bir getirme önceliği atar. Tarayıcılar öncelik atama konusunda oldukça iyidir ancak her durumda optimum olmayabilir.

Öncelik İpuçları, Chrome 96'dan itibaren kaynak denemesi olarak kullanılabilen deneysel bir özelliktir ve Core Web Vitals'ı optimize etmenize yardımcı olabilir. importance özelliği, CSS, yazı tipleri, komut dosyaları, resimler ve iFrame'ler gibi kaynak türleri için önceliği 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 bulabilirsiniz. Bu arka plan resmi, Largest Contentful Paint'tir (LCP).

Büyük arka plan resmi içeren Google Uçuş Arama ekran görüntüsü

Öncelik ipuçlarıyla ve ipuçları olmadan nasıl yüklendiğini görelim. Arka plan resminin önceliği high olarak ayarlandığında LCP 2,6 saniyeden 1,9 saniyeye düşer.

Tüm ayrıntılar, kaynak denemesine kaydolma ve bu özelliğin oluşturma performansınızı iyileştirmeye nasıl yardımcı olabileceğine dair bazı mükemmel örnekler için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

UA dizesinde Chrome 100'ü taklit etme

Gelecek yılın başlarında, üç haneli sürüm numarası olan Chrome 100'e ulaşacağız. Sürüm numaralarını kontrol eden veya UA dizesini ayrıştıran tüm kodlar, üç basamaklı olduğundan emin olmak için kontrol edilmelidir.

Chrome 96'dan itibaren, mevcut sürüm numarasını 100 olarak değiştirecek yeni bir işaret #force-major-version-to-100 eklendi. Böylece, her şeyin beklendiği gibi çalıştığından emin olabilirsiniz.

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

Ayrıntılar için User-Agent dizesinde Chrome ana sürümünü 100 olarak zorlama başlıklı makaleyi inceleyin.

Chrome Geliştirici Zirvesi

Chrome Geliştirici Zirvesi sona erdi. Tüm videolar ve içerikler internette mevcuttur. Chrome Dev Summit sitesine göz atın. Açılış konuşmasını veya canlı yayını kaçırmadıysanız Chrome Developers YouTube kanalındaki CDS oynatma listesine göz atın.

Diğer özellikler

Elbette daha birçok özellik var.

  • Geri, ileri önbelleği (bfcache) artık kararlı sürümde kullanıma sunuldu ve Chrome'u hem Firefox hem de Safari ile uyumlu hale getirdi.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 96'taki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

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

Adım Pete LePage. Chrome 97 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.