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 projesinde 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. Bunu yapmak için showSaveFilePicker seçeneklerinin bir parçası olarak 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 muhtemelen 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 isteyecektir. startIn mülkü ile 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ı 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 çok alan adı varsa ve bu alanlar aynı hesap yönetimi arka ucunu paylaşıyorsa, artık sitelerinizi birbiriyle ilişkilendirerek kullanıcıların kimlik bilgilerini bir kez kaydetmelerine izin verebilir ve Chrome şifre yöneticisinin onları ilişkili sitelerinizden herhangi birine önermesini sağlayabilirsiniz.

Bu, siteniz google.com ve google.ca gibi farklı üst düzey alanlardan sunulduğunda ideal bir seçenektir. 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 şu anda internette. Muhteşem içerikler sizi bekliyor!

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 yerleşerek kullanıcı deneyimini iyileştirdi.

Ayrıca <link> öğesinin media özelliği, link rel="icon" için dikkate alınacaktı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 oluşturabilirsiniz.

<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.

Ben Pete LePage. Chrome 92 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!