Instalowanie aplikacji internetowych za pomocą nowego elementu instalacyjnego HTML

Patrick Brosset

Opublikowano: 12 maja 2026 r.

Instalowanie aplikacji internetowych zawsze wymagało JavaScriptu. Gdy używasz zdarzenia beforeinstallprompt, proces instalacji odbywa się w całości w skrypcie. Nowy element <install> to zmienia: wystarczy umieścić na stronie pojedynczy element HTML, a przeglądarka wyrenderuje zaufany przycisk instalacji bez użycia JavaScriptu.

Zespół Microsoft Edge we współpracy z zespołem Chrome zaimplementował element <install> w Chromium. Jest on teraz dostępny do testowania za pomocą flagi w Chrome lub Edge w wersji 148 i nowszych oraz jako testowanie origin którego możesz używać w obu przeglądarkach od wersji 148 do 153.

Wypróbuj go i dowiedz się, jak wypada w porównaniu z imperatywnym Web Install API (navigator.install()), który ma własną wersję próbną origin trial.

Problem

Instalacja aplikacji internetowych jest rozproszona. Każda przeglądarka ma własny zestaw punktów wejścia, np. ikony na pasku adresu, elementy menu i prośby. Deweloperzy mają ograniczoną kontrolę nad tym, kiedy i jak wyświetla się proces instalacji.

Trudniej jest tworzyć środowisko podobne do sklepu z aplikacjami, które umożliwia użytkownikom instalowanie innych aplikacji z Twojej witryny, ponieważ instalacja była historycznie ograniczona do bieżącej strony.

Element <install>

Zawartość i prezentacja nowego elementu HTML <install> są kontrolowane przez przeglądarkę. Podobnie jak w przypadku innych elementów uprawnień, takich jak <geolocation>, kontrola przeglądarki nad tekstem etykiety, językiem i wyglądem przycisku oznacza, że może ona traktować kliknięcie użytkownika jako prawdziwy sygnał intencji.

Użytkownik, który kliknie przycisk z etykietą „Zainstaluj wspaniałą aplikację”, raczej nie będzie zaskoczony, gdy pojawi się prośba o instalację.

Ponieważ przycisk jest renderowany przez przeglądarkę, uzyskujesz zaufaną afordancję instalacji przy użyciu minimalnej ilości kodu i bez konieczności koordynowania ceremonii beforeinstallprompt w JavaScript.

Zainstaluj bieżącą aplikację

Jeśli bieżąca strona zawiera link do pliku manifestu z polem id, wystarczy jeden element:

<install></install>

Przeglądarka renderuje przycisk ze standardowym tekstem i ikonografią, a gdy użytkownik go kliknie, uruchamia się normalny proces instalacji w przeglądarce.

Instalowanie innej aplikacji

Aby zainstalować aplikację internetową, która znajduje się w innej domenie niż bieżąca strona, użyj atrybutu installurl, aby wskazać inną aplikację internetową:

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

Jeśli strona pod adresem https://awesome-app.com zawiera link do manifestu, który definiuje pole id, to wszystko, co musisz zrobić.

Jeśli nie ma pola id, użyj atrybutu manifestid, aby podać obliczony manifest id:

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

Aby uzyskać obliczony identyfikator manifestu id:

1. Otwórz Narzędzia deweloperskie.
2. Otwórz kartę Aplikacja.
3. W sekcji Tożsamość skopiuj wartość Obliczony identyfikator aplikacji.

Używanie przycisku <install> do instalowania aplikacji z innych domen oznacza, że możesz utworzyć stronę katalogu, która umożliwia użytkownikom instalowanie wielu aplikacji, z których każda ma własny <install> przycisk.

Podawanie treści zastępczej

Jeśli przeglądarka nie obsługuje elementu <install>, wyświetla się dowolny kod HTML umieszczony w tym elemencie:

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

Wykrywanie obsługi

