Baru di Chrome 89

Pete LePage

Chrome 89 mulai diluncurkan ke versi stabil sekarang.

Berikut ini hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan merekam video dari rumah. Mari kita mulai dan lihat apa yang baru untuk developer di Chrome 89.

WebHID, WebNFC, dan Web Serial

Saya sangat antusias dengan WebHID, WebNFC, dan Web Serial. Fitur ini membuka skenario baru bagi pengguna yang sebelumnya tidak mungkin dilakukan, yaitu berinteraksi dengan hardware dunia nyata.

Mereka memungkinkan pembuat terhubung ke hardware yang menyenangkan dan unik, aplikasi konferensi video untuk menggunakan tombol telepon khusus di speaker khusus. Atau sejumlah kasus penggunaan lainnya.

Dengan menggunakan Web Serial, dan sekitar 60 baris kode, @AndreBan membuat halaman yang dapat berinteraksi dengan REPL MicroPython di Raspberry Pi Pico. Web Serial juga digunakan oleh Espruino di IDE berbasis web mereka.

Di CDS 2019, Francois menulis game bergaya memori yang seru menggunakan Web NFC. Anda harus mengetuk ponsel ke kartu yang benar, dalam urutan yang benar.

StreamDeck dengan Drum Pad Daft Punk

Dan yang paling saya sukai, @bramus menggunakan WebHID untuk terhubung ke StreamDeck, dengan membuat pad drum Daft Punk. Jika Anda tidak memiliki StreamDeck, tonton video demonya di YouTube, dan lihat kode di GitHub.

Baik situs Anda yang berinteraksi dengan hardware Anda, atau hardware Anda yang dapat berinteraksi dengan banyak situs, pengguna akan diuntungkan karena mereka tidak perlu menginstal driver atau software khusus.

Anda dapat mempelajari lebih lanjut beberapa perangkat yang dapat Anda hubungkan di web.dev/devices, atau melihat panduan memulai untuk WebHID, WebNFC, dan Web Serial.

Perubahan kriteria kemampuan penginstalan PWA

Dukungan offline telah menjadi bagian penting dari kriteria Progressive Web App untuk kemampuan penginstalan sejak awal. Seperti aplikasi terinstal lainnya, pengguna mengharapkan aplikasi ini berfungsi dengan andal. Prosesnya harus cepat, dan mereka tidak akan pernah melihat dino offline.

Tahun ini, kami berencana menutup celah yang memungkinkan beberapa situs lulus kriteria dapat diinstal, tanpa pengalaman offline. Jika PWA Anda sudah memiliki pengalaman offline, Anda sudah siap. Tidak ada tindakan yang diperlukan, tetapi, jika Anda belum memilikinya, sekarang saatnya untuk menambahkannya.

Mulai Chrome 89, jika PWA Anda tidak memberikan respons yang valid saat offline, Anda akan melihat peringatan di DevTools pada tab Masalah, dan Lighthouse akan menunjukkan bahwa ada masalah. Selain itu, penegakan akan dimulai di Chrome 93, akhir tahun ini.

DevTools menampilkan pesan peringatan di Konsol.
Pesan peringatan di Konsol Chrome DevTools.
DevTools menampilkan pesan peringatan di tab Aplikasi.
Pesan peringatan di tab Aplikasi > Manifes > Kemampuan penginstalan.

Anda dapat memutuskan jenis pengalaman offline yang ingin Anda berikan. Sebaiknya, Anda memberikan sebanyak mungkin pengalaman Anda. Namun, setidaknya, Anda dapat menggunakan halaman penggantian offline yang sederhana.

Anda dapat menemukan detail selengkapnya tentang perubahan ini, dan alasan kami melakukannya di artikel Meningkatkan deteksi dukungan offline Aplikasi Web Progresif.

Jika Anda tidak yakin harus mulai dari mana, lihat Workbox. Library ini memiliki serangkaian library yang dapat mendukung pekerja layanan siap produksi untuk PWA Anda. Atau, untuk halaman penggantian offline sederhana, artikel Membuat halaman penggantian offline memiliki semua kode yang Anda butuhkan, dan Anda dapat menyalin dan menempelkannya langsung ke situs Anda.

Web Share dan Web Share Target untuk Desktop

Jika situs Anda mengizinkan pengguna membuat, mengedit, atau berinteraksi dengan file, Anda harus menggunakan Web Share API dan Web Share Target API. API ini telah tersedia di perangkat seluler selama beberapa waktu, tetapi kini didukung di ChromeOS dan Windows.

Web Share memungkinkan pengguna mengirim file atau data ke aplikasi terinstal lainnya di perangkat mereka, misalnya, membagikan foto dari Google Foto ke Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Untuk mendaftar sebagai target sehingga aplikasi lain dapat membagikan file atau data kepada Anda, Anda harus menggunakan Web Share Target API.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Lihat Mengintegrasikan dengan UI berbagi OS menggunakan Web Share API dan Menerima data yang dibagikan dengan Web Share Target API untuk panduan memulai.

Dan lainnya

Dan tentu saja masih banyak lagi.

Chrome kini mengizinkan await tingkat teratas dalam modul JavaScript.

Ikon penginstalan omnibox baru untuk PWA

Untuk mengurangi kebingungan pengguna, kami telah memperbarui ikon yang ditampilkan di omnibox untuk PWA yang dapat diinstal.


Selain itu, jika Anda telah menggunakan Aktivitas Web Tepercaya untuk membuat PWA tersedia di Play Store untuk ChromeOS, Anda dapat mendaftar ke uji coba origin Digital Goods API.

Bacaan lebih lanjut

Hal ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 89.

Langganan

Ingin terus mendapatkan info terbaru tentang video kami? Subscribe ke channel YouTube Chrome Developers kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 90 dirilis, saya akan ada di sini untuk memberi tahu Anda hal-hal baru di Chrome.

Kredit

Foto Raspberry Pi dan Arduino adalah karya Harrison Broadbent di Unsplash