Flutter pwa app no service worker detected

Issue

I know that flutter supports PWA, but I can’t enable it in my flutter web app. My web app meet all the requirements for PWA support. But both chrome and edge doesn’t display the install prompt. If I inspect the page I find the following message: "No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest". I have no experience in web programming.

Here’s my manifest:

{
    "name": "Converter NOW",
    "short_name": "Converter NOW",
    "start_url": ".",
    "display": "minimal-ui",
    "background_color": "#0175C2",
    "theme_color": "#0175C2",
    "description": "A Unit and Currencies Converter. Converter NOW is immediate, fast and easy to use!",
    "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"
        }
    ]
}

Solution

Thanks to @MarianoZorrilla and this issue on Github I figured out what is the problem. Github pages and flutter PWA are not close friends. If you deploy to any other web server probably you will not find any kind of problem, just meet the PWA requirements.
But if you want to deploy you PWA flutter app on ghpages you have to do the following:

  1. Meet the PWA requirements
  2. Add <base href="/projectName/"> after <head> tag as shown here
  3. Comment "/", in flutter_service_worker.js file at about at line 50 as shown here

You need to do this because the PWA is not stored at root (/) but at /projectName/

Answered By – Damien

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.