Baru di Chrome 89

Chrome 89 sekarang mulai diluncurkan ke stabil.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan mengambil gambar dari rumah. Ayo selami dan lihat apa yang baru untuk developer di Chrome 89!

WebHID, WebNFC, dan Seri Web

Saya sangat senang dengan WebHID, WebNFC, dan Web Serial. Cara ini membuka skenario baru bagi pengguna yang tidak pernah mungkin sebelumnya, berinteraksi dengan hardware dunia nyata.

Alat ini memungkinkan developer terhubung ke aplikasi konferensi video dan hardware unik yang menyenangkan untuk menggunakan tombol telepon khusus pada speaker khusus. Atau sejumlah kasus penggunaan lainnya.

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

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

StreamDeck dengan Drum Pad Daft Punk

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

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

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

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 mengharapkannya berfungsi dengan andal. Prosesnya harus cepat, dan mereka seharusnya tidak melihat dinosaurus offline!

Pada akhir tahun ini, kami berencana untuk menutup celah yang memungkinkan beberapa situs lulus kriteria kemampuan penginstalan, tanpa pengalaman offline. Jika PWA Anda sudah memiliki pengalaman offline, berarti Anda sudah siap. Anda tidak perlu melakukan tindakan apa pun, tetapi jika belum melakukannya, saatnya untuk menambahkannya.

Mulai Chrome 89, jika PWA tidak memberikan respons yang valid saat offline, Anda akan melihat peringatan di DevTools pada tab Masalah, dan Lighthouse akan menunjukkan adanya masalah. Kebijakan ini akan mulai diterapkan di Chrome 93, pada akhir tahun ini.

DevTools menampilkan pesan peringatan di Console.
Pesan peringatan di Konsol Chrome DevTools.
DevTools menampilkan pesan peringatan di tab Application.
Pesan peringatan di tab Aplikasi > Manifes > Penginstalan.

Anda dapat menentukan jenis pengalaman offline yang ingin diberikan. Idealnya, Anda harus memberikan pengalaman sebanyak mungkin. Namun, setidaknya, dapat sesederhana halaman penggantian offline.

Anda dapat menemukan detail selengkapnya tentang perubahan ini dan alasan kami melakukannya di Meningkatkan deteksi dukungan offline Progressive Web App.

Jika Anda tidak yakin harus memulai dari mana, lihat Workbox. Layanan 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.

Target Berbagi Web dan Berbagi Web 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 sejak beberapa waktu, tetapi sekarang didukung di ChromeOS dan Windows.

Berbagi Web memungkinkan pengguna mengirim file atau data ke aplikasi terinstal lainnya di perangkat mereka, misalnya, berbagi 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 agar aplikasi lain dapat berbagi file atau data dengan Anda, sebaiknya gunakan 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 dengan Web Share API dan Menerima data yang dibagikan dengan Web Share Target API untuk panduan memulai.

Dan lainnya

Dan tentu masih banyak lagi.

Chrome kini mengizinkan await tingkat teratas dalam modul JavaScript.

Ikon instal 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 menyediakan PWA di Play Store untuk ChromeOS, Anda dapat mendaftar ke uji coba origin Digital goods API.

Bacaan lebih lanjut

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

Langganan

Ingin terus mengetahui info terbaru tentang video kami, lalu subscribe ke channel YouTube Developer Chrome 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 apa yang baru di Chrome!

Kredit

Foto Raspberry Pis dan Arduino adalah oleh Harrison Broadbent di Unsplash