Yeni HTML yükleme öğesiyle web uygulamalarını yükleme

Patrick Brosset

Yayınlanma tarihi: 12 Mayıs 2026

Web uygulamalarını yüklemek için her zaman JavaScript gerekmiştir. beforeinstallprompt etkinliğini kullandığınızda yükleme akışı tamamen komut dosyasında yer alır. Yeni <install> öğesi bunu değiştirir: Sayfanıza tek bir HTML öğesi bırakırsınız ve tarayıcı, JavaScript gerektirmeden sizin için güvenilir bir yükleme düğmesi oluşturur.

Microsoft Edge ekibi, Chrome ekibiyle işbirliği yaparak Chromium'da <install> öğesini uyguladı. Bu özellik, 148 sürümünden itibaren Chrome veya Edge'de bir işaretin arkasında test etmeniz için ve 148 ile 153 sürümleri arasında her iki tarayıcıda da kullanabileceğiniz bir kaynak denemesi olarak kullanıma sunulmuştur.

Deneyin ve kendi origin denemesine sahip olan zorunlu Web Install API (navigator.install()) ile nasıl karşılaştırıldığını öğrenin.

Sorun

Web uygulaması yükleme işlemi parçalıdır. Her tarayıcının kendi giriş noktaları vardır. Örneğin, adres çubuğu simgeleri, menü öğeleri ve istemler. Geliştiriciler, yükleme akışının ne zaman ve nasıl gösterileceği konusunda sınırlı kontrole sahiptir.

Yükleme işlemi geçmişte geçerli sayfayla sınırlı olduğundan, kullanıcıların sitenizden başka uygulamalar yüklemesine olanak tanıyan uygulama mağazası benzeri bir deneyim oluşturmak daha zordur.

<install> öğesi

Yeni <install> HTML öğesinin içeriği ve sunumu tarayıcı tarafından kontrol edilir. <geolocation> gibi diğer izin öğelerine benzer şekilde, tarayıcının düğme etiketinin metni, dili ve görünümü üzerindeki kontrolü, kullanıcının tıklamasını gerçek bir amaç sinyali olarak güvenilir kabul edebileceği anlamına gelir.

"Harika Uygulamayı Yükle" etiketli bir düğmeyi tıklayan kullanıcının, yükleme istemi göründüğünde şaşırması olası değildir.

Tarayıcı düğmeyi oluşturduğundan, minimum kodla güvenilir bir yükleme olanağı elde edersiniz ve JavaScript'te beforeinstallprompt törenini düzenlemeniz gerekmez.

Mevcut uygulamayı yükleyin

Geçerli sayfa, id alanı olan bir manifestoya bağlanıyorsa ihtiyacınız olan tek öğe şudur:

<install></install>

Tarayıcı, düğmeyi standartlaştırılmış metin ve simgelerle oluşturur. Kullanıcı düğmeyi tıkladığında tarayıcının normal yükleme akışı başlar.

Farklı bir uygulama yükleme

Mevcut sayfadan farklı bir kaynakta bulunan bir web uygulamasını yüklemek için installurl özelliğini kullanarak diğer web uygulamasına yönlendirin:

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

https://awesome-app.com adresindeki sayfa, id alanını tanımlayan bir manifeste bağlanıyorsa yapmanız gereken tek şey budur.

id alanı yoksa hesaplanmış bir manifest id sağlamak için manifestid özelliğini kullanın:

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

Hesaplanmış manifesti almak için id:

1. Geliştirici Araçları'nı açın.
2. Uygulama sekmesine gidin.
3. Kimlik bölümünde, Hesaplanmış Uygulama Kimliği değerini kopyalayın.

Diğer kaynaklı uygulamaları yüklemek için <install> düğmesini kullanmak, kullanıcıların her biri kendi <install> düğmesine sahip birden fazla uygulamayı yüklemesine olanak tanıyan bir katalog sayfası oluşturabileceğiniz anlamına gelir.

Yedek içerik sağlama

Tarayıcı <install> öğesini desteklemiyorsa öğenin içine yerleştirdiğiniz HTML gösterilir:

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

Algılama desteği

