PWA（Progressive Web應(yīng)用程序）已經(jīng)與我們在一起了一段時間。但是，每次我嘗試向客戶解釋時，同樣的問題都會彈出：“我的用戶可以使用應(yīng)用商店安裝應(yīng)用程序嗎？”傳統(tǒng)上，答案是否定的，但是Chrome 72發(fā)生了變化，它發(fā)了一項名為TWA（可信賴的網(wǎng)絡(luò)活動）的新功能。

受信任的Web活動是一種使用基于自定義選項卡的協(xié)議將您的Web應(yīng)用程序內(nèi)容（例如PWA）與您的android應(yīng)用程序集成的新方法。

在本文中，我將使用Netguru現(xiàn)有的PWA（Wordguru），并逐步說明需要做些什么才能使應(yīng)用程序可用并準(zhǔn)備直接從Google Play App Store中安裝。

我們在這里介紹的某些內(nèi)容對那里的任何Android開發(fā)人員都可能很愚蠢，但是本文是從前端開發(fā)人員的角度寫的，尤其是那些從未使用過Android Studio或創(chuàng)建Android應(yīng)用程序的文章。另外，請注意，由于它僅限于Chrome 72，因此我們在這里涵蓋的許多內(nèi)容仍然非常實驗。

步驟1：設(shè)置一個值得信賴的網(wǎng)絡(luò)活動

設(shè)置TWA并不需要您編寫任何Java代碼，但是您需要擁有Android Studio。如果您以前開發(fā)了iOS或Mac軟件，那么這很像Xcode，因為它提供了一個旨在簡化Android開發(fā)的開發(fā)環(huán)境。因此，抓住它，在這里見我。

在Android Studio中創(chuàng)建一個新的TWA項目

您得到了Android Studio嗎？好吧，我實際上聽不到或見到你，所以我假設(shè)你做到了。繼續(xù)打開它，然后單擊“啟動新的Android Studio項目”。從那里，讓我們選擇“不添加活動”選項，使我們能夠配置項目。

配置相當(dāng)簡單，但是知道什么是什么總是很高興的：

• 命名應(yīng)用程序的名稱（但我敢打賭，您知道）。
• 軟件包名稱： Play商店中的Android應(yīng)用程序標(biāo)識符。它必須是唯一的，因此我建議以相反順序使用PWA的URL（例如com.netguru.wordguru）。
• 保存位置：該項目將在本地存在。
• 語言：這使我們能夠選擇一種特定的代碼語言，但是不需要這一點，因為您知道，我們的應(yīng)用程序已經(jīng)編寫了。我們可以將其留在Java，這是默認(rèn)選擇。
• 最小API級別：這是我們正在使用的Android API的版本，并且支持庫（下一步我們將介紹）。讓我們使用API?? 19。

這些選項下面有很少的復(fù)選框。這些對我們來說是無關(guān)緊要的，因此請將它們?nèi)糠胖茫缓罄^續(xù)完成。

添加TWA支持庫

Twa s需要一個支持庫。好消息是，我們只需要修改兩個文件即可填寫該要求，并且兩個都活在同一項目目錄中：Gradle腳本。兩者都被命名為build.gradle，但是我們可以通過查看括號中的描述來區(qū)分哪個。

有一個名為Jitpack的Git軟件包經(jīng)理，專門為Android應(yīng)用程序制作。它非常健壯，但最重要的是，它使發(fā)布我們的Web應(yīng)用程序變得輕而易舉。這是一項付費服務(wù)??，但我想說，如果這是您第一次進(jìn)入Google Play商店，這是值得的。

編輯器注意：這不是Jitpack的贊助插件。值得呼喚，因為這篇文章幾乎不熟悉Android應(yīng)用程序或向Google Play提交應(yīng)用程序，并且在管理直接連接到商店的Android App Repo的摩擦較小。也就是說，這完全不是必需的。

進(jìn)入Jitpack后，讓我們將我們的項目連接到它。打開該build.gradle（project：wordguru）文件，我們剛剛查看并告訴它為應(yīng)用程序存儲庫查看jitpack：

 AllProjects {
  存儲庫{
    ...
    maven {url'https://jitpack.io'}
    ...
  }
}

好的，現(xiàn)在讓我們打開其他build.gradle文件。在這里，我們可以添加該項目的任何必要依賴項，并且確實有一個：

 // build.gradle（模塊：應(yīng)用程序）

依賴項{
  ...
  實現(xiàn)'com.github.googlechrome：custom-tabs-client：a0f7418972'
  ...
}

TWA庫使用Java 8功能，因此我們需要啟用Java 8。為此，我們需要在同一文件中添加編譯：

 // build.gradle（模塊：應(yīng)用程序）

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

我們還將在下一節(jié)中介紹稱為Subtestplaceplaceholder的變量。現(xiàn)在，讓我們添加以下內(nèi)容以定義應(yīng)用程序的托管位置，默認(rèn)URL和應(yīng)用程序名稱：

 // build.gradle（模塊：應(yīng)用程序）

安卓 {
  ...
  DefaultConfig {
    ...
    清單持有人= [
      主機名：“ wordguru.netguru.com”，
      defaulturl：“ https：//wordguru.netguru.com”，
      啟動名稱：“ Wordguru”
    這是給出的
    ...
  }
  ...
}

在Android應(yīng)用清單中提供應(yīng)用程序詳細(xì)信息

每個Android應(yīng)用都有一個Android應(yīng)用清單（AndroidManifest.xml），該應(yīng)用程序提供了有關(guān)應(yīng)用程序的基本詳細(xì)信息，例如與其與操作系統(tǒng)相關(guān)的操作系統(tǒng)，包裝信息，設(shè)備兼容性以及許多其他幫助Google Play顯示應(yīng)用程序要求的內(nèi)容。

我們在這里真正關(guān)心的是活動（）。這就是實現(xiàn)用戶界面的原因，并且是“可信賴的網(wǎng)絡(luò)活動”中“活動”所必需的。

有趣的是，我們在Android Studio中設(shè)置項目時選擇了“無活動”選項，這是因為我們的清單是空的，并且僅包含應(yīng)用標(biāo)簽。

讓我們首先打開manfifest文件。我們將用我們自己的應(yīng)用程序ID和標(biāo)簽替換現(xiàn)有的軟件包名稱，并用上一節(jié)中定義的清單持有人變量的值替換。

然后，我們將通過在標(biāo)簽中添加標(biāo)簽來實際添加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步。讓我們繼續(xù)前進(jìn)。

步驟2：驗證網(wǎng)站與應(yīng)用程序之間的關(guān)系

TWA需要在Android應(yīng)用程序和PWA之間建立連接。為此，我們使用數(shù)字資產(chǎn)鏈接。

連接必須在兩端設(shè)置，其中TWA為應(yīng)用程序，而PWA是網(wǎng)站。

為了建立這種聯(lián)系，我們需要再次修改清單持有人。這次，我們需要添加一個稱為AssetStatements的額外元素，以保留有關(guān)PWA的信息。

 // build.gradle（模塊：應(yīng)用程序）

安卓 {
  ...
  DefaultConfig {
    ...
    清單持有人= [
      ...
      AssetStatements：'[{“ Relation”：[“ delegate_permission/common.handle_all_urls”]，'  
        '“ target”：{“命名空間”：“ web”，“站點”：“ https：//wordguru.netguru.com”}}}}}'''
      ...
    這是給出的
    ...
  }
  ...
}

現(xiàn)在，我們需要在應(yīng)用程序標(biāo)簽中添加一個新的元數(shù)據(jù)標(biāo)簽。這將告知我們要建立與清單持有人指定的申請的聯(lián)系的Android應(yīng)用程序。

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



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

就是這樣！我們剛剛建立了網(wǎng)站關(guān)系的申請?，F(xiàn)在，讓我們跳入網(wǎng)站轉(zhuǎn)換為應(yīng)用程序。

為了在相反的方向上建立連接，我們需要創(chuàng)建一個.json文件，該文件將在應(yīng)用程序 /.well-newonn/assetlinks.json路徑中可用?？梢允褂肁ndroid Studio內(nèi)置的生成器來創(chuàng)建該文件?？矗腋嬖V您Android Studio有助于簡化Android開發(fā)！

我們需要三個值來生成文件：

• 托管站點域：這是我們的PWA URL（例如https://wordguru.netguru.com/）。
• 應(yīng)用程序包名稱：這是我們的TWA軟件包名稱（例如Com.netguru.wordguru）。
• App軟件包指紋（SHA256）：這是基于Google Play商店密鑰庫生成的唯一加密哈希。

我們已經(jīng)有了第一和第二值。我們可以使用Android Studio獲得最后一個。

首先，我們需要生成簽名的APK。在Android Studio中，轉(zhuǎn)到：構(gòu)建→生成簽名的捆綁包或APK→APK 。

接下來，如果您已經(jīng)有一個，請使用現(xiàn)有的密鑰庫。如果您需要一個，請首先轉(zhuǎn)到“創(chuàng)建新……”。

然后讓我們填寫表格。請務(wù)必記住這些憑據(jù)，因為這些憑據(jù)是將要簽署的應(yīng)用程序，并確認(rèn)您對申請的所有權(quán)。

這將創(chuàng)建一個生成應(yīng)用程序包指紋（SHA256）所需的密鑰庫文件。該文件非常重要，因為它可以作為證明您是應(yīng)用程序的所有者。如果此文件丟失，您將無法對商店中的應(yīng)用程序進(jìn)行任何進(jìn)一步的更新。

接下來，讓我們選擇捆綁包的類型。在這種情況下，我們選擇“發(fā)布”，因為它為我們提供了生產(chǎn)捆綁包。我們還需要檢查簽名版本。

這將生成我們的APK，稍后將用于在Google Play商店中創(chuàng)建版本。創(chuàng)建密鑰庫后，我們可以使用它來生成所需的應(yīng)用程序包指紋（SHA256）。

讓我們回到Android Studio，然后轉(zhuǎn)到工具→應(yīng)用鏈接助理。這將打開一個側(cè)邊欄，該側(cè)邊欄顯示了在應(yīng)用程序和網(wǎng)站之間建立關(guān)系所需的步驟。我們想進(jìn)入步驟3，“聲明網(wǎng)站協(xié)會”并填寫所需的數(shù)據(jù)：站點域和應(yīng)用程序ID。然后，選擇上一步中生成的密鑰庫文件。

填寫表單后，按“生成數(shù)字資產(chǎn)鏈接文件”，將生成我們的AssetLinks.json文件。如果我們打開它，它應(yīng)該看起來像這樣：

 [{{
  “關(guān)系”：[“ delegate_permission/common.handle_all_urls”]，
  “目標(biāo)”： {
    “名稱空間”：“ android_app”，
    “ package_name”：“ com.netguru.wordguru”，
    “ SHA256_CERT_FINGERPRINTS”：[8a：f4：........：29：28“]
  }
]]

這是我們需要在應(yīng)用程序 /.well-newone /assetlinks.json路徑中提供的文件。我不會描述如何使其在該路徑上可用，因為它過于特定于項目，并且超出了本文的范圍。

我們可以通過單擊“鏈接并驗證”按鈕來測試關(guān)系。如果一切順利，我們將獲得“成功！”的確認(rèn)。

耶！我們已經(jīng)在我們的Android應(yīng)用程序和PWA之間建立了雙向關(guān)系。一切都從這里下坡，所以讓我們開回家。

步驟3：獲取所需資產(chǎn)

Google Play需要一些資產(chǎn)來確保該應(yīng)用在商店中很好地顯示。具體來說，這就是我們需要的：

• 應(yīng)用圖標(biāo)：我們需要各種尺寸，包括48×48、72×72、96×96、144×144、192×192…或我們可以使用自適應(yīng)圖標(biāo)。
• 高分辨率圖標(biāo)：這是整個商店中使用的512×512 PNG圖像。
• 功能圖形：這是Google Play在應(yīng)用程序詳細(xì)信息視圖上使用的1024×500 JPG或24位PNG（無alpha）橫幅。
• 屏幕截圖： Google Play將使用這些屏幕截圖來展示用戶在下載之前可以查看的應(yīng)用程序的不同視圖。

擁有所有這些，我們可以進(jìn)入Google Play商店開發(fā)人員控制臺并發(fā)布應(yīng)用程序！

步驟4：發(fā)布到Google Play！

讓我們轉(zhuǎn)到最后一步，最后將我們的應(yīng)用推到商店。

使用我們之前生成的APK（位于AndroidStudioprojects目錄中），我們需要轉(zhuǎn)到Google Play控制臺以發(fā)布我們的應(yīng)用程序。我不會描述在商店中發(fā)布應(yīng)用程序的過程，因為向?qū)顾兊梅浅：唵危⑶以谡麄€過程中提供了分步指導(dǎo)。

審查和批準(zhǔn)該應(yīng)用程序可能需要幾個小時，但是當(dāng)它的申請最終出現(xiàn)在商店中。

如果找不到APK，則可以通過構(gòu)建→生成簽名的捆綁包 / apk→構(gòu)建APK ，傳遞我們現(xiàn)有的密鑰庫文件并填充我們生成密鑰庫時使用的別名和密碼來創(chuàng)建一個新的APK。生成APK后，應(yīng)出現(xiàn)通知，您可以通過單擊“定位”鏈接來獲取文件。

恭喜，您的應(yīng)用在Google Play中！

就是這樣！我們只是將PWA推到Google Play商店。這個過程并不像我們想要的那樣直觀，但是盡管如此，當(dāng)您看到您的應(yīng)用在野外顯示時，它絕對可以做到，并且相信我，它在最后會填充。

值得指出的是，此功能仍然是非常早期的階段，我認(rèn)為它在一段時間內(nèi)進(jìn)行了實驗。我不建議您暫時使用您的應(yīng)用程序的生產(chǎn)版本，因為這僅適用于Chrome 72及更高版本 - 此之前的任何版本都可以安裝該應(yīng)用程序，但是該應(yīng)用程序本身將立即崩潰，這不是最佳的用戶體驗。

此外，官方發(fā)布Custom-Tabs-client尚未支持TWA。如果您想知道為什么我們使用RAW GITHUB鏈接而不是官方圖書館版本，那就是原因。

以上是如何將進(jìn)步的Web應(yīng)用程序進(jìn)入Google Play商店的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！