Baru di Chrome 89

Chrome 89 mulai diluncurkan ke versi stabil sekarang.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja, dan merekam dari rumah. Mari kita 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 belum pernah ada sebelumnya, berinteraksi dengan hardware dunia nyata.

API ini 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. Serial Web juga digunakan oleh Espruino di IDE berbasis web mereka.

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

StreamDeck dengan Daft Punk Drum Pad

Dan favorit saya, @bramus menggunakan WebHID untuk terhubung ke StreamDeck, membuat drum pad Daft Punk. Jika Anda tidak memiliki StreamDeck, lihat video demo-nya di YouTube, dan lihat kode di GitHub.

Baik situs Anda yang berinteraksi dengan hardware, atau hardware 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 dihubungkan di web.dev/devices, atau lihat 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 tersebut berfungsi dengan andal. Prosesnya akan cepat, dan mereka tidak akan pernah melihat dino offline.

Nanti pada tahun ini, kami berencana untuk menutup celah yang memungkinkan beberapa situs lulus kriteria penginstalan, tanpa pengalaman offline. Jika PWA sudah memiliki pengalaman offline, Anda sudah siap. Tidak ada tindakan yang diperlukan, tetapi, jika Anda belum memilikinya, sekarang saatnya 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 Application.
Pesan peringatan di tab Aplikasi > Manifes > Kemampuan Instalasi.

Anda dapat memutuskan jenis pengalaman offline yang ingin diberikan. Idealnya, Anda harus memberikan pengalaman sebanyak mungkin. Namun, setidaknya, hal ini dapat dilakukan 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. Library ini memiliki kumpulan 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 perlukan, dan Anda dapat menyalin dan menempelkan langsung ke situs Anda.

Pangsa Web dan Target Pangsa Web untuk Desktop

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

Berbagi Web memungkinkan pengguna mengirim file atau data ke aplikasi lain yang terinstal 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 agar aplikasi lain dapat berbagi file atau data dengan Anda, Anda dapat 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 dengan 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 bagi pengguna, kami telah memperbarui ikon yang ditampilkan di omnibox untuk PWA yang dapat diinstal.


Selain itu, jika 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

Bagian ini hanya membahas beberapa sorotan utama. Lihat 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, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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

Kredit

Foto Raspberry Pi dan Arduino diambil oleh Harrison Broadbent di Unsplash