Baru di Chrome 91

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan merekam dari rumah. Mari kita lihat apa yang baru untuk developer di Chrome 91.

Nama yang disarankan untuk File System Access API

Salah satu API favorit saya yang berasal 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 yang diinstal lainnya, sehingga Anda dapat menciptakan pengalaman pengguna yang lebih alami.

Mulai Chrome 91, Anda kini dapat menyarankan nama dan lokasi file atau direktori yang akan berinteraksi. 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 default. Misalnya, editor teks mungkin ingin memulai dialog simpan file atau buka file di folder documents. Sedangkan editor gambar mungkin ingin memulai di 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 keren lainnya untuk berinteraksi dengan file yang muncul di Chrome 91. Di desktop, aplikasi web kini dapat membaca file dari papan klip. (Pembacaan file dari papan klip telah tersedia di Safari sejak 2018.)

Tentu saja, Anda tidak mendapatkan akses tanpa batas ke papan klip, jadi Anda harus menyiapkan pemroses peristiwa paste. Kemudian, di pengendali peristiwa, Anda dapat mengakses konten setiap file pada 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 afiliasi

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

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. Pada contoh di bawah, saya memberi tahu browser bahwa domain .com dan .co.uk saling 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 membagikan kredensial login di seluruh situs afiliasi untuk mengetahui detail terbaru.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Semua video dari I/O 2021 kini tersedia secara online. Ada beberapa konten yang bagus di sana, jadi lihat selengkapnya.

Web Transport-yang sebelumnya disebut Quic Transport telah mengalami sejumlah perubahan dan memulai uji coba origin baru.

Web Assembly SIMD telah menyelesaikan uji coba origin-nya dan tersedia untuk semua pengguna.

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

Selain itu, atribut media dari elemen <link> akan diterima untuk 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

Bagian ini hanya membahas beberapa sorotan utama. Periksa link di bawah untuk perubahan tambahan di Chrome 91.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke 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!