PWA — Add to home screen from different browsers

3 min readJul 6, 2019

--

Progressive Web Apps (PWA) now widely accepted by industry. There are many PWAs in production. Here are some examples of PWAs.

Progressive web application is a new software development methodology which combines features offered by most modern browsers with the benefits of mobile experience.

As a part of this post, we will be talking about “Add to home screen” experience on different browsers.

To get more details on PWA you can refer this.

Add to home screen

Add to Home Screen, sometimes referred to as the web app install prompt, makes it easy for users to install Progressive Web App on user’s mobile or desktop device. It starts as a normal web page in a browser, and as a user explores the webpage, they will be prompted to “Add to Home Screen”.
Once the user accepts this prompt, PWA gets added to their home screen. Once opened from the home screen, it can even hide the browser UI controls and appear as an app.

Recently while working on PWA, we were trying to understand Add to home screen behaviour on Android. On Android user can have multiple browsers installed, one of them could be the default one. In addition to this, user might also have installed the native app.

We were on look out for answers to the following questions:

What is user experience after installing PWA from different browsers ?
Which browser will it use after adding to home screen ?
What if the browser is uninstalled ?

So we thought these are valid questions and there seems to be some confusion around those. So here are our findings.

What happens if the user has already installed the native app for the site?

Using add to Home screen, users will be able to add PWA independent of any native apps. Users can install both PWA as well as native app. You can set different icon for PWA and native app, but it will depend on your use case. In case of Twitter they named PWA as “Twitter Lite”

What happens if the user adds the same app to home screen from multiple browsers?

On Android user can have multiple browsers and user might add the same app to home screen from multiple browsers like Google Chrome, Firefox, Opera and so on. The home screen will have icon for the PWA for each browser. Note that here app means Progressive Web App.

Now let’s take a look at some of these scenarios:

User adds the app to home screen using any browser: It will add an app on user’s device which looks and behaves like a native app and when user uses that app, it will open in the browser from which it was added to home screen and not the default browser of your device
User has added the app using any browser and removes/uninstalls the app: It will just remove the app from the device

Here is a video showing the current behaviour!

What happens if user uninstalls the browser ?

It totally depends on the browser. Let’s look at following scenarios.

May this behaviour of browser will change in future.

Here are some resources for “Add to Home Screen”:

You can also check my another blog related to PWA, Adding Push Notifications to a Web App.

PWA — Add to home screen from different browsers

Add to home screen

What happens if the user has already installed the native app for the site?

What happens if the user adds the same app to home screen from multiple browsers?

What happens if user uninstalls the browser ?

Written by Anjali Tanpure

No responses yet