Baru di Chrome 86

Pete LePage

Chrome 86 sekarang mulai diluncurkan ke stabil.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja dan mengambil gambar dari rumah. mari kita pelajari lebih dalam dan lihat apa yang baru untuk pengembang di Chrome 86!

Akses Sistem File

Saat ini, Anda dapat menggunakan elemen <input type="file"> untuk membaca file dari disk. Untuk menyimpan perubahan, tambahkan download ke tag anchor, yang akan menampilkan pemilih file, lalu menyimpan file. Tidak ada cara untuk menulis ke file yang sama dengan yang Anda buka. Alur kerja itu menjengkelkan.

Dengan File System Access API (sebelumnya Native File System API), yang telah lulus dari uji coba originnya, dan kini tersedia dalam stabil, Anda dapat memanggil showOpenFilePicker(), yang menunjukkan pemilih file, lalu menampilkan handle file yang dapat digunakan untuk membaca file.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Untuk menyimpan file ke disk, Anda dapat menggunakan handle file yang Anda dapatkan sebelumnya, atau memanggil showSaveFilePicker() untuk mendapatkan handle file baru.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
screenshot perintah izin
Perintah kepada pengguna yang meminta izin untuk menulis ke file.

Sebelum menulis, Chrome akan memeriksa apakah pengguna telah memberikan izin tulis. Jika izin tulis belum diberikan, Chrome akan meminta pengguna terlebih dahulu.

Memanggil showDirectoryPicker() akan membuka direktori, sehingga Anda bisa mendapatkan daftar file, atau membuat file baru di direktori tersebut. Sempurna untuk hal-hal seperti IDE, atau pemutar media yang berinteraksi dengan banyak file. Tentu saja, sebelum Anda dapat menulis apa pun, pengguna harus memberikan izin tulis.

Ada banyak lagi yang terkait dengan API, jadi baca artikel Akses Sistem File di web.dev.

Uji Coba Origin: WebHID

Pengontrol game
Pengontrol game.

Perangkat antarmuka manusia, biasa disebut HID, mengambil input dari, atau memberikan output ke... manusia. Ada banyak perangkat antarmuka manusia yang terlalu baru, terlalu lama, atau terlalu jarang dapat diakses oleh driver perangkat sistem.

WebHID API, kini tersedia sebagai uji coba origin, mengatasi hal ini dengan menyediakan cara untuk mengakses perangkat ini di JavaScript. Dengan WebHID, game berbasis web dapat memanfaatkan sepenuhnya gamepad, termasuk semua tombol, joystick, sensor, pemicu, LED, paket rumble, dan banyak lagi.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Aplikasi video chat berbasis web dapat menggunakan tombol telepon pada speaker khusus, untuk memulai atau mengakhiri panggilan, membisukan audio, dan lainnya.

Pemilih perangkat HID
Pemilih perangkat HID.

Tentu saja, API canggih seperti ini hanya dapat berinteraksi dengan perangkat jika pengguna secara eksplisit memilih untuk mengizinkannya.

Lihat Menghubungkan ke perangkat HID yang tidak umum untuk mengetahui detail selengkapnya, contoh, cara memulai, dan demo keren.


Uji Coba Origin: Multi-Screen Window Placement API

Saat ini, Anda bisa mendapatkan properti layar tempat jendela browser aktif dengan memanggil window.screen(). Namun, bagaimana jika Anda memiliki konfigurasi multilayar? Maaf, browser hanya akan memberi tahu Anda tentang layar yang sedang digunakan.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Multi-Screen Window Placement API memulai uji coba origin di Chrome 86, yang memungkinkan Anda menghitung layar yang terhubung ke komputer, dan menempatkan jendela di layar tertentu. Menempatkan jendela di layar tertentu sangat penting untuk hal-hal seperti aplikasi presentasi, aplikasi jasa keuangan, dan lainnya.

Sebelum dapat menggunakan API, Anda harus meminta izin. Jika tidak, browser akan meminta izin pengguna saat Anda pertama kali mencoba menggunakannya.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Setelah pengguna memberikan izin, memanggil window.getScreens() akan menampilkan promise yang di-resolve dengan array objek Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Saya kemudian dapat menggunakan informasi itu saat memanggil requestFullScreen(), atau menempatkan jendela baru. Tom memiliki semua detail dalam artikel Mengelola beberapa tampilan dengan Multi-Screen Window Placement API di web.dev.

Dan lainnya

Pemilih CSS yang baru, :focus-visible, memungkinkan Anda memilih untuk menggunakan heuristik yang sama dengan yang digunakan browser saat memutuskan apakah akan menampilkan indikator fokus default atau tidak.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Anda dapat menyesuaikan warna, ukuran, atau jenis angka atau butir untuk daftar dengan CSS Pseudo-Element ::marker.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Dan Chrome Dev Summit akan hadir di layar di dekat Anda, jadi nantikan saluran YouTube kami untuk mengetahui info selengkapnya.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 86.

Subscribe

Ingin terus mendapatkan info terbaru terkait video kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru, atau menambahkan feed RSS ke pembaca feed.

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