1

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?

Roberto
  • 253
  • 1
  • 9
  • Have you tried it on an actual Android device as well? Maybe it's just an emulator issue. – gru Jan 17 '22 at 17:52
  • Yes, I've already tried in a real device but it's the same. I'm doing this in the simulator just for quick testing – Roberto Jan 17 '22 at 17:54
  • 1
    I notice that the way I added the link tag in the html.js file was wrong. I was using instead of without the .json. This finally fixed the issue – Roberto Jan 17 '22 at 20:30
  • Great that you found the reason. You could provide an answer for better visibility. – gru Jan 17 '22 at 21:05

2 Answers2

1

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.

Roberto
  • 253
  • 1
  • 9
0

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.

gru
  • 2,319
  • 6
  • 24
  • 39
  • I know that this functionality is something particular in PWA but in this case I'm trying to prompt a native app install not a PWA. – Roberto Jan 17 '22 at 19:05