Flutter PWA not showing `Add to Home Screen` option

user_9199362 0
Viewed 2485

Flutter version: 1.19.0-4.0.pre

I am trying to generate a PWA app using Flutter web, but when I open the web app, it doesn't behave as a PWA should and it doesn't show add to home screen banner either on my android device.

Here's my manifest.json file:

{
  "name": "Flutter PWA Demo",
  "short_name": "PWA Demo",
  "start_url": ".",
  "scope": ".",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#E50D7F",
  "description": "A Flutter pwa application.",
  "orientation": "portrait",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

I tried it on master and dev but it doesn't work. It doesn't show add to home screen option on device or desktop chrome browser.

flutter-web flutter
1 Answers

Firt become sure that you have registered "flutter_service_worker.js" in your "index.html" file, just like below:

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker.register("/flutter_service_worker.js");
  });
}

Then open your pwa on chrome, right click on page and select "Inspect" option. Then go to "Application" tab and check if there is an error for "Manifest" and if there is you should fix it. Then check "Service Workers" tab to see if "flutter_service_worker.js" is registered. If it is registered and the "Manifest.json" file works fine, then you should see "Add to Home screen" option.

user_116049090
Related