Baru di Chrome 80

Pete LePage

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

Ada dukungan untuk:

Saya Pete LePage. Mari kita lihat apa saja yang baru untuk developer di Chrome 80.

Pekerja modul

Pekerja Modul, mode baru untuk pekerja web - dengan ergonomi, dan manfaat performa modul JavaScript kini 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'
});

Beralih ke modul JavaScript juga memungkinkan penggunaan impor dinamis untuk kode pemuatan lambat, tanpa memblokir eksekusi pekerja. Lihat postingan Jason Threading the web with module workers di web.dev untuk mengetahui detail selengkapnya.

Perantaian opsional

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

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

Memeriksa setiap nilai sebelum melanjutkan dengan mudah berubah menjadi pernyataan if yang disusun bertingkat, 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 chaining opsional, jika salah satu properti menampilkan null, atau undefined, bukan menampilkan error, semuanya akan menampilkan undefined.

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

Lihat postingan blog Perantaian Opsional di blog v8 untuk mengetahui semua detailnya.

Kelulusan uji coba origin

Ada tiga kemampuan baru yang lulus dari Uji Coba Origin ke stabil, sehingga dapat digunakan oleh situs mana pun, tanpa token.

Sinkronisasi berkala latar belakang

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

Pemilih kontak

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

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

Terakhir, metode Get Installed Related Apps memungkinkan aplikasi web Anda memeriksa apakah aplikasi native Anda diinstal di perangkat pengguna.

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

Uji coba origin baru

API pengindeksan konten

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

Content Indexing API adalah uji coba origin baru yang memungkinkan Anda menambahkan URL dan metadata konten yang kompatibel dengan 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 di halaman Download Chrome untuk Android. Lihat postingan Jeff Mengindek halaman yang mendukung offline dengan Content Indexing API di web.dev untuk mengetahui detail lengkapnya.

Pemicu notifikasi

Notifikasi adalah bagian penting dari banyak aplikasi. Namun, notifikasi push hanya dapat diandalkan seperti jaringan yang terhubung dengan Anda. Meskipun berfungsi dalam sebagian besar kasus, terkadang hal ini rusak. Misalnya, jika pengingat kalender, yang memberi tahu Anda tentang acara penting, tidak muncul karena Anda berada dalam mode pesawat, Anda mungkin akan 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 hemat daya.

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. Di opsi notifikasi, tambahkan properti showTrigger dengan TimestampTrigger. Kemudian, saat waktunya tiba, browser akan menampilkan notifikasi.

Uji coba origin direncanakan untuk berjalan di Chrome 83, jadi lihat posting Pemicu Notifikasi Tom di web.dev untuk mengetahui detail lengkapnya.

Uji coba asal lainnya

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

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

Lihat daftar lengkap fitur dalam uji coba origin.

Dan lainnya

Tentu saja, masih banyak lagi.

  • Sekarang Anda dapat menautkan langsung ke fragmen teks di halaman, dengan menggunakan #:~:text=something. Chrome akan men-scroll ke dan menandai instance pertama fragmen teks tersebut. Misalnya https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Menetapkan 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

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 80.

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