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

Membaca file dari papan klip

Ada satu API baru keren lainnya untuk berinteraksi dengan file yang tersedia 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 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 afiliasi

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 pengelola sandi Chrome akan menyarankannya ke situs afiliasi Anda.

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 antara domain. Pada 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 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-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 elemen <link> akan dihormati 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. Lihat link di bawah untuk mengetahui 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 langsung memberi tahu Anda tentang yang baru di Chrome.