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.
  • Dengan atribut inert, Anda dapat menandai bagian DOM sebagai inert.
  • Navigation API memudahkan aplikasi satu halaman menangani navigasi dan pembaruan URL
  • Dan masih banyak lagi.

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang 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. 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, dengan menambahkan array file_handlers dengan detail tentang jenis file yang dapat ditangani oleh 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 dalam 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 sampai 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 semua detailnya.

Properti inert

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

Hal ini dapat berguna saat mem-build UI. Misalnya, dengan dialog modal, Anda ingin "menangkap" fokus di dalam modal saat terlihat. Atau, untuk panel samping yang tidak selalu terlihat oleh pengguna, menambahkan inert memastikan bahwa saat panel samping berada di balik layar, pengguna keyboard tidak dapat berinteraksi dengan panel tersebut 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 detail selengkapnya.

Banyak aplikasi web bergantung pada kemampuan untuk memperbarui URL tanpa navigasi halaman. Hari ini, kita menggunakan History API, tetapi metode ini kaku dan tidak selalu berfungsi seperti yang diharapkan. Alih-alih mencoba mem-patch tepi kasar History API, Navigation API merombak ruang ini sepenuhnya.

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, mengirimkan formulir, atau mundur dan maju, bahkan saat navigasi dipicu secara terprogram. Dalam kebanyakan kasus, hal ini memungkinkan kode Anda mengganti perilaku default browser untuk tindakan tersebut.

Lihat Perutean sisi klien modern: Navigation API untuk detail selengkapnya dan demo yang dapat Anda coba.

Dan banyak lagi!

Tentu saja masih banyak lagi.

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

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 102.

Langganan

Untuk terus mengikuti 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 103 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!