Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 86

Pete LePage

Chrome 86 mulai diluncurkan ke versi stabil sekarang.

Berikut hal yang perlu Anda ketahui:

File System Access API kini tersedia dalam versi stabil.
Ada uji coba origin baru untuk Web HID dan Multi-screen Window Placement API.
Ada beberapa hal baru di CSS, dan banyak lagi.

Saya Pete LePage, bekerja dan merekam dari rumah, mari kita lihat apa yang baru untuk developer 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 asalnya, dan kini tersedia dalam versi stabil, Anda dapat memanggil showOpenFilePicker(), yang menampilkan pemilih file, lalu menampilkan handle file yang dapat Anda gunakan 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 diperoleh 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 untuk 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, yang memungkinkan Anda 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 hal lain di API ini, jadi lihat artikel Akses Sistem File di web.dev.

Uji Coba Origin: WebHID

Perangkat antarmuka manusia, yang biasanya disebut sebagai HID, mengambil input dari, atau memberikan output ke manusia. Ada perangkat antarmuka manusia long tail yang terlalu baru, terlalu lama, atau terlalu tidak umum untuk diakses oleh driver perangkat sistem.

WebHID API, yang 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, rumble pack, 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 chat video berbasis web dapat menggunakan tombol telepon di speaker khusus, untuk memulai atau mengakhiri panggilan, membisukan audio, dan lainnya.

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

Lihat artikel Menghubungkan ke perangkat HID yang tidak biasa 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 berada dengan memanggil window.screen(). Namun, bagaimana jika Anda memiliki konfigurasi multi-monitor? Maaf, browser hanya akan memberi tahu Anda tentang layar yang saat ini 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. Mampu 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 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, ...},
// ]

Kemudian, saya dapat menggunakan informasi tersebut saat memanggil requestFullScreen(), atau menempatkan jendela baru. Tom memiliki semua detailnya dalam artikel Mengelola beberapa layar dengan Multi-Screen Window Placement API di web.dev.

Dan lainnya

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

/* 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 tanda untuk daftar dengan Elemen Pseudo ::marker CSS.

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

Selain itu, Chrome Dev Summit akan hadir di layar di dekat Anda. Jadi, nantikan informasi selengkapnya di saluran YouTube kami.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 86.

Ingin terus mendapatkan info terbaru tentang video kami, subscribe ke channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru, atau tambahkan feed RSS kami ke pembaca feed Anda.

Saya Pete LePage, dan segera setelah Chrome 87 dirilis, saya akan langsung memberi tahu Anda -- yang baru di Chrome.