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'nin bölümlerini işlemsiz olarak işaretlemenize olanak tanır.
  • Navigation API, tek sayfalı uygulamaların gezinme ve URL'deki güncellemeleri yönetmesini kolaylaştırır.
  • Daha pek çok yenilik var.

Adım Pete LePage. Şimdi Chrome 102'deki geliştiriciler için yeniliklere göz atalım.

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üzenleyenler, IDE'ler, metin düzenleyenler 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üne ait 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 yürütülene 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ş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ının her zaman göremediği bir çekmece için inert eklemek, çekmecenin ekran dışındayken klavye kullanıcısının yanlışlıkla etkileşimde bulunamamasını sağlar.

<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'i tanıtıyoruz) başlıklı makaleyi inceleyin.

Birçok web uygulaması, sayfa gezinmesi olmadan URL'yi güncelleme özelliğine ihtiyaç duyar. Bugün History API'yi kullanıyoruz, ancak kullanışsızdır ve her zaman beklendiği gibi çalışmaz. 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;
  }
});

Etkinlik temelde merkezidir ve gezinmenin programatik olarak tetiklendiği durumlarda bile, kullanıcının bağlantıyı tıklama, form gönderme veya geri ve ileri gitme gibi bir işlem gerçekleştirmesi fark etmeksizin her tür gezinme için tetiklenir. Çoğu durumda, kodunuzun bu işlem için tarayıcının varsayılan davranışını geçersiz kılmasına olanak tanır.

Tüm ayrıntılar ve denemeniz için bir demo 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 bu bölümü göstermesini sağlar.

Daha fazla bilgi

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. 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.