{"slug": "install-web-apps-with-the-new-html-install-element", "title": "Install web apps with the new HTML install element", "summary": "The article announces a new `<install>` HTML element, developed by Microsoft Edge and Chrome teams, that allows developers to add a trusted, browser-rendered install button to web pages without requiring JavaScript. This element simplifies web app installation by replacing the previous `beforeinstallprompt` event method, supports installing apps from different origins via the `installurl` attribute, and is available for testing behind a flag or origin trial in Chrome and Edge versions 148-153.", "body_md": "Published: May 12, 2026\nInstalling web apps has always required JavaScript. When you use the\nbeforeinstallprompt\nevent, the installation flow lives entirely in script. The\nnew <install>\nelement changes that: drop a single HTML element into your page\nand the browser renders a trusted install button for you, with no JavaScript\nrequired.\nThe Microsoft Edge team, in collaboration with the Chrome team, implemented the\n<install>\nelement in Chromium. It's now available for you to test\nbehind a flag in Chrome or Edge from version 148, and as an\norigin trial\nwhich you can use in both browsers starting with 148 and ending with 153.\nTry it, and learn how it compares to the imperative Web Install\nAPI\n(navigator.install()\n), which has its own origin\ntrial.\nThe problem\nWeb app installation is fragmented. Every browser has its own set of entry points, for example address-bar icons, menu items, and prompts. Developers have limited control over when and how the install flow is surfaced.\nBuilding an app-store-like experience that lets users install other apps from your site is harder, because installation has historically been restricted to the current page.\nThe <install>\nelement\nThe new <install>\nHTML element's content and presentation is controlled by the\nbrowser. Similar to other permission elements like <geolocation>\n, the\nbrowser's control over the button's label text, language, and appearance means\nit can trust the user's click as a genuine signal of intent.\nA user who clicks a button labeled \"Install Wonderful Application\" is unlikely to be surprised when an install prompt appears.\nBecause the browser renders the button, you get a trusted install affordance\nwith minimal code and no need to orchestrate the beforeinstallprompt\nceremony\nin JavaScript.\nInstall the current app\nIf the current page links to a manifest that has an\nid\nfield, a single element is all you need:\n<install></install>\nThe browser renders the button with standardized text and iconography, and when the user clicks it, the browser's normal installation flow kicks in.\nInstall a different app\nTo install a web app that's on a different origin than the current page, use the\ninstallurl\nattribute to point to the other web app:\n<install installurl=\"https://awesome-app.com/\"></install>\nIf the page at https://awesome-app.com links to a\nmanifest which defines an id\nfield, then that's all you need to do.\nIf no id\nfield exists, use the manifestid\nattribute to provide a computed\nmanifest id\n:\n<install installurl=\"https://awesome-app.com/\"\nmanifestid=\"https://awesome-app.com/?source=pwa\">\n</install>\nTo get the computed manifest id\n:\n- Open DevTools.\n- Go to the Application tab.\n- Under the Identity section, copy the Computed App ID value.\nUsing the <install>\nbutton to install other origin apps means you can build a\ncatalog page that lets users install multiple apps, each with its own\n<install>\nbutton.\nProvide fallback content\nIf the browser doesn't support the <install>\nelement, whatever HTML you put\ninside the element is displayed:\n<install installurl=\"https://awesome-app.com/\">\n<a href=\"https://awesome-app.com/\">Launch Awesome App</a>\n</install>\nDetect support\nIf the fallback content isn't enough for your use case and you prefer to\nimplement a different user experience on browsers that don't support the\n<install>\nelement, use JavaScript to detect support:\nif ('HTMLInstallElement' in window) {\n// The <install> element is supported.\n}\nHandle events\nThe <install>\nelement fires events you can listen to for success, dismissal,\nand validation errors:\nconst button = document.querySelector('install');\nbutton.addEventListener('promptaction', () => {\nconsole.log('Installation succeeded');\n});\nbutton.addEventListener('promptdismiss', () => {\nconsole.log('User dismissed the install prompt');\n});\nbutton.addEventListener('validationstatuschanged', (e) => {\nif (e.target.invalidReason === 'install_data_invalid') {\nconsole.error('Invalid install data:', e.target.invalidReason);\n}\n});\nTry it today\nTo try the <install>\nelement today, you have two options:\n- Test the element locally on your device only.\n- Test the element in real conditions, with your users, by registering for the origin trial.\nTest locally\nTo test the element on your own device today:\n- Use Chrome or Edge version 148 or later.\n- Go to\nabout://flags/#web-app-install-element\nin a new tab. - Set Web App Install Element to Enabled.\n- Restart the browser.\nTest on your live site using the origin trial\nThe origin trial lets real users on your production site use the feature without having to enable the flag first.\n- Open the\n<install>\nelement origin trial registration page. - Sign in.\n- Click Register.\n- Enter your site's origin, and fill the rest of the form.\n- Once the form is submitted, you get a token string.\n- Add the token to your site's pages by using a\n<meta>\ntag:\n<meta http-equiv=\"origin-trial\" content=\"YOUR_TOKEN_HERE\">\nAlternatively, you can send the token as an HTTP response header instead:\nOrigin-Trial: YOUR_TOKEN_HERE\nThe origin trial is available for both Chrome and Edge in versions 148 through 153, and the same token will work in both browsers. To learn more about origin trials, see:\n- Get started with origin trials, for Chrome.\n- Test experimental APIs and features by using origin trials, for Edge.\nSee it in action\nCheck out the <install>\nElement Store\ndemo, a\nPWA catalog that uses the <install>\nelement to let you install several sample\napps.\nComparison to the Web Install API\nThe <install>\nelement isn't the only way we're experimenting with how to\nimprove app installations on the web.\nPreviously, we experimented with the Web Install API (navigator.install()\n),\nwhich is an imperative JavaScript API that also lets your site trigger\ninstallation of same-origin or cross-origin web apps. To learn more, see The\nWeb Install API is ready for\ntesting.\nThe Web Install API also has its own origin trial.\nHere's how the two approaches compare:\nLet us know what you think\nWe're actively seeking feedback on both approaches. Depending on your needs, we\ncould add support for the <install>\nelement, or the navigator.install()\nAPI,\nor both.\nTo share feedback about the <install>\nelement, open an issue on the WICG repo\ndedicated to this\nproposal.\nTo share feedback about the navigator.install()\nAPI, add a comment to the\nDeveloper Feedback: navigator.install versus <install>\nelement\nissue.", "url": "https://wpnews.pro/news/install-web-apps-with-the-new-html-install-element", "canonical_source": "https://developer.chrome.com/blog/install-element-ot?hl=en", "published_at": "2026-05-12 07:00:00+00:00", "updated_at": "2026-05-24 05:08:59.726882+00:00", "lang": "en", "topics": ["developer-tools", "products"], "entities": ["Microsoft Edge", "Chrome", "Chromium"], "alternates": {"html": "https://wpnews.pro/news/install-web-apps-with-the-new-html-install-element", "markdown": "https://wpnews.pro/news/install-web-apps-with-the-new-html-install-element.md", "text": "https://wpnews.pro/news/install-web-apps-with-the-new-html-install-element.txt", "jsonld": "https://wpnews.pro/news/install-web-apps-with-the-new-html-install-element.jsonld"}}