如何使用 gatsby 清单在 Android 中提示本机应用程序安装横幅

Question

我正在尝试使用 gatsby 在我的 web 应用程序中提示本机安装横幅。 我知道对于 chrome，我需要创建一个清单，但我是使用 gatsby-plugin-manifest 完成的。 这就是我拥有配置文件的方式：

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.
      },

我使用 Ngrok 通过 ssl 连接来测试应用程序。 然后，我将链接粘贴到 android 模拟器（启用 google play 和 wifi）并使用 google chrome 打开应用程序（启用标志 chrome://flags/#bypass-app-banner-engagement-checks）但我可以'没有看到应用程序横幅工作。

我错过了什么吗？ 我应该在没有插件的情况下创建清单吗？

Answer 1

我注意到我在 html.js 文件中添加链接标签的方式是错误的。 我使用的是<link rel="manifest" href="manifest.webmanifest.json" />而不是<link rel="manifest" href="manifest.webmanifest" / > 没有.json。 这终于解决了这个问题。

Answer 2

对于 PWA，你必须注册一个服务工作者，当你的用户的互联网连接不好或没有互联网连接时，它就会启动。 使用 gatsby，您可以使用gatsby-plugin-offline为您的 PWA 启用离线支持。

然后您应该会看到预期的安装提示。