Yedek içerik kullanım alanınız için yeterli değilse ve <install> öğesini desteklemeyen tarayıcılarda farklı bir kullanıcı deneyimi uygulamayı tercih ediyorsanız desteği algılamak için JavaScript'i kullanın:

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

Etkinlikleri işleme

<install> öğesi, başarı, kapatma ve doğrulama hataları için dinleyebileceğiniz etkinlikleri tetikler:

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);
  }
});

Hemen deneyin

<install> öğesini bugün denemek için iki seçeneğiniz vardır:

• Öğeyi yalnızca cihazınızda yerel olarak test edin.
• Kaynak denemesine kaydolarak öğeyi gerçek koşullarda kullanıcılarınızla birlikte test edin.

Yerel olarak test etme

Öğeyi kendi cihazınızda bugün test etmek için:

1. Chrome veya Edge'in 148 ya da sonraki sürümlerini kullanın.
2. Yeni sekmede about://flags/#web-app-install-element adresine gidin.
3. Web Uygulaması Yükleme Öğesi'ni Etkin olarak ayarlayın.
4. Tarayıcıyı yeniden başlatın.

Kaynak denemesini kullanarak canlı sitenizde test etme

Kaynak denemesi, üretim sitenizdeki gerçek kullanıcıların özelliği önce işareti etkinleştirmeleri gerekmeden kullanmalarına olanak tanır.

1. <install> öğesi kaynak denemesi kaydı sayfasını açın.
2. Oturum açın.
3. Kaydol'u tıklayın.
4. Sitenizin kaynağını girin ve formun geri kalanını doldurun.
5. Form gönderildikten sonra bir jeton dizesi alırsınız.
6. <meta> etiketini kullanarak jetonu sitenizin sayfalarına ekleyin:

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

Alternatif olarak, jetonu HTTP yanıt başlığı olarak da gönderebilirsiniz:

Origin-Trial: YOUR_TOKEN_HERE

Bu kaynak denemesi, 148-153 sürümlerinde hem Chrome hem de Edge için kullanılabilir ve aynı jeton her iki tarayıcıda da çalışır. Deneme süreci hakkında daha fazla bilgi edinmek için aşağıdaki makalelere bakın:

• Chrome için orijin denemelerini kullanmaya başlayın.
• Edge için kaynak denemelerini kullanarak deneysel API'leri ve özellikleri test edin.

İşleyiş şeklini görün

<install> Element Store demosuna göz atın. Bu demo, <install> öğesini kullanarak birkaç örnek uygulama yüklemenize olanak tanıyan bir PWA kataloğudur.

Web Install API ile karşılaştırma

<install> öğesi, web'de uygulama yüklemelerini iyileştirme yöntemleri üzerinde yaptığımız denemelerden yalnızca biridir.

Daha önce, sitenizin aynı kaynaklı veya kaynaklar arası web uygulamalarının yüklenmesini de tetiklemesine olanak tanıyan zorunlu bir JavaScript API olan Web Install API (navigator.install()) ile ilgili bir deneme yapmıştık. Daha fazla bilgi için Web Install API test edilmeye hazır başlıklı makaleyi inceleyin.

Web Install API'nin de kendi kaynak denemesi vardır.

İki yaklaşımın karşılaştırması aşağıda verilmiştir:

Düşüncelerinizi bizimle paylaşın

Her iki yaklaşımla ilgili geri bildirimlerinizi bekliyoruz. İhtiyaçlarınıza bağlı olarak <install> öğesi, navigator.install() API'si veya her ikisi için de destek ekleyebiliriz.

<install> öğesiyle ilgili geri bildirim paylaşmak için bu öneriye özel WICG deposunda sorun bildirin.

navigator.install() API'si hakkında geri bildirim paylaşmak için Geliştirici Geri Bildirimi: navigator.install ve <install> element sorununa yorum ekleyin.

Kaynaklar

• Açıklayıcı: <install> öğesi
• Demo: <install> öğe mağazası
• Kullanım talimatları ve demo kaynağı
• Chrome Platform Status girişi
• Web Install API, test için hazır (Edge blogu)
• Web Install API açıklayıcısı