Chrome 79 sekarang diluncurkan!
- Progressive Web App yang terinstal di Android kini mendukung ikon maskable.
- Sekarang Anda dapat membuat pengalaman imersif dengan WebXR Device API.
- Wake Lock API tersedia sebagai uji coba origin.
- Atribut
rendersubtree
tersedia sebagai uji coba origin. - Video dari Chrome DevSummit kini tersedia secara online.
- Dan masih banyak lagi.
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.
- Yang baru di Chrome DevTools (79)
- Penghentian & penghapusan Chrome 79
- Update ChromeStatus.com untuk Chrome 79
- Yang baru di JavaScript di Chrome 79
- Daftar perubahan repositori sumber Chromium
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!