Baru di Chrome 96

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, akhirnya melakukan syuting di studio, mari kita pelajari dan 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 saat ini, spesifikasi manifes aplikasi web tidak menentukan cara mengidentifikasi PWA, sehingga browser memutuskan, dan mengarah ke implementasi yang berbeda. Di beberapa browser, start_url digunakan, sementara di browser lain, jalur ke file manifes digunakan.

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

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 berbasis Chromium desktop mulai Chrome 96. Dukungan untuk perangkat seluler, yang saat ini menggunakan URL manifes sebagai ID unik, akan tersedia pada paruh pertama tahun 2022.

DevTools menampilkan ID aplikasi yang dikomputasi

Jika Anda 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 pilihlah dengan bijak.

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

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

Pengendali protokol URL untuk PWA

Aplikasi web dapat menggunakan navigator.registerProtocolHandler() untuk mendaftar sebagai pengendali protokol. Misalnya, Gmail dapat mendaftarkan protokol mailto. Kemudian, ketika 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, tentukan protocol yang ingin ditangani, dan url yang harus 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 baca pendaftaran pengendali protokol URL untuk PWA untuk mengetahui detail selengkapnya, dan cara menggunakan sintaksis web+ untuk membuat protokol Anda sendiri.

Petunjuk prioritas (uji coba origin)

Saat browser 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 di 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 tersebut adalah largest contentful paint (LCP).

Screenshot Google Penerbangan dengan gambar latar besar

Mari kita lihat dimuat dengan, dan tanpa petunjuk prioritas. Dengan prioritas yang ditetapkan ke high pada gambar latar, LCP akan 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 yang bagus tentang cara hal ini dapat membantu meningkatkan performa rendering Anda.

Emulasikan Chrome 100 di string UA

Awal tahun depan, kami akan meluncurkan Chrome 100, 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 menandai opsi #force-major-version-to-100 baru

Untuk mengetahui detailnya, lihat Paksa versi utama Chrome ke 100 di string Agen Pengguna.

Chrome Dev Summit

Chrome Dev Summit sudah selesai. Semua video dan konten tersedia secara online. Buka situs Chrome Dev Summit, atau jika Anda melewatkan keynote atau livestream, lihat Playlist CDS di Channel YouTube Chrome Developers.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Back, forward cache – atau bfcache – kini tersedia di versi stabil, dan menghadirkan Chrome bersama Firefox dan Safari.

Bacaan lebih lanjut

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

Langganan

Untuk terus mengikuti info terbaru, berlangganan 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 ada di sini untuk memberi tahu Anda apa yang baru di Chrome!