Since we first launched the add to home screen banner, we’ve been working to label Progressive Web Apps more clearly and simplify the way users can install them. Our eventual goal is to provide an install button in the omnibox across all platforms, and in Chrome 68 we are making changes towards that goal. Show What’s changing?Starting in Chrome 68 on Android (Stable in July 2018), Chrome will no longer show the add to home screen banner. If the site meets the add to home screen criteria, Chrome will show the mini-infobar. Then, if the user clicks on the mini-infobar, or you call A2HS banner Chrome 67 and before Shown automatically when site meets the add to home screen criteria, and the site does not call OR Shown by calling Mini-infobar Chrome 68 and later Shown when the site meets the add to home screen criteria If dismissed by a user, it will not be shown until a sufficient period of time (~3 months) has passed. Shown regardless of if This UI treatment will be removed in a future version of Chrome when the omnibox install button is introduced. A2HS Dialog Shown by calling OR Shown when a user taps the mini-infobar in Chrome 68 and later. OR Shown after the user clicks 'Add to Home screen' from the Chrome menu in all Chrome versions. The mini-infobarThe mini-infobar is a Chrome UI component and is not controllable by the site, but can be easily dismissed by the user. Once dismissed by the user, it will not appear again until a sufficient amount of time has passed (currently 3 months). The mini-infobar will appear when the site meets the add to home screen criteria, regardless of whether you The mini-infobar is an interim experience for Chrome on Android as we work towards creating a consistent experience across all platforms that includes an install button into the omnibox. ## Triggering the add to home screen dialog Instead of prompting the user on page load (an ), you can indicate your app can be installed with some UI, which will then show the modal install prompt. For example this desktop PWA adds an ‘Install App’ button just above the user's profile name. Prompting to install your app on a user gesture feels less spammy to the user and increases the likelihood that they’ll click ‘Add’ instead of ‘Cancel’. Incorporating an Install button into your app means that even if the user chooses not to install your app today, the button will still be there tomorrow, or whenever they’re ready to install. Listening for the beforeinstallprompt eventIf your site meets the add to home screen criteria, Chrome will fire a
The Showing the dialog with prompt()To show the add to home screen dialog, call
You can only call Additional ResourcesCheck out App Install Banners for more information, including:
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2018-06-04 UTC. [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] |