Add to Home screen (or A2HS for short) is a feature available in modern browsers that allows a user to "install" a web app, i.e. add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. This guide explains how A2HS is used, and what you need to do as a developer to allow your users to take advantage of it. A2HS is thought to be part of the Progressive Web App philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. Part of this is the simple gesture of accessing an app
by tapping its icon on your Home screen, and then having it appear neatly in its own window. A2HS makes this possible. A2HS is supported in all mobile browsers,
except iOS webview. It's also supported in some Chromium desktop browsers. Firefox has had mobile support since v58. See caniuse.com for exact details. We've written a very simple example web site (see our demo live, and also see the source code) that doesn't do
much, but was developed with the necessary code to allow it to be added to a Home screen, as well as a service worker to enable it to be used offline. The example displays a series of fox pictures. If you have either Firefox for Android or Chrome for Android available, use it to navigate to our demo (the URL bar appears on the top in Chrome and at the bottom in Firefox).
Open the menu next to the URL bar. Depending on whether you're using Chrome or Android you'll see a menu option "Install" or "Install App". This is the "Add to Home screen" option displayed for any site that has the necessary features in place.
Note: On older browser versions you may see a "home" icon with a plus (+) icon inside it. This does the same thing!
Selecting the option will start the process of adding the application to the home screen. This process may differ slightly depending on the browser, mobile device operating system, and even the device. For example, Firefox on Android on a Google Pixel 3 will display the Pixel launcher.
Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do.
Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it. How do you make an app A2HS-ready?To enable your app to be added to a Home screen, it needs the following:
ManifestThe web manifest is written in standard JSON format and should be placed somewhere inside your app directory (in the root is probably best) with the name Note: The
The fields needed for A2HS are as follows:
The manifest for our sample app looks like this:
Appropriate iconAs shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. You can include more sizes if you want; Android will choose the most appropriate size for each different use case. You could also decide to include different types of icons so devices can use the best one they are able to (e.g., Chrome already supports the WebP format). Note that the In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the Google Play icon design specifications). Link the HTML to the manifestTo finish setting up your manifest, you need to reference it from the HTML of your application's home page:
Browsers that support A2HS will know where to look for your manifest once this is in place. What does A2HS not give you?Bear in mind that when you add an app to your Home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. To make your app work offline, you have to use the Service Worker API to handle storing the assets offline, and if required, Web storage or IndexedDB to store its data. In our example app, we've just used a service worker to store all necessary files. The
service worker is registered against the site with the final code block in the A2HS on desktopWhile originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too. Note: At the time of writing, the functionality described below was only supported in newer versions of Chrome — by default on Windows, and behind the Adding an install buttonTo make our PWA installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture:
We then gave it some simple styling:
JavaScript for handling the installAt the bottom of our
We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting
browsers will fire a
So here we:
The click handler contains the following steps:
So when the button is clicked, the install prompt appears.
If the user selects Install, the app is installed (available as standalone desktop app), and the Install button no longer shows (the
If the user selects Cancel, the state of the app goes back to how it was before the button was clicked. See alsoHow do I get an app icon back on my Home Screen?Touch and hold the app, then lift your finger. If the app has shortcuts, you'll get a list. Touch and hold the shortcut. Slide the shortcut to where you want it.. From the bottom of your Home screen, swipe up. Learn how to open apps.. Touch and drag the app. ... . Slide the app to where you want it.. How do I find a missing app icon on my iPhone?Find your apps in App Library on iPhone. Go to the Home Screen, then swipe left past all your Home Screen pages to get to App Library.. Tap the search field at the top of the screen, then enter the name of the app you're looking for. Or scroll up and down to browse the alphabetical list.. To open an app, tap it.. Why can I not add app to Home Screen?This is because if the app hasn't been installed yet, it will not appear on the home screen. You can find the installed and uninstalled apps in App Gallery, where the pre-installed apps and the third-party ones are all be stored.
|