Chrome 102'deki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • Yüklü PWA'lar dosya işleyiciler olarak kaydedilebilir. Böylece kullanıcılar dosyaları doğrudan diskten kolayca açabilir.
  • inert özelliği, DOM'un bazı bölümlerini eylemsiz olarak işaretlemenize olanak tanır.
  • Gezinme API'si, tek sayfalık uygulamaların URL'de gezinmeyi ve URL güncellemelerini işlemesini kolaylaştırır.
  • Daha fazlası da var.

Ben Pete LePage. Şimdi Chrome 102'deki geliştiriciler için yeni özellikleri birlikte görelim.

File Handling API

File handling API, yüklü PWA'ların işletim sistemine bir dosya işleyici olarak kaydedilmesine olanak tanır. Kayıt işlemi tamamlandıktan sonra kullanıcı, bir dosyayı tıklayarak PWA yüklü olarak açabilir. Bu, resim düzenleyiciler, IDE'ler, metin düzenleyiciler vb. dosyalarla etkileşim kuran PWA'lar için idealdir.

PWA'nıza dosya işleme işlevi eklemek için web uygulaması manifestinizi güncellemeniz ve PWA'nızın işleyebileceği dosya türleri hakkında ayrıntıları içeren bir file_handlers dizisi eklemeniz gerekir. Açılan URL'yi, MIME türlerini, dosya türünü ve başlatma türünü belirtmeniz gerekir. Başlatma türü, birden fazla dosyanın tek bir istemcide mi yoksa birden fazla istemcide mi açılacağını tanımlar.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Daha sonra, PWA kullanıma sunulduğunda bu dosyalara erişmek amacıyla launchQueue nesnesi için bir tüketici belirtmeniz gerekir. Lansmanlar tüketici tarafından işlenene kadar kuyruğa alınır.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Tüm ayrıntılar için Yüklü web uygulamalarının dosya işleyiciler olmasına izin ver sayfasına göz atın.

inert özelliği

inert özelliği, tarayıcıya bir öğeye ait kullanıcı girişi etkinliklerini (odak etkinlikleri ve yardımcı teknolojilerden gelen etkinlikler dahil) yoksaymasını bildiren genel bir HTML özelliğidir.

Bu, kullanıcı arayüzleri oluştururken yararlı olabilir. Örneğin, kalıcı bir iletişim kutusunda odağı, görünür olduğunda kalıcının içine "yakalamak" istersiniz. Kullanıcının her zaman göremediği çekmecelerde inert eklendiğinde, çekmece ekran dışındayken klavye kullanıcısının yanlışlıkla etkileşimde bulunamaması sağlanır.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Burada, inert, ikinci <div> öğesinde bildirilmiştir. Dolayısıyla <button> ve <label> dahil olmak üzere içerisinde bulunan hiçbir içerik, odak alamaz veya tıklanamaz.

inert, Chrome 102'de desteklenir ve hem Firefox'ta hem de Safari'de kullanıma sunulacaktır.

Daha ayrıntılı bilgi için Hareketsizliğe giriş başlıklı makaleyi inceleyin.

Birçok web uygulaması, sayfada gezinme olmadan URL'yi güncelleme yeteneğine bağlıdır. Bugün History API'yi kullanıyoruz ancak kullanışsızdır ve her zaman beklendiği gibi çalışmaz. History API'nin yumuşak yanlarını düzeltmeye çalışmak yerine, Navigation API bu alanı tümüyle elden geçirmiştir.

Gezinme API'sini kullanmak için genel navigation nesnesine bir navigate işleyici ekleyin.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Etkinlik temel olarak merkezidir ve kullanıcının bağlantı tıklama, form gönderme veya gezinme programlı olarak tetiklendiği durumlarda geri ve ileri gitme gibi bir işlem gerçekleştirmiş olması fark etmeksizin her türlü gezinme için tetiklenir. Çoğu durumda, kodunuzun söz konusu işlem için tarayıcının varsayılan davranışını geçersiz kılmasına olanak tanır.

Ayrıntıların tamamı ve deneyebileceğiniz bir demo için Modern istemci tarafı yönlendirme: Navigation API sayfasına göz atın.

Diğer ölçütler

Elbette dahası var.

  • Yeni Sanitizer API'nin amacı, rastgele dizelerin sayfaya güvenli bir şekilde eklenmesi için sağlam bir işlemci geliştirmektir.
  • hidden=until-found özelliği, tarayıcının gizli bölgelerdeki metni aramasını ve bir eşleşme bulunursa o bölümü göstermesini sağlar.

Daha fazla bilgi

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

Abone ol

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

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