CODEWITHSUNDEEP
progressive-web-apps
BruceM
BruceM

Reputation: 1729

Close browser window and open PWA once PWA installed

I have Chrome installing my PWA on Android - once it's installed I'd like to automatically close the browser window it was installed from, and open the PWA (so the user doesn't continue in the browser window, thinking they're using the PWA) - is this possible?

Upvotes: 13

Views: 7418

Answers (4)

Adel Benyahia
Adel Benyahia

Reputation: 429

In the new versions of chrome, after installation in android it associate all the links in the "scope" to the PWA application, if you try to open a link in your chrome browser it open directly in the application. hope that will answer your question

Upvotes: 0

Brian Button
Brian Button

Reputation: 174

I had this problem on Android with Chrome. The change that made the difference is adding "target='_blank'" to the link. It looks like:

window.addEventListener('appinstalled', function(event){
    setTimeout(function(){
        presentToUser("<a href='https://myhostname.com' target='_blank'>Go to App</a>")
    }, 10000)}
});

The ten second timeout is to give Android the time to set up the App on the home page. I had made that adjustment earlier; possibly I can remove it? But setting the target was what made this work.

The App opens over the top of Chrome, obscuring it. So closing the browser is not immediately required but is recommended.

Upvotes: 3

gaugau
gaugau

Reputation: 896

i was looking for a similar solution and have not yet found a way to do that. I try to describe my findings so far:

CLOSING THE BROWSER WINDOW:

as described in this answer window.close() can only be called on windows/tabs that the script opened itself. Some possible workarounds are being discussed there.

OPENING THE PWA RIGHT AFTER INSTALLATION:

Google describes in their WebApk Fundamentals Article it as follows:

When a Progressive Web App is installed on Android, it will register a set of intent filters for all URLs within the scope of the app. When a user clicks on a link that is within the scope of the app, the app will be opened, rather than opening within a browser tab.

I was hoping that would work also right after the installation/Adding to homescreen from the still open browser window.

Based on testing with two Android devices it seems as if at the moment the user has to manually open the PWA from the homescreen once for chrome/android to interpret the scope of the web apps manifest.json as intend to open the page in standalone.

This is sad for even iOS seems to handle that different.

Maybe I am overlooking something in the Google Article? I also do not fully understand androids intent API - so maybe there is some way to still achieve that (?)

Upvotes: 7

Jessica Rodriguez
Jessica Rodriguez

Reputation: 2974

Based from this blog post:

When the PWA is installed, it will appear in the home screen, in the app launcher, in Settings and as any other first-class citizen app in the OS, including information on battery and space used in the system.

There's a tracking event when the user opens the app from the home screen. That means the user has clicked the app's icon or, on Android with WebAPK support, also clicked on a link pointing to the PWA scope and need to close the browser.

start_url: '/?utm_source=standalone&utm_medium=pwa'

Also, the following script leaves us a boolean stating if the user is currently in a browser (true) or a standalone app mode (false)

var isPWAinBrowser = true;
// replace standalone with fullscreen or minimal-ui according to your manifest
if (matchMedia('(display-mode: standalone)').matches) {
     // Android and iOS 11.3+
     isPWAinBrowser = false;
} else if ('standalone' in navigator) {
     // useful for iOS < 11.3
     isPWAinBrowser = !navigator.standalone;
}

Upvotes: 3

Related Questions