Search code examples
flutterprogressive-web-apps

Flutter web - Missing install PWA button

I created a new Fluter WEB project, but I don't see the install button for the PWA. What am I missing?

The new project without install button New project without install button

Example of the button present in an old website made in Flutter

Install button present in an old website

What should I do to have this button also in my new application?

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.0 23A344 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.87.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

I tried rebuilding the web version, but without success

[Edit]: Thank you, @Amir. The problem was due to inconsistent image sizes.
Here is our updated and working manifest.json:

{
  "name": "OurName",
  "short_name": "OurName",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#0175C2",
  "theme_color": "#0175C2",
  "description": "OurDescription",
  "orientation": "portrait-primary",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "icons/Icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/Icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "icons/Icon-maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icons/Icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "screenshots": [
    {
      "src": "source/image1.png",
      "sizes": "540x720",
      "type": "image/png",
      "form_factor": "narrow"
    }
  ]
}
Solution

  • I already faced with this and solved it This problem is for your manifest (my problem is for my icons path)

    you should debug it in this chrome inspect tab : Application tab