Chrome 102'deki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • Yüklü PWA'lar dosya işleyici olarak kaydedilebilir. Bu sayede kullanıcılar dosyaları doğrudan diskten açabilir.
  • inert özelliği, DOM'un bölümlerini hareketsiz olarak işaretlemenize olanak tanır.
  • Navigation API, tek sayfalı uygulamaların gezinme ve URL'deki güncellemeleri yönetmesini kolaylaştırır.
  • Bunun gibi çok daha fazla özellik var.

Adım Pete LePage. Chrome 102'deki geliştiricilere yönelik yenilikleri inceleyelim.

File Handling API

File Handling API, yüklü PWA'ların işletim sistemine dosya işleyici olarak kaydolmasına olanak tanır. Kullanıcılar, kayıt olduktan sonra bir dosyayı tıklayarak yüklü PWA ile açabilir. Bu, dosyalarla etkileşime geçen PWAs (ör. resim düzenleyiciler, IDE'ler, metin düzenleyiciler vb.) için mükemmeldir.

PWA'nıza dosya işleme işlevi eklemek için web uygulaması manifest'inizi güncellemeniz ve PWA'nızın işleyebileceği dosya türleriyle ilgili ayrıntıları içeren bir file_handlers dizisi eklemeniz gerekir. Açılacak URL'yi, mime türlerini, dosya türü için bir simgeyi 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"
  }
]

Ardından, PWA başlatılırken bu dosyalara erişmek için launchQueue nesnesi için bir tüketici belirtmeniz gerekir. Lansmanlar, tüketici tarafından işlenene kadar sıraya 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şleyicisi olmasına izin verme başlıklı makaleyi inceleyin.

inert mülkü

inert mülkü, tarayıcıya bir öğeyle ilgili kullanıcı girişi etkinliklerini (odak etkinlikleri ve yardımcı teknolojilerden gelen etkinlikler dahil) yoksaymasını söyleyen global bir HTML özelliğidir.

Bu, kullanıcı arayüzleri oluştururken yararlı olabilir. Örneğin, modal iletişim kutusunda, görünür olduğunda odağı modal içinde "hapsetmek" istersiniz. Alternatif olarak, kullanıcı tarafından her zaman görülemeyen bir çekmece için inert eklemek, çekmece ekranda değilken klavye kullanıcısının yanlışlıkla çekmeceyle etkileşime geçmesini engeller.

<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 tanımlanmıştır. Bu nedenle, <button> ve <label> dahil olmak üzere içindeki tüm içerikler odağa alınamaz veya tıklanamaz.

inert, Chrome 102'de desteklenir ve hem Firefox hem de Safari'ye eklenecektir.

Daha fazla bilgi için Introducing inert (İnert özelliğini kullanıma sunuyoruz) başlıklı makaleyi inceleyin.

Birçok web uygulaması, sayfa gezinmesi olmadan URL'yi güncelleme özelliğine ihtiyaç duyar. Şu anda History API'yi kullanıyoruz ancak bu API hantal ve her zaman beklendiği gibi çalışmıyor. Navigation API, History API'nin eksikliklerini gidermeye çalışmak yerine bu alanı tamamen yeni baştan ele alıyor.

Navigation API'yi kullanmak için genel navigation nesnesine bir navigate dinleyici 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;
  }
});

Bu etkinlik temel olarak merkezidir ve kullanıcının bir bağlantıyı tıklama, form gönderme veya geri ve ileri gitme gibi bir işlem gerçekleştirmesi ya da gezinme işlemi programlı olarak tetiklendiğinde bile tüm gezinme türleri için tetiklenir. Çoğu durumda, kodunuzun tarayıcıda bu işlem için varsayılan davranışı geçersiz kılmasına olanak tanır.

Ayrıntılı bilgi ve denemeniz için Modern istemci tarafı yönlendirme: Navigation API başlıklı makaleyi inceleyin.

Diğer özellikler

Elbette daha birçok özellik var.

  • Yeni Sanitizer API, rastgele dizelerin bir sayfaya güvenli bir şekilde eklenmesi için sağlam bir işlemci oluşturmayı amaçlamaktadır.
  • hidden=until-found özelliği, tarayıcının gizli bölgelerde metin aramasını ve eşleşme bulunursa ilgili bölümü göstermesini sağlar.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 102'deki 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 103 sürümü kullanıma sunulduğunda Chrome'daki yenilikleri size buradan bildireceğim.