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?
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.
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.