Baru di Chrome 80

Chrome 80 diluncurkan sekarang, dan ada banyak hal baru di dalamnya untuk developer.

Tersedia dukungan untuk:

Saya Pete LePage. Ayo selami dan lihat apa yang baru untuk developer di Chrome 80.

Pekerja modul

Modul Worker, mode baru untuk pekerja web - dengan manfaat ergonomi dan performa dari modul JavaScript kini telah tersedia. Konstruktor Pekerja menerima opsi {type: "module"} baru, yang mengubah cara skrip dimuat dan dieksekusi, agar cocok dengan <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Pindah ke modul JavaScript juga memungkinkan penggunaan impor dinamis untuk kode pemuatan lambat, tanpa memblokir eksekusi pekerja. Lihat postingan Jason Membuat Threading web dengan pekerja modul di web.dev untuk detail selengkapnya.

Perantaian opsional

Mencoba membaca properti bertingkat yang dalam pada sebuah objek dapat rentan terhadap error, terutama jika ada kemungkinan ada sesuatu yang mungkin tidak dievaluasi.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Memeriksa setiap nilai sebelum melanjutkan dengan mudah berubah menjadi pernyataan if bertingkat yang dalam, atau memerlukan blok try / catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 menambahkan dukungan untuk fitur JavaScript baru yang disebut rantai opsional. Dengan perantaian opsional, jika salah satu properti menampilkan null, atau tidak ditentukan, bukan menampilkan error, semuanya akan menampilkan nilai tidak ditentukan.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Lihat postingan blog Optional Chaining di blog v8 untuk semua detailnya.

Kelulusan uji coba origin

Ada tiga kemampuan baru yang telah beralih dari Uji Coba Origin menjadi stabil, yang memungkinkannya digunakan oleh situs mana pun, tanpa token.

Sinkronisasi berkala latar belakang

Pertama, adalah sinkronisasi latar belakang berkala, menyinkronkan data secara berkala di latar belakang, sehingga saat pengguna membuka PWA yang diinstal, mereka akan selalu memiliki data terbaru.

Pemilih kontak

Selanjutnya, adalah Contact Picker API, API on-demand yang memungkinkan pengguna memilih entri dari daftar kontak mereka dan membagikan detail terbatas dari entri yang dipilih ke situs.

Hal ini memungkinkan pengguna untuk hanya membagikan apa yang mereka inginkan, kapan saja, dan memudahkan pengguna untuk menjangkau dan terhubung dengan teman dan keluarga mereka.

Dan terakhir, metode Dapatkan Aplikasi Terkait Terinstal memungkinkan aplikasi web memeriksa apakah aplikasi native diinstal di perangkat pengguna.

Salah satu kasus penggunaan paling umum adalah untuk memutuskan apakah akan mempromosikan penginstalan PWA Anda, jika aplikasi native Anda tidak diinstal. Atau, Anda mungkin ingin menonaktifkan beberapa fungsi satu aplikasi jika disediakan oleh aplikasi lainnya.

Uji coba origin baru

API pengindeksan konten

Bagaimana cara memberi tahu pengguna tentang konten yang telah Anda cache di PWA? Ada masalah penemuan di sini. Apakah mereka akan tahu untuk membuka aplikasi Anda? Atau konten apa yang tersedia?

Content Indexing API adalah uji coba origin baru yang memungkinkan Anda menambahkan URL dan metadata konten yang dapat digunakan secara offline, ke indeks lokal, yang dikelola oleh browser, dan mudah dilihat oleh pengguna.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Untuk menambahkan sesuatu ke indeks, saya perlu mendapatkan pendaftaran pekerja layanan, lalu memanggil index.add, dan memberikan metadata tentang konten.

Setelah diisi, indeks akan ditampilkan di area khusus Chrome untuk halaman Download Android. Untuk mengetahui detail selengkapnya, baca postingan Jeff yang berjudul Mengindeks halaman yang dapat diakses offline dengan Content Indexing API di web.dev.

Pemicu notifikasi

Notifikasi adalah bagian penting dari banyak aplikasi. Namun, notifikasi push hanya dapat diandalkan seperti jaringan yang terhubung dengan Anda. Meskipun berfungsi dengan baik pada kebanyakan kasus, terkadang itu rusak. Misalnya, jika pengingat kalender, yang memberi tahu Anda tentang acara penting tidak muncul karena Anda dalam mode pesawat, Anda mungkin melewatkan acara tersebut.

Pemicu Notifikasi memungkinkan Anda menjadwalkan notifikasi terlebih dahulu, sehingga sistem operasi akan mengirimkan notifikasi pada waktu yang tepat - meskipun tidak ada konektivitas jaringan, atau perangkat dalam mode penghemat baterai.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Untuk menjadwalkan notifikasi, panggil showNotification pada pendaftaran pekerja layanan. Dalam opsi notifikasi, tambahkan properti showTrigger dengan TimestampTrigger. Kemudian, ketika waktunya tiba, browser akan menampilkan notifikasi.

Uji coba origin ini direncanakan untuk berjalan di Chrome 83, jadi lihat postingan Notification Triggers Tom di web.dev untuk mengetahui detail selengkapnya.

Uji coba origin lainnya

Ada beberapa uji coba origin lainnya yang dimulai di Chrome 80:

  • Seri Web
  • Kemampuan PWA untuk mendaftar sebagai pengendali file
  • Properti baru untuk pemilih kontak

Periksa daftar lengkap fitur dalam uji coba origin.

Dan lainnya

Tentu saja masih banyak lagi!

  • Sekarang Anda dapat menautkan langsung ke fragmen teks di halaman, menggunakan #:~:text=something. Chrome akan men-scroll dan menandai instance pertama fragmen teks tersebut. Misalnya https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Menyetel display: minimal-ui di PWA Desktop akan menambahkan tombol kembali dan muat ulang ke panel judul PWA yang diinstal.
  • Selain itu, Chrome kini mendukung penggunaan gambar SVG sebagai favicon.

Bacaan lebih lanjut

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

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 81 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome!