Chrome 84 mulai diluncurkan ke stabil sekarang.
Berikut hal yang perlu Anda ketahui:
- Pengguna dapat memulai tugas umum dalam aplikasi Anda, dengan Pintasan Ikon Aplikasi.
- Web Animations API menambahkan dukungan untuk banyak fitur yang sebelumnya tidak didukung.
- Penguncian layar saat aktif dapat mencegah peredupan atau penguncian layar.
- Content Indexing API membantu menampilkan konten yang tersedia secara offline.
- Ada uji coba origin baru untuk deteksi tidak ada aktivitas dan Web Assembly SIMD.
- Perubahan kebijakan Cookie Situs yang sama mulai diluncurkan kembali.
- Dan banyak lagi.
Saya Pete LePage, bekerja dan mengambil gambar dari rumah. mari selami dan lihat apa yang baru untuk developer di Chrome 84.
Pintasan ikon aplikasi
Pintasan ikon aplikasi memudahkan pengguna memulai dengan cepat tugas umum dalam aplikasi Anda. Misalnya, menulis tweet baru, mengirim pesan, atau melihat notifikasinya. Kode ini didukung di Chrome untuk Android.
Pintasan ini dipanggil dengan menekan lama ikon aplikasi di Android. Menambahkan
pintasan ke PWA sangat mudah, buat properti shortcuts
baru di manifes aplikasi
web, deskripsikan pintasan, dan tambahkan ikon Anda.
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list you saved for later",
"url": "/play-later",
"icons": [
{ "src": "//play-later.png", "sizes": "192x192" }
]
},
]
Lihat Menyelesaikan berbagai hal dengan cepat dengan pintasan aplikasi untuk detail selengkapnya.
API animasi web
Chrome 84 menambahkan sejumlah fitur yang sebelumnya tidak didukung ke Web Animations API.
animation.ready
dananimation.finished
telah dijanjikan.- Browser kini dapat membersihkan dan menghapus animasi lama, sehingga menghemat memori dan meningkatkan performa.
- Kini Anda dapat menggabungkan animasi menggunakan mode gabungan - dengan
opsi
add
danaccumulate
.
Saya tidak dapat menilai semua peningkatan atau menawarkan contoh yang bagus di sini, jadi lihat peningkatan Web Animations API di Chromium 84 untuk mengetahui detail selengkapnya.
API pengindeksan konten
Apakah konten Anda tersedia tanpa koneksi jaringan. Tetapi pengguna tidak mengetahuinya? Apakah ini benar-benar tersedia? Ada masalah penemuan.
Dengan Content Indexing API, yang baru saja lulus dari uji coba asli, Anda dapat menambahkan URL dan metadata untuk konten yang tersedia secara offline. Dengan menggunakan metadata tersebut, konten kemudian ditampilkan kepada pengguna sehingga meningkatkan visibilitas.
Untuk menambahkan konten ke indeks, panggil index.add()
pada pendaftaran pekerja layanan, dan berikan metadata yang diperlukan tentang konten.
const registration = await navigator.serviceWorker.ready;
await registration.index.add({
id: 'article-123',
url: '/articles/123',
launchUrl: '/articles/123',
title: 'Article title',
description: 'Amazing article about things!',
icons: [{
src: '/img/article-123.png',
sizes: '64x64',
type: 'image/png',
}],
});
Ingin melihat apa yang sudah ada di indeks Anda? Panggil index.getAll()
pada pendaftaran pekerja layanan.
const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
// entry.id, entry.launchUrl, etc. are all exposed.
}
Lihat Mengindeks halaman yang dapat offline dengan Content Indexing API untuk mengetahui detail selengkapnya.
API penguncian layar saat aktif
Saya suka memasak, tapi saya merasa sangat frustrasi saat mengikuti resep, dan {i>screen saver<i} muncul! Dengan API penguncian layar saat aktif, yang juga lulus dari uji coba originnya di Chrome 84, situs dapat meminta penguncian layar saat aktif untuk mencegah layar redup dan terkunci.
Bahkan, situs Betty Crocker menggunakannya sekarang, dan memublikasikan studi kasus di web.dev yang menunjukkan peningkatan indikator niat membeli sebesar 300%.
Untuk mendapatkan penguncian layar saat aktif, panggil navigator.wakeLock.request()
, lalu akan menampilkan
objek WakeLockSentinel
, yang digunakan untuk "melepaskan" penguncian layar saat aktif.
// Request the wake lock
const wl = await navigator.wakeLock.request('screen');
// Release the wake lock
wl.release();
Tentu saja, masih ada banyak hal lainnya, jadi lihat Tetap terjaga dengan Screen Wake Lock API, tetapi setidaknya layar saya tidak akan lagi dipenuhi tepung.
Uji coba origin
Ada dua uji coba origin baru yang ingin saya sebutkan. Jika Anda baru mengenal uji coba origin, lihat Memulai uji coba origin Chrome.
Deteksi tidak ada aktivitas
Idle Detection API memberi tahu Anda saat pengguna tidak ada aktivitas, yang menunjukkan bahwa ia mungkin sedang tidak berada di komputer. Ini sangat bagus untuk hal-hal seperti aplikasi chat, atau situs jaringan sosial, untuk memberi tahu pengguna apakah kontak mereka tersedia atau tidak.
// Create the idle detector
const idleDetector = new IdleDetector();
// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
const uState = idleDetector.userState;
const sState = idleDetector.screenState;
console.log(`Idle change: ${uState}, ${sState}.`);
});
// Start the idle detector.
await idleDetector.start({
threshold: 60000,
signal,
});
Lihat Mendeteksi pengguna yang tidak aktif dengan Idle Detection API untuk mempelajari lebih lanjut API, dan cara mulai bereksperimen dengan API tersebut sekarang.
SIMD Perakitan Web
Dan Web Assembly SIMD akan memulai uji coba origin. Alat ini memperkenalkan operasi yang dipetakan ke petunjuk SIMD yang umum tersedia di hardware. Operasi SIMD digunakan untuk meningkatkan performa, terutama dalam aplikasi multimedia.
Untuk mempelajari WebAssembly SIMD lebih lanjut, lihat Aplikasi paralel yang cepat dengan WebAssembly SIMD.
Dan lainnya
Chrome 84 adalah versi besar, tetapi ada beberapa update penting lain yang ingin saya tunjukkan.
- Kami melanjutkan peluncuran bertahap perubahan cookie SameSite.
- Situs dengan permintaan izin yang disalahgunakan, atau notifikasi menyesatkan, akan otomatis didaftarkan di UI notifikasi yang lebih tenang.
- Ada uji coba origin baru untuk QuicTransport.
Bacaan lebih lanjut
Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 84.
- Yang baru di Chrome DevTools (84)
- Penghentian & penghapusan Chrome 84
- Update ChromeStatus.com untuk Chrome 84
- Yang baru di JavaScript di Chrome 84
- Daftar perubahan repositori sumber Chromium
Langganan
Ingin terus mengetahui info terbaru tentang video kami, lalu subscribe ke channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Pete LePage, dan saya masih perlu potong rambut, tetapi segera setelah Chrome 85 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome!