Chrome 91'deki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. Chrome 91'de geliştiriciler için neler yeni olduğuna göz atalım.

File System Access API için önerilen adlar

Bu yıl Fugu projesi kapsamında kullanıma sunulan en sevdiğim API'lerden biri Dosya Sistemi Erişim API'leri. Kullanıcı izin verdikten sonra uygulamalar, yüklü diğer uygulamalarla aynı şekilde kullanıcının yerel cihazındaki dosyalarla etkileşime geçebilir. Bu sayede daha doğal bir kullanıcı deneyimi oluşturabilirsiniz.

Chrome 91'den itibaren, etkileşimde bulunacağınız bir dosyanın veya dizinin adını ve konumunu önerebilirsiniz. Bunun için showSaveFilePicker seçenekleri kapsamında bir suggestedName mülkü gönderin.

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 muhtemelen documents klasöründe dosya kaydetme veya dosya açma iletişim kutusunu başlatmak ister. Resim düzenleyiciler ise muhtemelen pictures klasöründen başlamak ister. startIn mülkü ile varsayılan bir başlangıç dizini önerebilirsiniz.

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

Ayrıntılı bilgi için Tom'un Dosya Sistemi Erişimi başlıklı yayınını inceleyin.

Panodaki dosyaları okuma

Chrome 91'de kullanıma sunulan, dosyalarla etkileşime geçmek için kullanabileceğiniz yeni ve ilginç bir API daha var. Web uygulamaları artık masaüstünde panodaki dosyaları okuyabilir. (Arama çubuğundan dosya okuma özelliği, 2018'den beri Safari'de kullanılabilir.)

Elbette, panoya sınırsız erişim elde edemezsiniz. Bu nedenle, bir paste etkinlik dinleyicisi oluşturmanız gerekir. Ardından, etkinlik işleyicide, panodaki her 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();
  ...
}

Satış ortağı sitelerinde kimlik bilgilerini paylaşma

Sitenizde birden fazla alan varsa ve bu alanlar aynı hesap yönetimi arka ucunu paylaşıyorsa artık sitelerinizi birbirinizle ilişkilendirebilirsiniz. Böylece kullanıcılar kimlik bilgilerini bir kez kaydedebilir ve Chrome şifre yöneticisinin bu bilgileri bağlı sitelerinizden herhangi birine önermesini sağlayabilir.

Bu, siteniz google.com ve google.ca gibi farklı üst düzey alan adlarından yayınlandığında 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 alan için .well-known klasöründe barındırın.

Bu işlev, Chrome 91'de kademeli olarak kullanıma sunulmaya başlayacak ve ilk günde kullanılamayabilir. En son ayrıntılar için Chrome'un bağlı siteler arasında giriş kimlik bilgilerini paylaşmasını etkinleştirme başlıklı makaleyi inceleyin.

Diğer özellikler

Elbette daha birçok özellik var.

I/O 2021'deki tüm videolar artık online. Bu videolarda çok değerli bilgiler yer alıyor.

Daha önce Quic Transport olarak adlandırılan Web Transport, bir dizi değişikliğe uğradı ve yeni bir kaynak denemesi başlatıldı.

Web Assembly SIMD, kaynak denemesini tamamladı ve tüm kullanıcılar tarafından kullanılabilir.

Yenilenen form öğeleri nihayet Android'e geldi ve kullanıcı deneyimini iyileştirdi.

Ayrıca <link> öğesinin media özelliği link rel="icon" için dikkate alınır. Diğer bir deyişle, medya sorgularına göre farklı simgeler tanımlayabilirsiniz. Örneğin, koyu ve açık modlar için farklı simgeler.

<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

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 91'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 92 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.