0

我正在尝试使用 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）但我可以'没有看到应用程序横幅工作。

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

4

2 回答 2

1

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

于 2022-01-18T02:30:21.433 回答
0

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

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

于 2022-01-17T18:31:15.993 回答