如何將進步的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之間建立了雙向關係。一切都從這裡下坡，所以讓我們開回家。