Progressive web app not showing install button in browser bar

Question

I'm attempting to make a PWA and nothing seems to make the install as web app button appear on my site.

The install button looks like the following and it shows in the address bar:

It shows up when I go to a discourse site but not my own.

I have the following in the head:

  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">

My manifest is in the root directory and is named manifest.webmanifest:

{
  "name": "Example 1",
  "short_name": "example1",
  "display": "standalone",
  "start_url": ".",
  "background_color": "#000000",
  "theme_color":"#ffffff",
  "description": "Example web app.",
  "icons": [{
    "src": "https://www.example.com/test/images/icon_512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "share_target": {
    "action":"/new-topic",
    "method":"GET",
    "enctype":"application/x-www-form-urlencoded",
    "params": {
      "title":"title",
      "text":"body"}
  }
}

There are no errors in the console now. At first there was an error saying it couldn't find the logo image. Once that path was correct the error went away but still no install button.

An example of a PWA is discourse.org forums here. This site installs fine.

Tested in Brave / Firefox / OS X

MDN Progressive Web

Update (found):
Net Ninja Course on PWAs

Nival

The criteria for a PWA app on Firefox is developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/… which pretty much the same for most browsers. Is it served over https and has a service worker been registered? – Normalcy

@Normalcy I haven't created a service worker. I'll add that and see what happens. What about testing locally on localhost or file://? I'll make sure to test on https as well. – Nival

The install testing has to be on a HTTPS host. Once you get that, use the Chrome Lighthouse tool to check and make sure it is a valid installable PWA. If there are any issues, Lighthouse will give you hints on what to fix. – Friedly

@Normalcy Want to add as an answer? Also found this, developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/… but it looks like Add to home screen but not PWA. – Nival

Quoting, Note: The .webmanifest extension is specified in the Media type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. .json. IMHO since it seems optional, I would prefer to use .json extension so it can be opened easily by associated editors, if there aren't any issues. – Nival

Answer 1

You can find the criteria for a PWA app on MDN docs at https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#how_do_you_make_an_app_a2hs-ready. Add to home screen (A2HS) is often used to explain PWAs. The criteria is pretty consistent across most browsers.

Issues why it might not be recognised as a PWA:

1. It must be served over https (http:// or file:// will not work).
2. It must have a manifest file with the correct fields filled in.
3. It must have an appropriate icon to display on the home screen.
4. For Google Chrome, it must have a service worker registered to allow the app to work offline.

Normalcy

Answer 2

I use Chrome Inspector to debug my web app manifest: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

For example, it shows the problems in my manifest.json:

After fixing the problems, the PWA install icon appears on the Chrome address bar :)

Dawn

This saved me, after a long search. The app manifest showed that the scope was incorrect – Donate

Answer 3

In my case the chrom Application tab does not show any error. But I checked the site by using Lighthouse and selecting Progressive Web App category. There I see the site problem.

Experiment

Yeah, this was very helpful, the results indicated it didn't like the dimensions of my icon image 🤦‍♂️ – Blowtube

Answer 4

It seems a bug that in some case although you app is a correct PWA, the install button does not show.

I see this when you keep changing the manifest and refreshing your page to see the install button.

As a workaround just restart chrom by typing chrome://restart in the address bar.

Experiment

Answer 5

When the URL is a folder rather than an explicit file, I found the trailing slash on start_url makes a difference (Chrome):

"start_url": "/mypath"    <-- nope

"start_url": "/mypath/"   <-- ok

Without the trailing slash I saw the "No matching service worker detected" warning in the "App Manifest" section of the dev-tools panel, despite the worker having been installed, with files caching and serving just fine. The anguish was finally ended after a careful scrutinizing of this message from the Lighthouse check:

This page is controlled by a service worker, however the 'start_url' (https://example.com/mypath) is not in the service worker's scope (https://example.com/mypath/)

Rabblerousing

Answer 6

just make sure your hosting server has an SSL because PWA only work on http://

find better documentation on PWA on this link, https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.

Animalize

I think that's right but I think there are exceptions for localhost for development. – Nival

Answer 7

I had the same problem, and it seems like a bug or unexpected error at Chrome; Chrome doesn't track whether of not you deleted the app from your machine. So you have to uninstall the app from the PWA version before you delete the app from your machine.

This video talks about it towards to the end(12:28). Check it out. https://youtu.be/hBUhfi778G8?t=748

Highly recommend this YouTube playlist if you want to learn more about PWA: https://www.youtube.com/playlist?list=PLyuRouwmQCjmDHxKD7g9s6FhOKG3xim85

Solecism

Answer 8

Install criteria

In Chrome, your Progressive Web App must meet the following criteria before it will fire the beforeinstallprompt event and show the in-browser install promotion:

• The web app is not already installed

• Meets the user engagement heuristics:

  • The user needs to have clicked or tapped on the page at least once (at any time, even during a previous page load)
  • The user needs to have spent at least 30 seconds viewing the page (at any time)

• Be served over HTTPS

• Includes a web app manifest that includes:

  • short_name or name
  • icons - must include a 192px and a 512px icon
  • start_url
  • display - must be one of fullscreen, standalone, or minimal-ui
  • prefer_related_applications must not be present, or be false Other browsers have similar criteria for installation, though there may be minor differences. Check the respective sites for full details:

• Edge

• Firefox

• Opera

Reference: https://web.dev/i18n/en/install-criteria/

Nobie

Answer 9

If the button does not appear on a particular device, check what launcher it is using. Android GO launchers like QuickStep for whatever reason do not support PWA install. Install a launcher like Apex, change the default launcher and restart. This will bring the install option. (leaving this here after spending days on the issue)

Pemberton

Answer 10

For Install button main criteria is manifest.webmanifest & make sure wasm project folder location & map that in start_url carefully. Example here , Red wont work, Green is perfectly working Install button

Guinn

Answer 11

On Chrome 126, the option is available under "Save & Share".

Anaemic

Answer 12

Looking for PWA for Web-WhatsApp. There is no option to install on Right side of Address Bar.

Step1 : Create Short cut

Step 2: Open the short cut , now there is a option to install on Right side of Address Bar.

Delia