If the app is not installed, I can show a button to prompt to install the app as a PWA.

After installed, if I goto the app URL again via the address bar, the install button is not there (great, because I've hidden it)...but the user is now in the browser, whereas I want them to be in the standalone app.

Is there a way I can show a button for them to open the app as a standalone PWA or have it automatically open the PWA when they navigate to the app via the URL in the address bar?

Following this, I should just be able to add a link, but this doesn't work: How to open PWA from a button within the web-app?.

Attempt 1: <a href="Http://localhost:8081/">Open PWA</a>

Attempt 2: window.open("Http://localhost:8081/")

Both just open in a new Chrome tab.

My app is at: Http://localhost:8081/

My manifest has the following in it: "start_url": ".", "scope": "."

If the app is not installed, I can show a button to prompt to install the app as a PWA.

After installed, if I goto the app URL again via the address bar, the install button is not there (great, because I've hidden it)...but the user is now in the browser, whereas I want them to be in the standalone app.

Is there a way I can show a button for them to open the app as a standalone PWA or have it automatically open the PWA when they navigate to the app via the URL in the address bar?

Following this, I should just be able to add a link, but this doesn't work: How to open PWA from a button within the web-app?.

Attempt 1: <a href="Http://localhost:8081/">Open PWA</a>

Attempt 2: window.open("Http://localhost:8081/")

Both just open in a new Chrome tab.

My app is at: Http://localhost:8081/

My manifest has the following in it: "start_url": ".", "scope": "."

• javascript
• progressive-web-apps

• @Yogi — “No, you can't automatically install a PWA because it requires the user's authorization.” You are right, it would be certainly impossible, but please read carefully: this is not what OP requested. In the first line: “I can show a button to prompt to install the app as a PWA.” It assumes that the required functionality is to prompt for the user's authorization, and this is exactly how PWA works. It makes the question valid at least partially. Please see my answer based on perfectly working code. – Sergey A Kryukov Commented Jan 19 at 0:49
• 1 @Yogi — “it depends on how you interpret the question...” I agree with that, too. I only think that in many cases the question should be interpreted in the best interests of the inquirer. Even if the assumption is not quite correct, the inquirer can ask additional questions. With such approach, the answer may be not exactly what the inquirer expected, but people asking questions not necessarily know what they really want, they may only think they know (remember XY Problem?) – Sergey A Kryukov Commented Jan 19 at 1:15
• @Yogi ...anyway, the concern you've expressed helped me to understand the issue better and add another section to my answer. – Sergey A Kryukov Commented Jan 19 at 1:17
• All your ideas were around the assumption that the application is served as an HTTP server. No, this is not the case. What should start a server without the user's permission, even if you had one on your local host? It is just some special kind of URI depending on a particular browser. Nothing runs in the background. – Sergey A Kryukov Commented Jan 19 at 3:14

1 Answer 1

I really have to start with the very beginning, as I don't know what happens with your installation. The scenario could look like this:

First, in your main application code, you have to handle the event "beforeinstallprompt". For example:

    window.onbeforeinstallprompt = event => {
        installButton.style.display = "block";
        installButton.onclick = () => event.prompt();
    };

In this handler, we assume that you have some <button>Install...</button> element in your HTML, it is referenced as installButton in your script (using, say, an appropriate selector with document.querySelector). Of course, you could also dynamically insert a button into your DOM, anything like that.

We also assume that the button's CSS defines that it has the style display: none. So, when the application is already installed, it will be hidden, and the "beforeinstallprompt" handler won't be invoked, so it will remain hidden.

<Added in response to the note by @Yogi:>
Be careful, "beforeinstallprompt" is experimental. However, I consider it acceptable because the WPA model itself was around as a standard feature since 2020, not supported by all browser and generally still looks emerging.

The event will be invoked only if the application is not installed as PWA. Your handler will expose the button and set up its "click" event handler. The event object has the function prompt which requests the confirmation from the user and, upon the confirmation, will perform the installation.

In your application, you have to reference and register a service worker script. I don't think this is the place to explain its role, so I'll only explain how to implement the PWA installation part.

Generally, you can do it in the very beginning, when windows handles its "load" event:

    window.onload = () => {

        if (navigator.serviceWorker 
            && (new URL(window.location).protocol == "https:"))
                navigator.serviceWorker
                   .register("pwa-service-worker.js");

        // ...
    };

In the file "pwa-service-worker.js", you have to handle the "install" event:

self.addEventListener("install", function(event) {
    event.waitUntil(
        caches.open(cacheName).then(function (cache) {
            return cache.addAll(initialCachedResources);
        })
    );
});

Here, before this fragment, you have to define cacheName. It can be some string used to uniquely identify your PWA application in the system. You also need to define initialCachedResources which is essentially some list of files, starting with "/". The behavior of installed PWA depends on this list. If this list is comprehensive, the application has the potential of working 100% online, unless you program it otherwise.

Also note that the installation only works when the application is served by some HTTPS server. When the application is already installed, it can work offline.

How do I show button to open the app as a PWA?

I don't think it makes a whole lot of sense. Why? If you loaded an application and can see its page already, you can immediately use it. Why would you want to load the same thing in another form, as PWA?

Rather, you would need to do it for some system menu. All you need to do is to find an appropriate URI and load your browser with it. It should be exact same browser as the one used during installation. The URI depends on the particular browser. To find the right string, you have to look at the browser's setting. In many cases, you can start with the URI chrome:apps. Instead of Chrome name, it could be the name of another browser. For chromium-compatible browsers, the name chrome still can be used. It will show you the page with installed applications. In their menus, you can find access to each application properties, the way to uninstall or activate one, and so on. In brief: ask your browser.

In particular, a context menu of an application on the apps page will typically have the menu item Create shortcut or something similar. Anyway, the purpose of this shortcut is exactly answer the question you posed in your title. When you create the shortcut, you can read its content and use it to activate the PWA application.

See also the useful article Debug Progressive Web Apps. My credit goes to @Yogi who suggested it during the discussions.