Baru di Chrome 79

Chrome 79 sekarang diluncurkan!

Saya Pete LePage, mari kita pelajari yang baru untuk pengembang di Chrome 79.

Ikon yang Dapat Disamarkan

Jika Anda menjalankan Android O atau yang lebih baru, dan telah menginstal Progressive Web App, Anda mungkin melihat lingkaran putih yang mengganggu di sekitar ikon.

Untungnya, Chrome 79 kini mendukung ikon yang dapat disamarkan untuk Progressive Web App yang terinstal.Anda harus mendesain ikon agar sesuai dengan zona aman - pada dasarnya lingkaran dengan diameter yang setara dengan 80% kanvas.

Kemudian, dalam manifes aplikasi web, Anda harus menambahkan properti purpose baru ke ikon, dan menetapkan nilainya ke maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes memiliki postingan bagus tentang Trik CSS - Ikon Maskable: Ikon Adaptif Android untuk PWA Anda dengan semua detail, dan memiliki alat hebat yang dapat digunakan untuk menguji ikon Anda guna memastikannya sesuai.

XR Web

Anda kini dapat menciptakan pengalaman imersif untuk smartphone dan layar yang dipasang di kepala dengan WebXR Device API.

WebXR menghadirkan pengalaman yang imersif secara keseluruhan. Mulai dari menggunakan augmented reality untuk melihat seperti apa tampilan sofa baru di rumah sebelum Anda membelinya, hingga game virtual reality dan film 360 derajat, dan banyak lagi.

Untuk mulai menggunakan API baru, baca Virtual Reality Hadir di Web.

Uji coba origin baru

Uji coba origin memberi kami kesempatan untuk memvalidasi fitur eksperimental dan API, serta memungkinkan Anda memberikan masukan terkait kegunaan dan efektivitasnya dalam deployment yang lebih luas.

Fitur eksperimental biasanya hanya tersedia di balik tanda, tetapi saat kami menawarkan Uji Coba Origin untuk suatu fitur, Anda dapat mendaftar ke uji coba origin tersebut untuk mengaktifkan fitur tersebut bagi semua pengguna di origin Anda.

Dengan ikut serta dalam uji coba origin, Anda dapat mem-build demo dan prototipe yang dapat dicoba oleh pengguna uji beta selama masa uji coba tanpa mengharuskan mereka untuk membalik flag khusus di Chrome.

Informasi selengkapnya tentang uji coba origin tersedia di Panduan Uji Coba Origin untuk Developer Web. Anda dapat melihat daftar uji coba origin aktif, dan mendaftar untuk uji coba tersebut di halaman Uji Coba Origin Chrome.

Penguncian Layar Saat Aktif

Salah satu kecemasan hewan peliharaan terbesar saya tentang Google Slide adalah jika Anda membiarkan dek terbuka pada satu {i>slide<i} terlalu lama, screensaver akan muncul. Sebelum melanjutkan, Anda harus membuka kunci komputer. Duh.

Namun, dengan Wake Lock API baru, halaman dapat meminta penguncian dan mencegah layar redup atau screensaver muncul. Alat ini cocok untuk Slide, tetapi juga berguna untuk hal-hal seperti situs resep - tempat Anda mungkin ingin tetap mengaktifkan layar selama mengikuti petunjuknya.

Untuk meminta penguncian layar saat aktif, Anda harus memanggil navigator.wakeLock.request(), dan menyimpan objek WakeLockSentinel yang ditampilkannya.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Kunci dipertahankan hingga pengguna keluar dari halaman, atau Anda memanggil release pada objek WakeLockSentinel yang Anda simpan sebelumnya.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Detail selengkapnya ada di web.dev/wakelock.

rendersubtree atribut

Ada kalanya Anda tidak ingin bagian dari DOM langsung dirender. Misalnya, scroller dengan konten dalam jumlah besar, atau UI bertab tempat hanya sebagian konten yang terlihat pada waktu tertentu.

Atribut rendersubtree baru memberi tahu browser bahwa ia dapat melewati rendering subhierarki tersebut. Dengan begitu, browser dapat menghabiskan lebih banyak waktu untuk memproses bagian halaman lainnya sehingga meningkatkan performa.

Jika rendersubtree disetel ke invisible, konten elemen tidak akan digambar atau diuji hit, sehingga memungkinkan pengoptimalan rendering.

Mengubah rendersubtree menjadi activatable akan membuat konten terlihat dengan menghapus atribut invisible, dan merender konten.

Chrome Dev Summit 2019

Jika Anda melewatkan Chrome Dev Summit, semua pembahasan ada di channel YouTube kami.

Jake juga memiliki rangkaian pesan Twitter yang keren dengan semua hal seru yang terjadi di sela-sela diskusi, termasuk anggota terbaru tim kami, Surjiko.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan pada Chrome 78.

Subscribe

Ingin terus mendapatkan video terbaru kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 80 dirilis, saya akan segera memberi tahu Anda -- apa yang baru di Chrome!