Baru di Chrome 91

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan mengambil gambar dari rumah. Ayo selami dan lihat apa yang baru untuk developer di Chrome 91.

Nama yang disarankan untuk File System Access API

Salah satu API favorit saya yang muncul dari project Fugu tahun ini adalah File System Access API. Setelah pengguna memberikan izin, aplikasi dapat berinteraksi dengan file di perangkat lokal pengguna, dengan cara yang sama seperti aplikasi terinstal lainnya, memungkinkan Anda menciptakan pengalaman pengguna yang lebih alami.

Mulai Chrome 91, Anda kini dapat menyarankan nama dan lokasi file atau direktori yang akan digunakan. Untuk melakukannya, teruskan properti suggestedName sebagai bagian dari opsi showSaveFilePicker.

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

Hal yang sama berlaku untuk direktori awal {i>default<i}. Misalnya, editor teks mungkin ingin memulai dialog penyimpanan file atau membuka file di folder documents. Sementara itu, editor gambar mungkin ingin memulai dari folder pictures. Anda dapat menyarankan direktori awal default dengan meneruskan properti startIn.

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

Lihat postingan Akses Sistem File Tom untuk mengetahui detail selengkapnya.

Membaca file dari papan klip

Ada satu API baru yang keren lainnya untuk berinteraksi dengan file yang tersedia di Chrome 91. Di desktop, aplikasi web kini dapat membaca file dari papan klip. (Membaca file dari papan klip telah tersedia di Safari sejak 2018.)

Tentu saja, Anda tidak akan mendapatkan akses tidak terbatas ke papan klip sehingga Anda harus menyiapkan pemroses peristiwa paste. Kemudian, di pengendali peristiwa, Anda dapat mengakses konten setiap file di papan klip.

window.addEventListener('paste', onPaste);

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

Membagikan kredensial di situs terafiliasi

Jika situs Anda memiliki beberapa domain, dan domain tersebut memiliki backend pengelolaan akun yang sama, kini Anda dapat mengaitkan situs satu sama lain, sehingga pengguna dapat menyimpan kredensial sekali, dan meminta pengelola sandi Chrome menyarankannya ke situs yang berafiliasi.

Hal ini ideal jika situs Anda ditayangkan dari domain level teratas yang berbeda, seperti google.com, dan google.ca. Atau mungkin Anda memiliki beberapa nama domain.

Untuk mengaitkan situs, Anda harus membuat file assetlinks.json yang menentukan hubungan antar-domain. Dalam contoh di bawah, saya memberi tahu browser bahwa domain .com dan .co.uk terkait dan dapat berbagi kredensial.

[{
  "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"
  }
 }]

Kemudian, hosting file assetlinks.json di folder .well-known untuk setiap domain.

Fungsi ini akan mulai diluncurkan secara bertahap di Chrome 91, dan mungkin tidak tersedia pada hari pertama. Jadi, lihat Mengaktifkan Chrome untuk berbagi kredensial login di seluruh situs terafiliasi untuk mengetahui detail terbaru.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Semua video dari I/O 2021 sekarang sudah tersedia di internet, ada beberapa konten bagus di sana, jadi tontonlah!

Web Transport, yang sebelumnya bernama Quic Transport telah mengalami sejumlah perubahan dan sedang memulai uji coba origin baru.

Web Assembly SIMD telah menyelesaikan uji coba originnya dan tersedia untuk semua pengguna.

Elemen formulir yang diperbarui akhirnya tersedia di Android, yang meningkatkan pengalaman pengguna.

Dan atribut media dari elemen <link> akan mendapatkan link rel="icon", yang berarti Anda dapat menentukan ikon yang berbeda berdasarkan kueri media. Misalnya, ikon yang berbeda untuk mode gelap dan terang.

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

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 91.

Langganan

Untuk terus mengikuti info terbaru, berlangganan channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 92 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!