# Support web apps A web app turns a web page into an Android app, making it easier to find and simpler to use on mobile devices. A web app looks like a native app in a device's launcher. When opened, the web page is rendered in the user's default browser (*Settings\>Apps\>Default apps\>Browser app*) and displayed according to the browser's capabilities. You can distribute web apps the same way you can native apps. This includes adding them to collections in the managed Google Play store and remotely installing them on devices. > [!NOTE] > **Note:** In order to offer the best web app experience to users, we recommended following the [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) best practices when building your website. *** ** * ** *** ## Components of a web app To create a web app, you need to specify: - a **title** that is shown on the device on the managed Play Store and on the launcher, - a **start URL** that the web apps opens to, - a **display mode** that defines how the web app is displayed on the device. You can also set an **icon** for the web app to help users identify it. Icons are optional, but recommended. ### Title The title must be fewer than 30 characters. Depending on the form factor of the device, a web app's title may be truncated in the managed Play store and in the device's launcher. We therefore recommend specifying short title. ### Start URL The start URL of a web app defines the page the web app opens to. The user can then navigate to other URLs. The start URL must be a `HTTPS` or `HTTP` URL. The URL of the web app must have the `HTTPS` scheme when the display mode is full screen or standalone. ### Display mode The display mode describes what browser UI elements are visible when a web app is opened: - **Minimal UI:** the URL bar is shown at the top and the system status bar and navigation buttons are visible. For `HTTP` URLs, this is the only available option. - **Standalone:** the URL bar is not shown and the system status bar and navigation buttons are visible. - **Fullscreen:** the URL bar is not shown and the system status bar and navigation buttons are hidden; the websites's interface must provide all navigation controls. ![](https://developers.google.com/static/android/work/images/display-modes.svg) **Figure 1.** From left to right: Minimal UI, Standalone, and Fullscreen display modes. **Important:** Web app display modes (e.g., minimal UI, standalone, fullscreen) depend on the user selected default browser's compatibility. It is important to note that some browsers may not support all of these features. IT admins should verify browser compatibility before deployment. The display mode is only applied to pages of the same domain as the start URL. If the user navigates to a URL of a different domain than the start URL, then this new page will open in a [Chrome Custom Tab](https://developer.chrome.com/multidevice/android/customtabs) with the new URL visible to the user, regardless of the selected display mode. For example, if the start URL immediately redirects to a URL of a different domain, then this page will be displayed in a Chrome Custom Tab. When a user first opens a web app, a notification at the bottom of the screen is shown to inform them that they are in a browser rather than a native app. ![](https://developers.google.com/static/android/work/images/web-app-notification.svg) **Figure 2.** Notification shown to a user the first time they open a web app. ### Icon Specifying an icon helps users identify a web app. For any web app that doesn't have a specified icon, Google will insert and display the same default icon. To make it easier for your users to distinguish between their apps, we strongly recommend creating web apps with distinct, meaningful icons. IT admins can set a single icon for the web apps they create in the [managed Google Play iframe](https://developers.google.com/android/work/play/emm-api/managed-play-iframe#web-apps). When using the API to create web apps, you can allow IT admins to set multiple icons. These icons will all be embedded into the web app's APK and the Android system will display the one that's most suitable for the device's display resolution. The managed Play store always displays the first icon specified for a web app. The first icon should ideally be a 512x512 pixels square. PNG and JPEG are acceptable formats but must be no larger than 1MB. Icons that don't adhere to this format will be rescaled for the managed Play store entry. The icon also needs to be "maskable" to adapt its shape for each system. See [Maskable icons](https://web.dev/maskable-icon/) for details. When using the API the icon data must be encoded in base64url format (i.e. base64 but any '+' is replaced with a '-' and any '/' replaced with a '_' --- \[see [RFC 4648, section 5](https://tools.ietf.org/html/rfc4648#section-5) for details\]). *** ** * ** *** ## Create a web app You can create web apps either by embedding the managed Google Play iframe in your EMM console or by integrating with the API. The two approaches are interchangeable and offer the same end-user experience on devices, so it's up to you to decide which approach works best with your solution. ### Option 1: embed the managed Google Play iframe The managed Google Play iframe includes a user interface for IT admins to create, edit, and delete web apps. If you choose to support web apps through this option, follow the instructions to [embed the managed Google Play iframe](https://developers.google.com/android/work/play/emm-api/managed-play-iframe#add_the_iframe_to_your_console) into your EMM console. The web app interface is accessible from the iframe's left navigation menu. After a web app is created in the iframe, it takes a few minutes before the app can be selected in the interface. When a web app is selected, an [`onproductselect`](https://developers.google.com/android/work/play/emm-api/managed-play-iframe#step_3_handle_iframe_events) event is triggered with the web app's product ID passed in the event. Using a web app's product ID, you can [distribute it to users](https://developers.google.com/android/work/play/emm-api/web-apps#distribute-a-web-app). ### Option 2: integrate with the API Another way to support web apps in your EMM console is to integrate with the web apps API. To create a web app, use the method [`webapps.insert`](https://developers.google.com/android/work/play/emm-api/v1/webapps/insert). Additional methods are available to - List all of an enterprise's web apps - Retrieve the details of a single web app - Update web apps - Delete web apps For details, see the [API reference](https://developers.google.com/android/work/play/emm-api/v1/webapps).
Web apps created through the API can be added to policy immediately after creation. However, it may take several minutes before they are installed on devices or becomes visible to the user in the managed Play store. ## Distribute a web app You can distribute a web app just like any other app---by adding the product ID returned by the iframe or API to a device's [policy](https://developers.google.com/android/work/play/emm-api/distribute#remotely_install_apps). For a device to support a web app's display mode, it must have Google Chrome (package name `com.android.chrome`) installed. To ensure that Chrome is installed on the device, we recommend adding it to a device's policy and setting `autoInstallMode` to `forceAutoInstall`. If Google Chrome isn't installed on the device, then opening the web app will show a dialog indicating that the Google Chrome must be installed. ## Update a web app The managed Google Play iframe allows IT admins to edit the web apps they publish. Using the API, you can update any aspect of a web app by calling [`webapps.patch`](https://developers.google.com/android/work/play/emm-api/v1/webapps/patch). The method takes the app's name in addition to the same parameters as [`webapps.insert`](https://developers.google.com/android/work/play/emm-api/v1/webapps/insert). Updates take a few minutes to up to 24 hours to propagate across all devices, depending on the [app update settings](https://support.google.com/googleplay/work/answer/9350374). In some cases, users may need to clear the cache from their device's launcher app before any updates to web app titles are reflected in the launcher. Note that Google will also periodically refresh your web apps to update the Chrome wrapper---this won't affect enterprises or their users except that their web app's version numbers will change and the apps are automatically updated by the Play store at the next convenient time. ## Delete a web app The managed Google Play iframe allows IT admins to delete web apps. Using the API, you can call [`webapps.delete`](https://developers.google.com/android/work/play/emm-api/v1/webapps/delete) to delete a web app. Deleting a web app removes it from the managed Play store, but doesn't uninstall it from devices. To uninstall a web app from a device, call [`installs.delete`](https://developers.google.com/android/work/play/emm-api/v1/installs/delete).