How to prompt native app install banner in Android using gatsby manifest

Question

I'm trying to prompt a native install banner in my webapp using gatsby. I know that for chrome I need to create a manifest but I did it with gatsby-plugin-manifest. This is how I have the config file:

resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'My App Name',
        short_name: 'AppName.com',
        start_url: '/',
        background_color: '#184B86',
        theme_color: '#184B86',
        prefer_related_applications: true,
        related_applications: [
          {
            platform: 'play',
            id: 'com.app.id',
          },
        ],
        display: 'minimal-ui',
        icon: 'src/images/app-logo.png', // This path is relative to the root of the site.
      },

I use Ngrok to test the app with an ssl connection. Then, I paste the link into an android simulator (with google play and wifi enabled) and open the app with google chrome (With the flag chrome://flags/#bypass-app-banner-engagement-checks enabled) but I can't see the app banner working.

Do I miss something? Should I create the manifest without the plugin?

Answer 1

For PWAs you have to register a service worker which kicks in when your user has a bad or no internet connection. With gatsby, you can use gatsby-plugin-offline to enable offline support for your PWA.

Then you should see the install prompt as expected.

Answer 2

I notice that the way I added the link tag in the html.js file was wrong. I was using <link rel="manifest" href="manifest.webmanifest.json" /> instead of <link rel="manifest" href="manifest.webmanifest" /> without the .json. This finally fixed the issue.