Chrome 91'deki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 91'deki geliştiricilere yönelik yenilikleri görelim!

File System Access API için önerilen adlar

Bu yıl Fugu projesinden çıkan en sevdiğim API'lerden biri Dosya Sistemi Erişimi API'leri. Kullanıcı izin verdikten sonra, uygulamalar yüklü diğer uygulamaların yaptığı gibi kullanıcının yerel cihazındaki dosyalarla etkileşimde bulunabilir. Bu sayede daha doğal bir kullanıcı deneyimi oluşturabilirsiniz.

Chrome 91'den itibaren, etkileşimde bulunulacak bir dosyanın veya dizinin adını ve konumunu artık önerebilirsiniz. Bunu yapmak için showSaveFilePicker seçenekleri kapsamında bir suggestedName özelliği iletin.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Varsayılan başlangıç dizini için de aynı durum geçerlidir. Örneğin, bir metin düzenleyici büyük olasılıkla documents klasöründe dosya kaydetme veya dosya açma iletişim kutusunu başlatmak ister. Ancak resim düzenleyiciler muhtemelen pictures klasöründen başlamak ister. Bir startIn özelliği ileterek varsayılan bir başlangıç dizini önerebilirsiniz.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Tüm ayrıntılar için Tom'un Dosya Sistemi Erişimi yayınına göz atın.

Panodaki dosyalar okunuyor

Chrome 91'e gelen dosyalarla etkileşim için kullanabileceğiniz etkileyici bir yeni API daha var. Masaüstünde, web uygulamaları artık dosyaları panodan okuyabilir. (Safari 2018'den beri panodaki dosyaları okuyabiliyor.)

Panoya sınırsız erişiminiz olmadığından, bir paste etkinlik işleyici oluşturmanız gerekir. Ardından, etkinlik işleyicide panodaki her bir dosyanın içeriğine erişebilirsiniz.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Kimlik bilgilerini satış ortağı olan sitelerde paylaş

Sitenizde birden fazla alan adı varsa ve bunlar aynı hesap yönetimi arka uçunu paylaşıyorsa artık sitelerinizi birbirleriyle ilişkilendirebilir, böylece kullanıcıların kimlik bilgilerini bir kez kaydetmesine olanak tanıyabilir ve Chrome şifre yöneticisinin bu alanları satış ortağı sitelerinizden birine önermesini sağlayabilirsiniz.

Bu, siteniz google.com ve google.ca gibi farklı üst düzey alan adlarından sunulduğunda idealdir. Belki de birden fazla alan adınız vardır.

Web sitelerinizi ilişkilendirmek için alanlar arasındaki ilişkiyi tanımlayan bir assetlinks.json dosyası oluşturmanız gerekir. Aşağıdaki örnekte, tarayıcıya hem .com hem de .co.uk alanlarının ilişkili olduğunu ve kimlik bilgilerini paylaşabileceğini söylüyorum.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Ardından, assetlinks.json dosyasını her bir alan için .well-known klasöründe barındırın.

Bu işlev Chrome 91'de kademeli olarak kullanıma sunulacak ve ilk günden itibaren kullanılamayabilir. Bu nedenle daha ayrıntılı bilgi için Giriş kimlik bilgilerini bağlı siteler arasında paylaşmak için Chrome'u etkinleştirme başlıklı makaleye göz atın.

Diğer ölçütler

Elbette dahası var.

I/O 2021'deki tüm videolar artık internette yayında. Güzel içerikleri var. Mutlaka göz atın!

Önceden Quic Transport adı verilen Web Transport, bir dizi değişiklikten geçmiş ve yeni bir kaynak denemesi başlatıyor.

Web Assembly SIMD, kaynak denemesini tamamladı ve tüm kullanıcılara sunuldu.

Yenilenmiş form öğeleri nihayet Android'e ulaşarak kullanıcı deneyimini iyileştirdi.

Ayrıca, <link> öğesinin media özelliği link rel="icon" için kullanılır. Bu, medya sorgularına göre farklı simgeler tanımlayabileceğiniz anlamına gelir. Örneğin, koyu ve açık modlar için farklı simgeler kullanabilirsiniz.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 91'deki 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 92 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım!