如何将进步的Web应用程序进入Google Play商店-css教程-PHP中文网

首页

web前端

css教程

如何将进步的Web应用程序进入Google Play商店

Joseph Gordon-Levitt

Apr 21, 2025 am 11:10 AM

如何将进步的Web应用程序进入Google Play商店

PWA（Progressive Web应用程序）已经与我们在一起了一段时间。但是，每次我尝试向客户解释时，同样的问题都会弹出：“我的用户可以使用应用商店安装应用程序吗？”传统上，答案是否定的，但是Chrome 72发生了变化，它发了一项名为TWA（可信赖的网络活动）的新功能。

受信任的Web活动是一种使用基于自定义选项卡的协议将您的Web应用程序内容（例如PWA）与您的android应用程序集成的新方法。

在本文中，我将使用Netguru现有的PWA（Wordguru），并逐步说明需要做些什么才能使应用程序可用并准备直接从Google Play App Store中安装。

我们在这里介绍的某些内容对那里的任何Android开发人员都可能很愚蠢，但是本文是从前端开发人员的角度写的，尤其是那些从未使用过Android Studio或创建Android应用程序的文章。另外，请注意，由于它仅限于Chrome 72，因此我们在这里涵盖的许多内容仍然非常实验。

步骤1：设置一个值得信赖的网络活动

设置TWA并不需要您编写任何Java代码，但是您需要拥有Android Studio。如果您以前开发了iOS或Mac软件，那么这很像Xcode，因为它提供了一个旨在简化Android开发的开发环境。因此，抓住它，在这里见我。

在Android Studio中创建一个新的TWA项目

您得到了Android Studio吗？好吧，我实际上听不到或见到你，所以我假设你做到了。继续打开它，然后单击“启动新的Android Studio项目”。从那里，让我们选择“不添加活动”选项，使我们能够配置项目。

配置相当简单，但是知道什么是什么总是很高兴的：

命名应用程序的名称（但我敢打赌，您知道）。
软件包名称： Play商店中的Android应用程序标识符。它必须是唯一的，因此我建议以相反顺序使用PWA的URL（例如com.netguru.wordguru）。
保存位置：该项目将在本地存在。
语言：这使我们能够选择一种特定的代码语言，但是不需要这一点，因为您知道，我们的应用程序已经编写了。我们可以将其留在Java，这是默认选择。
最小API级别：这是我们正在使用的Android API的版本，并且支持库（下一步我们将介绍）。让我们使用API 19。

这些选项下面有很少的复选框。这些对我们来说是无关紧要的，因此请将它们全部放置，然后继续完成。

添加TWA支持库

Twa s需要一个支持库。好消息是，我们只需要修改两个文件即可填写该要求，并且两个都活在同一项目目录中：Gradle脚本。两者都被命名为build.gradle，但是我们可以通过查看括号中的描述来区分哪个。

有一个名为Jitpack的Git软件包经理，专门为Android应用程序制作。它非常健壮，但最重要的是，它使发布我们的Web应用程序变得轻而易举。这是一项付费服务，但我想说，如果这是您第一次进入Google Play商店，这是值得的。

编辑器注意：这不是Jitpack的赞助插件。值得呼唤，因为这篇文章几乎不熟悉Android应用程序或向Google Play提交应用程序，并且在管理直接连接到商店的Android App Repo的摩擦较小。也就是说，这完全不是必需的。

进入Jitpack后，让我们将我们的项目连接到它。打开该build.gradle（project：wordguru）文件，我们刚刚查看并告诉它为应用程序存储库查看jitpack：

 AllProjects {
  存储库{
    ...
    maven {url'https://jitpack.io'}
    ...
  }
}

好的，现在让我们打开其他build.gradle文件。在这里，我们可以添加该项目的任何必要依赖项，并且确实有一个：

 // build.gradle（模块：应用程序）

依赖项{
  ...
  实现'com.github.googlechrome：custom-tabs-client：a0f7418972'
  ...
}

TWA库使用Java 8功能，因此我们需要启用Java 8。为此，我们需要在同一文件中添加编译：

 // build.gradle（模块：应用程序）

安卓 {
  ...
  compileoptions {
    Sourcecepatibility Javaversion.version_1_8
    targetCompatibility Javaversion.version_1_8
  }
  ...
}

我们还将在下一节中介绍称为Subtestplaceplaceholder的变量。现在，让我们添加以下内容以定义应用程序的托管位置，默认URL和应用程序名称：

 // build.gradle（模块：应用程序）

安卓 {
  ...
  DefaultConfig {
    ...
    清单持有人= [
      主机名：“ wordguru.netguru.com”，
      defaulturl：“ https：//wordguru.netguru.com”，
      启动名称：“ Wordguru”
    这是给出的
    ...
  }
  ...
}

在Android应用清单中提供应用程序详细信息

每个Android应用都有一个Android应用清单（AndroidManifest.xml），该应用程序提供了有关应用程序的基本详细信息，例如与其与操作系统相关的操作系统，包装信息，设备兼容性以及许多其他帮助Google Play显示应用程序要求的内容。

我们在这里真正关心的是活动（）。这就是实现用户界面的原因，并且是“可信赖的网络活动”中“活动”所必需的。

有趣的是，我们在Android Studio中设置项目时选择了“无活动”选项，这是因为我们的清单是空的，并且仅包含应用标签。

让我们首先打开manfifest文件。我们将用我们自己的应用程序ID和标签替换现有的软件包名称，并用上一节中定义的清单持有人变量的值替换。

然后，我们将通过在标签中添加标签来实际添加TWA活动。

<!-- manifests/AndroidManifest.xml -->

 //突出显示

  

     //突出显示

      <meta-data android android.support.customtabs.trusted.default_url></meta-data> //突出显示

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      <intent-filter>
        <action android android.intent.action.main></action>
        
      </intent-filter>

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      <intent-filter android true>
        <action android android.intent.action.view></action>
        
        
         //突出显示
      </intent-filter>

我的朋友们是第1步。让我们继续前进。

步骤2：验证网站与应用程序之间的关系

TWA需要在Android应用程序和PWA之间建立连接。为此，我们使用数字资产链接。

连接必须在两端设置，其中TWA为应用程序，而PWA是网站。

为了建立这种联系，我们需要再次修改清单持有人。这次，我们需要添加一个称为AssetStatements的额外元素，以保留有关PWA的信息。

 // build.gradle（模块：应用程序）

安卓 {
  ...
  DefaultConfig {
    ...
    清单持有人= [
      ...
      AssetStatements：'[{“ Relation”：[“ delegate_permission/common.handle_all_urls”]，'  
        '“ target”：{“命名空间”：“ web”，“站点”：“ https：//wordguru.netguru.com”}}}}}'''
      ...
    这是给出的
    ...
  }
  ...
}

现在，我们需要在应用程序标签中添加一个新的元数据标签。这将告知我们要建立与清单持有人指定的申请的联系的Android应用程序。

<!-- manifests/AndroidManifest.xml -->



  <application>
    ...
      <meta-data android asset_statements></meta-data>
    ...
  </application>

就是这样！我们刚刚建立了网站关系的申请。现在，让我们跳入网站转换为应用程序。

为了在相反的方向上建立连接，我们需要创建一个.json文件，该文件将在应用程序 /.well-newonn/assetlinks.json路径中可用。可以使用Android Studio内置的生成器来创建该文件。看，我告诉您Android Studio有助于简化Android开发！

我们需要三个值来生成文件：

托管站点域：这是我们的PWA URL（例如https://wordguru.netguru.com/）。
应用程序包名称：这是我们的TWA软件包名称（例如Com.netguru.wordguru）。
App软件包指纹（SHA256）：这是基于Google Play商店密钥库生成的唯一加密哈希。

我们已经有了第一和第二值。我们可以使用Android Studio获得最后一个。

首先，我们需要生成签名的APK。在Android Studio中，转到：构建→生成签名的捆绑包或APK→APK 。

接下来，如果您已经有一个，请使用现有的密钥库。如果您需要一个，请首先转到“创建新……”。

然后让我们填写表格。请务必记住这些凭据，因为这些凭据是将要签署的应用程序，并确认您对申请的所有权。

这将创建一个生成应用程序包指纹（SHA256）所需的密钥库文件。该文件非常重要，因为它可以作为证明您是应用程序的所有者。如果此文件丢失，您将无法对商店中的应用程序进行任何进一步的更新。

接下来，让我们选择捆绑包的类型。在这种情况下，我们选择“发布”，因为它为我们提供了生产捆绑包。我们还需要检查签名版本。

这将生成我们的APK，稍后将用于在Google Play商店中创建版本。创建密钥库后，我们可以使用它来生成所需的应用程序包指纹（SHA256）。

让我们回到Android Studio，然后转到工具→应用链接助理。这将打开一个侧边栏，该侧边栏显示了在应用程序和网站之间建立关系所需的步骤。我们想进入步骤3，“声明网站协会”并填写所需的数据：站点域和应用程序ID。然后，选择上一步中生成的密钥库文件。

填写表单后，按“生成数字资产链接文件”，将生成我们的AssetLinks.json文件。如果我们打开它，它应该看起来像这样：

 [{{
  “关系”：[“ delegate_permission/common.handle_all_urls”]，
  “目标”： {
    “名称空间”：“ android_app”，
    “ package_name”：“ com.netguru.wordguru”，
    “ SHA256_CERT_FINGERPRINTS”：[8a：f4：........：29：28“]
  }
]]

这是我们需要在应用程序 /.well-newone /assetlinks.json路径中提供的文件。我不会描述如何使其在该路径上可用，因为它过于特定于项目，并且超出了本文的范围。

我们可以通过单击“链接并验证”按钮来测试关系。如果一切顺利，我们将获得“成功！”的确认。

耶！我们已经在我们的Android应用程序和PWA之间建立了双向关系。一切都从这里下坡，所以让我们开回家。