Baru di Chrome 102

Pete LePage

Berikut hal yang perlu Anda ketahui:

  • PWA yang diinstal dapat terdaftar sebagai pengendali file, sehingga memudahkan pengguna untuk membuka file langsung dari disk.
  • Atribut inert memungkinkan Anda menandai bagian DOM sebagai inert.
  • Navigation API memudahkan aplikasi web satu halaman menangani navigasi dan pembaruan ke URL
  • Dan masih banyak fitur lainnya.

Saya Pete LePage. Mari kita pelajari lebih dalam dan lihat yang baru untuk developer di Chrome 102.

File Handling API

File Handling API memungkinkan PWA yang diinstal mendaftar ke OS sebagai pengendali file. Setelah terdaftar, pengguna dapat mengklik file untuk membukanya dengan PWA yang diinstal. Hal ini sangat cocok untuk PWA yang berinteraksi dengan file, misalnya, editor gambar, IDE, editor teks, dan sebagainya.

Untuk menambahkan fungsi penanganan file ke PWA, Anda harus memperbarui manifes aplikasi web, menambahkan array file_handlers dengan detail tentang jenis file yang dapat ditangani PWA Anda. Anda harus menentukan URL yang akan dibuka, jenis mime, ikon untuk jenis file, dan jenis peluncuran. Jenis peluncuran menentukan apakah beberapa file harus dibuka pada satu klien, atau di beberapa klien.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Kemudian, untuk mengakses file tersebut saat PWA diluncurkan, Anda perlu menentukan konsumen untuk objek launchQueue. Peluncuran diantrekan hingga ditangani oleh konsumen.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Lihat Mengizinkan aplikasi web yang diinstal menjadi pengendali file untuk mengetahui semua detailnya.

Properti inert

Properti inert adalah atribut HTML global yang memberi tahu browser untuk mengabaikan peristiwa input pengguna untuk elemen, termasuk peristiwa fokus, dan peristiwa dari teknologi pendukung.

Hal ini dapat berguna saat mem-build UI. Misalnya, dengan dialog modal, Anda ingin "memangkas" fokus di dalam modal saat terlihat. Atau, untuk panel samping yang tidak selalu terlihat oleh pengguna, menambahkan inert akan memastikan bahwa saat panel samping berada di luar layar, pengguna keyboard tidak dapat berinteraksi dengan panel samping secara tidak sengaja.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Di sini, inert telah dideklarasikan pada elemen <div> kedua, sehingga semua konten yang ada di dalamnya, termasuk <button> dan <label>, tidak dapat menerima fokus atau diklik.

inert didukung di Chrome 102, dan akan hadir di Firefox dan Safari.

Lihat Memperkenalkan inert untuk mengetahui detail selengkapnya.

Banyak aplikasi web bergantung pada kemampuan untuk memperbarui URL tanpa navigasi halaman. Saat ini, kita menggunakan History API, tetapi API ini canggung dan tidak selalu berfungsi seperti yang diharapkan. Daripada mencoba memperbaiki masalah pada History API, Navigation API sepenuhnya merombak ruang ini.

Untuk menggunakan Navigation API, tambahkan pemroses navigate pada objek navigation global.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Peristiwa ini pada dasarnya terpusat dan akan diaktifkan untuk semua jenis navigasi, baik pengguna melakukan tindakan, seperti mengklik link, mengirim formulir, atau kembali dan maju, meskipun navigasi dipicu secara terprogram. Pada umumnya, tindakan ini memungkinkan kode Anda mengganti perilaku default browser untuk tindakan tersebut.

Lihat Pemilihan rute sisi klien modern: Navigation API untuk mengetahui detail lengkap dan demo yang dapat Anda coba.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Sanitizer API baru bertujuan untuk membuat prosesor yang andal untuk string arbitrer agar dapat disisipkan dengan aman ke dalam halaman.
  • Atribut hidden=until-found memungkinkan browser menelusuri teks di area tersembunyi, dan menampilkan bagian tersebut jika ditemukan kecocokan.

Bacaan lebih lanjut

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

Langganan

Untuk mendapatkan info terbaru, subscribe ke channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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