Baru di Chrome 96

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, yang akhirnya merekam di studio. Mari kita lihat apa yang baru untuk developer di Chrome 96.

Manifes id untuk PWA

Saat pengguna menginstal PWA, browser memerlukan cara untuk mengidentifikasinya secara unik. Namun, hingga baru-baru ini, spesifikasi manifes aplikasi web tidak menentukan cara mengidentifikasi PWA, sehingga browser harus memutuskan, dan menyebabkan implementasi yang berbeda. Di beberapa browser, start_url digunakan, sedangkan di browser lainnya, jalur ke file manifes digunakan.

Hal ini membuat salah satu kolom tersebut tidak dapat diubah tanpa merusak pengalaman penginstalan. Sekarang, ada properti id opsional baru, yang memungkinkan Anda menentukan ID yang digunakan untuk PWA secara eksplisit.

Menambahkan properti id ke manifes akan menghapus dependensi pada start_url atau lokasi manifes, dan memungkinkan kolom tersebut diperbarui.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Dukungan untuk properti id tersedia di browser desktop berbasis Chromium mulai Chrome 96. Dukungan untuk perangkat seluler, yang saat ini menggunakan URL manifes sebagai ID unik, akan diluncurkan pada paruh pertama tahun 2022.

DevTools menampilkan ID aplikasi komputasi

Jika sudah memiliki PWA dalam produksi dan ingin menambahkan id ke manifes, Anda harus menggunakan ID yang ditetapkan oleh browser. Anda dapat menemukan id di panel Manifest pada panel Application di Dev Tools.

Untuk PWA baru, Anda dapat menetapkan id ke nilai string apa pun yang Anda sukai, tetapi ingat, Anda tidak akan dapat mengubahnya di masa mendatang, jadi pilih dengan bijak.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Lihat Mengidentifikasi PWA secara unik dengan properti ID manifes aplikasi web untuk mengetahui info selengkapnya.

Pengendali protokol URL untuk PWA

Aplikasi web dapat menggunakan navigator.registerProtocolHandler() untuk mendaftar sebagai pengendali protokol. Misalnya, Gmail dapat mendaftarkan protokol mailto. Kemudian, saat pengguna mengklik link dengan awalan mailto:, Gmail akan terbuka, sehingga memudahkan pengguna untuk mengirim email.

Mulai Chrome 96, PWA dapat mendaftar sebagai pengendali protokol sebagai bagian dari penginstalannya. Untuk melakukannya pada PWA, tambahkan properti protocol_handlers ke manifes aplikasi web Anda, tentukan protocol yang ingin Anda tangani, dan url yang akan dibuka saat diklik.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Ada beberapa batasan di sini, dan Anda tidak dapat mendaftarkan protokol apa pun, jadi lihat Pendaftaran pengendali protokol URL untuk PWA untuk mengetahui detail lengkap, dan cara menggunakan sintaksis web+ untuk membuat protokol Anda sendiri.

Petunjuk prioritas (uji coba origin)

Saat mengurai halaman web dan mulai menemukan serta mendownload resource seperti gambar, skrip, atau CSS, browser akan menetapkan prioritas pengambilan untuk mencoba mengoptimalkan pemuatan halaman. Browser cukup baik dalam menetapkan prioritas, tetapi mungkin tidak optimal dalam semua kasus.

Petunjuk Prioritas adalah fitur eksperimental, yang tersedia sebagai uji coba origin mulai Chrome 96, dan dapat membantu mengoptimalkan Data Web Inti. Atribut importance memungkinkan Anda menentukan prioritas untuk jenis resource seperti CSS, font, skrip, gambar, dan iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Misalnya, berikut adalah halaman Google Penerbangan. Gambar latar belakang tersebut adalah Largest Contentful Paint (LCP).

Screenshot Google Penerbangan dengan gambar latar belakang besar

Mari kita lihat cara pemuatan dengan dan tanpa petunjuk prioritas. Dengan prioritas yang ditetapkan ke high pada gambar latar belakang, LCP turun dari 2,6 detik menjadi 1,9 detik.

Lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API untuk mengetahui semua detail, cara mendaftar ke uji coba origin, dan beberapa contoh menarik tentang cara API ini dapat membantu meningkatkan performa rendering Anda.

Mengemulasi Chrome 100 dalam string UA

Awal tahun depan, kami akan merilis Chrome 100, yang memiliki nomor versi tiga digit. Setiap kode yang memeriksa nomor versi, atau mengurai string UA, harus diperiksa untuk memastikan kode tersebut menangani tiga digit.

Mulai Chrome 96, ada tanda baru #force-major-version-to-100 yang akan mengubah nomor versi saat ini menjadi 100, sehingga Anda dapat memastikan semuanya berfungsi seperti yang diharapkan.

Halaman Tanda Chrome yang menyoroti opsi #force-major-version-to-100 baru

Untuk mengetahui detailnya, lihat Memaksa versi utama Chrome menjadi 100 di string Agen Pengguna.

Chrome Dev Summit

Chrome Dev Summit telah selesai. Semua video dan konten tersedia secara online. Lihat situs Chrome Dev Summit, atau jika Anda melewatkan presentasi utama atau live stream, lihat Playlist CDS di Channel YouTube Developer Chrome.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Cache Kembali, maju – atau bfcache – kini tersedia dalam versi stabil, dan menjadikan Chrome selaras dengan Firefox dan Safari.

Bacaan lebih lanjut

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

Langganan

Untuk terus mendapatkan info terbaru, 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 97 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.