Jeśli treść zastępcza nie wystarcza w Twoim przypadku i wolisz wdrożyć inne wrażenia użytkownika w przeglądarkach, które nie obsługują elementu <install>, użyj JavaScriptu, aby wykryć obsługę:

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

Obsługa zdarzeń

Element <install> wywołuje zdarzenia, których możesz nasłuchiwać w przypadku powodzenia, odrzucenia, i błędów weryfikacji:

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

Wypróbuj już dzisiaj

Aby wypróbować element <install> już dziś, masz 2 możliwości:

• Przetestuj element lokalnie tylko na swoim urządzeniu.
• Przetestuj element w rzeczywistych warunkach, z udziałem użytkowników, rejestrując się w testowaniu origin.

Testowanie lokalne

Aby przetestować element na swoim urządzeniu już dziś:

1. Użyj Chrome lub Edge w wersji 148 lub nowszej.
2. W nowej karcie otwórz about://flags/#web-app-install-element.
3. Ustaw Element instalacji aplikacji internetowej na Włączony.
4. Uruchom ponownie przeglądarkę.

Testowanie w działającej witrynie za pomocą wersji próbnej origin

Wersja próbna umożliwia prawdziwym użytkownikom w Twojej witrynie produkcyjnej korzystanie z tej funkcji bez konieczności włączania flagi.

1. Otwórz stronę rejestracji w wersji próbnej origin elementu <install> origin trial.
2. Zaloguj się.
3. Kliknij Zarejestruj.
4. Wpisz domenę swojej witryny i wypełnij resztę formularza.
5. Po przesłaniu formularza otrzymasz ciąg tokena.
6. Dodaj token do stron swojej witryny za pomocą tagu <meta>:

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

Możesz też wysłać token jako nagłówek odpowiedzi HTTP:

Origin-Trial: YOUR_TOKEN_HERE

Testowanie origin jest dostępne w Chrome i Edge w wersjach od 148 do 153, a ten sam token będzie działać w obu przeglądarkach. Więcej informacji o wersjach próbnych:

• Wprowadzenie do wersji próbnych, dla Chrome.
• Testowanie eksperymentalnych interfejsów API i funkcji za pomocą wersji próbnych w Edge.

Zobacz, jak to działa

Zapoznaj się z wersją demonstracyjną sklepu z elementami <install> Element Store demo, czyli katalogiem PWA, który używa elementu <install>, aby umożliwić Ci zainstalowanie kilku przykładowych aplikacji.

Porównanie z interfejsem Web Install API

Element <install> to nie jedyny sposób, w jaki eksperymentujemy z ulepszaniem instalacji aplikacji w internecie.

Wcześniej eksperymentowaliśmy z interfejsem Web Install API (navigator.install()), który jest imperatywnym interfejsem JavaScript API, który umożliwia też Twojej witrynie wywoływanie instalacji aplikacji internetowych z tej samej lub innej domeny. Więcej informacji znajdziesz w artykule The Web Install API is ready for testing.

Interfejs Web Install API ma też własne testowanie origin.

Oto porównanie obu podejść:

Powiedz nam, co myślisz

Aktywnie zbieramy opinie na temat obu podejść. W zależności od Twoich potrzeb możemy dodać obsługę elementu <install>, interfejsu navigator.install() API lub obu tych rozwiązań.

Aby przesłać opinię o elemencie <install>, otwórz zgłoszenie w repozytorium WICG poświęconym tej propozycji.

Aby przesłać opinię o interfejsie navigator.install() API, dodaj komentarz do zgłoszenia Opinie deweloperów: navigator.install a <install> element issue.

Zasoby

• Wyjaśnienie: element <install>
• Prezentacja: sklep z elementami <install>
• Instrukcje użytkowania i źródło wersji demonstracyjnej
• Wpis stanu platformy Chrome
• Interfejs Web Install API jest gotowy do testowania (blog Edge)
• Wyjaśnienie interfejsu Web Install API