CODEWITHSUNDEEP
htmlprogressive-web-apps
1.21 gigawatts
1.21 gigawatts

Reputation: 17850

Progressive web app not showing install button in browser bar

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:

enter image description here

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

Upvotes: 62

Views: 91803

Answers (14)

Johann
Johann

Reputation: 29877

I just spent an entire day trying to fix this. My PWA met ALL of the conditions yet the install button wouldn't show in Chrome. Finally I decided to visit some websites that were PWA-enabled. I discovered that they were using this:

<link rel="manifest" href="https://<domain>/manifest.json">

Adding the Link tag was what made it work. So the next time someone (include ChatGPG, Gemini and Claude) list all of the requirements, don't be surprised that none of them listed this. Proof that AI-bots can be pretty useless and have a long way to go before they replace developers.

Upvotes: 1

Sergey A Kryukov
Sergey A Kryukov

Reputation: 916

I recently provided a detailed overview, instructions and code samples for the implementation of the PWA installation using an Install button. You may find it useful. Please see my answer.

Upvotes: 0

user14724102
user14724102

Reputation:

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

Find better documentation about PWAs at this link: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.

Upvotes: 1

sureshvv
sureshvv

Reputation: 4422

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

Upvotes: -1

nammadhu
nammadhu

Reputation: 1

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 enter image description here enter image description here

Upvotes: 0

Nara
Nara

Reputation: 155

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

Step1 : Create Short cut enter image description here

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

Upvotes: -2

alex
alex

Reputation: 21

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/

Upvotes: 1

Sajith Sageer
Sajith Sageer

Reputation: 173

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)

Upvotes: 0

iforce2d
iforce2d

Reputation: 8272

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/)

Upvotes: 3

Minki Jung
Minki Jung

Reputation: 154

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

Upvotes: 1

Alireza Fattahi
Alireza Fattahi

Reputation: 45593

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.

Upvotes: 4

Alireza Fattahi
Alireza Fattahi

Reputation: 45593

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.

enter image description here

Upvotes: 4

Jackson
Jackson

Reputation: 911

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.

Upvotes: 22

Meng-Yuan Huang
Meng-Yuan Huang

Reputation: 2333

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: enter image description here

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

Upvotes: 81

Related Questions