Menginstal aplikasi web dengan elemen penginstalan HTML baru

Patrick Brosset

Dipublikasikan: 12 Mei 2026

Penginstalan aplikasi web selalu memerlukan JavaScript. Saat Anda menggunakan peristiwa beforeinstallprompt, alur penginstalan sepenuhnya berada dalam skrip. Elemen baru <install> mengubah hal tersebut: cukup letakkan satu elemen HTML ke halaman Anda dan browser akan merender tombol penginstalan tepercaya untuk Anda, tanpa memerlukan JavaScript yang diperlukan.

Tim Microsoft Edge, berkolaborasi dengan tim Chrome, menerapkan elemen <install> di Chromium. Sekarang, Anda dapat mengujinya di balik flag di Chrome atau Edge dari versi 148, dan sebagai uji coba origin yang dapat Anda gunakan di kedua browser mulai dari 148 hingga 153.

Cobalah, dan pelajari perbandingannya dengan Web Install API (navigator.install()) yang bersifat imperatif, yang memiliki uji coba origin sendiri.

Permasalahan

Penginstalan aplikasi web terfragmentasi. Setiap browser memiliki kumpulan titik entri sendiri, misalnya ikon kolom alamat, item menu, dan perintah. Developer memiliki kontrol terbatas atas waktu dan cara alur penginstalan ditampilkan.

Membuat pengalaman seperti app store yang memungkinkan pengguna menginstal aplikasi lain dari situs Anda menjadi lebih sulit, karena penginstalan secara historis dibatasi ke halaman saat ini.

Elemen <install>

Konten dan presentasi elemen HTML <install> baru dikontrol oleh browser. Mirip dengan elemen izin lainnya seperti <geolocation>, kontrol browser atas teks label, bahasa, dan tampilan tombol berarti browser dapat mempercayai klik pengguna sebagai sinyal niat yang sebenarnya.

Pengguna yang mengklik tombol berlabel "Instal Aplikasi Luar Biasa" kemungkinan tidak akan terkejut saat perintah penginstalan muncul.

Karena browser merender tombol, Anda mendapatkan fasilitas penginstalan tepercaya dengan kode minimal dan tidak perlu mengatur upacara beforeinstallprompt di JavaScript.

Menginstal aplikasi saat ini

Jika halaman saat ini menautkan ke manifes yang memiliki an id kolom, Anda hanya memerlukan satu elemen:

<install></install>

Browser merender tombol dengan teks dan ikonografi standar, dan saat pengguna mengkliknya, alur penginstalan normal browser akan dimulai.

Menginstal aplikasi lain

Untuk menginstal aplikasi web yang berada di origin yang berbeda dengan halaman saat ini, gunakan atribut installurl untuk mengarah ke aplikasi web lainnya:

<install installurl="https://awesome-app.com/"></install>

Jika halaman di https://awesome-app.com menautkan ke manifes yang menentukan kolom id, itulah yang perlu Anda lakukan.

Jika tidak ada kolom id, gunakan atribut manifestid untuk memberikan manifes yang dihitung id:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

Untuk mendapatkan id manifes yang dihitung:

1. Buka DevTools.
2. Buka tab Application.
3. Di bagian Identity, salin nilai Computed App ID.

Dengan menggunakan tombol <install> untuk menginstal aplikasi origin lain, Anda dapat membuat halaman katalog yang memungkinkan pengguna menginstal beberapa aplikasi, masing-masing dengan tombol <install> sendiri.

Menyediakan konten penggantian

Jika browser tidak mendukung elemen <install>, HTML apa pun yang Anda masukkan ke dalam elemen akan ditampilkan:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

Mendeteksi dukungan

Jika konten penggantian tidak cukup untuk kasus penggunaan Anda dan Anda lebih suka untuk menerapkan pengalaman pengguna yang berbeda di browser yang tidak mendukung elemen <install>, gunakan JavaScript untuk mendeteksi dukungan:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

Menangani peristiwa

Elemen <install> memicu peristiwa yang dapat Anda dengarkan untuk error keberhasilan, penolakan, dan validasi:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

Cobalah sekarang

Untuk mencoba elemen <install> hari ini, Anda memiliki dua opsi:

• Uji elemen secara lokal di perangkat Anda saja.
• Uji elemen dalam kondisi sebenarnya, dengan pengguna Anda, dengan mendaftar ke uji coba origin.

Menguji secara lokal

Untuk menguji elemen di perangkat Anda sendiri hari ini:

1. Gunakan Chrome atau Edge versi 148 atau yang lebih baru.
2. Buka about://flags/#web-app-install-element di tab baru.
3. Setel Web App Install Element ke Enabled.
4. Mulai ulang browser.

Menguji di situs aktif menggunakan uji coba origin

Uji coba origin memungkinkan pengguna sebenarnya di situs produksi Anda menggunakan fitur ini tanpa harus mengaktifkan flag terlebih dahulu.

1. Buka halaman pendaftaran uji coba origin elemen <install> .
2. Login.
3. Klik Register.
4. Masukkan origin situs Anda, dan isi bagian formulir lainnya.
5. Setelah formulir dikirimkan, Anda akan mendapatkan string token.
6. Tambahkan token ke halaman situs Anda menggunakan tag <meta>:

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Atau, Anda dapat mengirim token sebagai header respons HTTP:

Origin-Trial: YOUR_TOKEN_HERE

Uji coba origin tersedia untuk Chrome dan Edge dalam versi 148 hingga 153, dan token yang sama akan berfungsi di kedua browser. Untuk mempelajari uji coba origin lebih lanjut, lihat:

• Memulai uji coba origin, untuk Chrome.
• Menguji API dan fitur eksperimental menggunakan uji coba origin trials, untuk Edge.

Lihat penerapannya

Lihat demo <install> Element Store, katalog PWA yang menggunakan elemen <install> untuk memungkinkan Anda menginstal beberapa aplikasi contoh.

Perbandingan dengan Web Install API

Elemen <install> bukan satu-satunya cara kami bereksperimen untuk meningkatkan penginstalan aplikasi di web.

Sebelumnya, kami bereksperimen dengan Web Install API (navigator.install()), yang merupakan JavaScript API imperatif yang juga memungkinkan situs Anda memicu penginstalan aplikasi web origin yang sama atau lintas origin. Untuk mempelajari lebih lanjut, lihat The Web Install API siap diuji testing.

Web Install API juga memiliki uji coba origin sendiri .

Berikut perbandingan kedua pendekatan tersebut:

Beri tahu kami pendapat Anda

Kami aktif mencari masukan tentang kedua pendekatan tersebut. Bergantung pada kebutuhan Anda, kami dapat menambahkan dukungan untuk elemen <install>, atau navigator.install() API, atau keduanya.

Untuk memberikan masukan tentang elemen <install>, buka masalah di repo WICG yang didedikasikan untuk proposal ini.

Untuk memberikan masukan tentang navigator.install() API, tambahkan komentar ke masalah Masukan Developer: navigator.install versus <install> elemen.

Resource

• Penjelasan: elemen <install>
• Demo: Toko elemen <install>
• Petunjuk penggunaan dan sumber demo
• Entri Status Platform Chrome
• Web Install API siap diuji (blog Edge)
• Penjelasan Web Install API