Baru di Chrome 73

Pete LePage

Di Chrome 73, kami telah menambahkan dukungan untuk:

Dan masih ada banyak lagi!

Saya Pete LePage. Mari kita lihat yang baru untuk developer di Chrome 73.

Log perubahan

Bagian ini hanya mencakup beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 73.

Progressive Web App berfungsi di mana saja

Progressive Web App memberikan pengalaman mirip aplikasi yang dapat diinstal, yang dibuat dan dikirim langsung melalui web. Di Chrome 73, kami telah menambahkan dukungan untuk macOS, sehingga dukungan untuk Progressive Web App tersedia di semua platform desktop - Mac, Windows, ChromeOS, dan Linux, serta perangkat seluler, yang menyederhanakan pengembangan aplikasi web.

Progressive Web App cepat dan andal; selalu memuat dan berperforma dengan kecepatan yang sama, terlepas dari koneksi jaringan. Fitur ini memberikan pengalaman yang kaya dan menarik melalui fitur web modern yang memanfaatkan kemampuan perangkat sepenuhnya.

Pengguna dapat menginstal PWA Anda dari menu konteks Chrome, atau Anda dapat langsung mempromosikan pengalaman penginstalan menggunakan peristiwa beforeinstallprompt. Setelah diinstal, PWA akan terintegrasi dengan OS agar berperilaku seperti aplikasi native: pengguna menemukan dan meluncurkannya dari tempat yang sama dengan aplikasi lain, PWA berjalan di jendelanya sendiri, muncul di pengalih tugas, ikonnya dapat menampilkan badge notifikasi, dan sebagainya.

Kami ingin menutup kesenjangan kemampuan antara web dan native untuk memberikan fondasi yang kuat bagi aplikasi modern yang ditayangkan di web. Kami sedang berupaya menambahkan kemampuan platform web baru yang memberi Anda akses ke hal-hal seperti sistem file, wake lock, menambahkan badge standby ke kolom URL untuk memberi tahu pengguna bahwa PWA Anda dapat diinstal, penginstalan kebijakan untuk perusahaan, dan banyak lagi.

Jika Anda sudah mem-build PWA seluler, PWA desktop tidak berbeda. Bahkan, jika Anda telah menggunakan desain responsif, Anda mungkin sudah siap. Satu codebase Anda akan berfungsi di desktop dan perangkat seluler. Jika baru memulai PWA, Anda akan terkejut dengan kemudahan pembuatannya.

  1. Menambahkan manifes
  2. Membuat kumpulan ikon
  3. Menambahkan boilerplate service worker

Kemudian, lakukan iterasi dari sana.

Signed HTTP Exchange

Signed HTTP Exchanges (SXG), bagian dari teknologi baru yang disebut Paket Web kini tersedia di Chrome 73. Signed HTTP Exchange memungkinkan pembuatan konten "portabel" yang dapat dikirim oleh pihak lain, dan ini adalah aspek utamanya, yaitu mempertahankan integritas dan atribusi situs asli.

Signed HTTP Exchange: Inti

Tindakan ini akan memisahkan asal konten dari server yang mengirimkannya, tetapi karena ditandatangani, konten tersebut seolah-olah dikirim dari server Anda. Saat memuat Signed Exchange ini, browser dapat menampilkan URL Anda dengan aman di kolom URL karena tanda tangan dalam pertukaran menunjukkan konten yang awalnya berasal dari origin Anda.

Pertukaran HTTP yang ditandatangani memungkinkan pengiriman konten yang lebih cepat bagi pengguna, sehingga mungkin untuk mendapatkan manfaat CDN tanpa harus menyerahkan kontrol kunci pribadi sertifikat Anda. Tim AMP berencana menggunakan signed HTTP exchange di halaman hasil penelusuran Google untuk meningkatkan kualitas URL AMP dan mempercepat klik di hasil penelusuran.

Lihat postingan Signed HTTP Exchanges dari Kinuko untuk mengetahui detail cara memulai.

Stylesheet yang dapat dibuat

Stylesheet yang Dapat Dibuat, yang baru di Chrome 73, memberi kita cara baru untuk membuat dan mendistribusikan gaya yang dapat digunakan kembali, yang sangat penting saat menggunakan Shadow DOM.

Anda selalu dapat membuat stylesheet menggunakan JavaScript. Buat elemen <style> menggunakan document.createElement('style'). Kemudian, akses properti sheet-nya untuk mendapatkan referensi ke instance CSSStyleSheet yang mendasarinya, dan tetapkan gaya.

Diagram yang menunjukkan persiapan dan penerapan CSS

Menggunakan metode ini cenderung menyebabkan penggelembungan gaya. Lebih buruk lagi, hal ini menyebabkan konten tanpa gaya berkedip. Stylesheet yang Dapat Dibuat memungkinkan Anda menentukan dan menyiapkan gaya CSS bersama, lalu menerapkan gaya tersebut ke beberapa Root Bayangan atau Dokumen dengan mudah dan tanpa duplikasi.

Update pada CSSStyleSheet bersama diterapkan ke semua root tempatnya diadopsi, dan pengadopsian stylesheet dilakukan dengan cepat dan sinkron setelah sheet dimuat.

Memulainya sangat mudah, buat instance CSSStyleSheet baru, lalu gunakan replace atau replaceSync untuk memperbarui aturan stylesheet.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Lihat postingan Constructable Stylesheets: seamless reusable styles Jason Miller untuk mengetahui detail selengkapnya dan contoh kode.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 73 untuk developer, tentu saja, ada banyak lagi.

  • matchAll(), adalah metode pencocokan ekspresi reguler baru pada prototipe string, dan menampilkan array yang berisi kecocokan lengkap.
  • Elemen <link> kini mendukung properti imagesrcset dan imagesizes agar sesuai dengan atribut srcset dan sizes dari HTMLImageElement.
  • Penerapan radius shadow blur Blink, kini cocok dengan Firefox dan Safari.
  • Mode gelap untuk UI Chrome kini didukung di Mac, dan dukungan Windows sedang dalam proses. Selain itu, ada pekerjaan pada kueri media CSS: prefers-color-scheme, yang dapat digunakan untuk mendeteksi apakah pengguna telah meminta sistem menggunakan tema warna terang atau gelap. Bug pelacakan untuk hal ini adalah Menambahkan dukungan untuk fitur media prefers-color-scheme CSS Untuk Chrome, dan Firefox.

Langganan

Ingin mendapatkan info terbaru terkait video kami, lalu subscribe ke channel YouTube Chrome Developers kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 74 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome.