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

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

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

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

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

設(shè)置TWA並不需要您編寫任何Java代碼，但是您需要擁有Android Studio。如果您以前開發(fā)了iOS或Mac軟件，那麼這很像Xcode，因?yàn)樗峁┝艘粋€(gè)旨在簡(jiǎn)化Android開發(fā)的開發(fā)環(huán)境。因此，抓住它，在這裡見我。

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

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

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

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

這些選項(xiàng)下面有很少的複選框。這些對(duì)我們來說是無關(guān)緊要的，因此請(qǐng)將它們?nèi)糠胖?，然後繼續(xù)完成。

添加TWA支持庫

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

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

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

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

 AllProjects {
  存儲(chǔ)庫{
    ...
    maven {url'https://jitpack.io'}
    ...
  }
}

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

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

依賴項(xiàng){
  ...
  實(shí)現(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 {
    ...
    清單持有人= [
      主機(jī)名：“ wordguru.netguru.com”，
      defaulturl：“ https：//wordguru.netguru.com”，
      啟動(dòng)名稱：“ Wordguru”
    這是給出的
    ...
  }
  ...
}

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

每個(gè)Android應(yīng)用都有一個(gè)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)容。

我們?cè)谶@裡真正關(guān)心的是活動(dòng)（）。這就是實(shí)現(xiàn)用戶界面的原因，並且是“可信賴的網(wǎng)絡(luò)活動(dòng)”中“活動(dòng)”所必需的。

有趣的是，我們?cè)贏ndroid Studio中設(shè)置項(xiàng)目時(shí)選擇了“無活動(dòng)”選項(xiàng)，這是因?yàn)槲覀兊那鍐问强盏?，並且僅包含應(yīng)用標(biāo)籤。

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

然後，我們將通過在標(biāo)籤中添加標(biāo)籤來實(shí)際添加TWA活動(dòng)。

<!-- 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：驗(yàn)證網(wǎng)站與應(yīng)用程序之間的關(guān)係

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

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

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

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

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

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

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



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

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

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

我們需要三個(gè)值來生成文件：

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

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

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

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

然後讓我們填寫表格。請(qǐng)務(wù)必記住這些憑據(jù)，因?yàn)檫@些憑據(jù)是將要簽署的應(yīng)用程序，並確認(rèn)您對(duì)申請(qǐng)的所有權(quán)。

這將創(chuàng)建一個(gè)生成應(yīng)用程序包指紋（SHA256）所需的密鑰庫文件。該文件非常重要，因?yàn)樗梢宰鳛樽C明您是應(yīng)用程序的所有者。如果此文件丟失，您將無法對(duì)商店中的應(yīng)用程序進(jìn)行任何進(jìn)一步的更新。

接下來，讓我們選擇捆綁包的類型。在這種情況下，我們選擇“發(fā)布”，因?yàn)樗鼮槲覀兲峁┝松a(chǎn)捆綁包。我們還需要檢查簽名版本。

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

讓我們回到Android Studio，然後轉(zhuǎn)到工具→應(yīng)用鏈接助理。這將打開一個(gè)側(cè)邊欄，該側(cè)邊欄顯示了在應(yīng)用程序和網(wǎng)站之間建立關(guān)係所需的步驟。我們想進(jìn)入步驟3，“聲明網(wǎng)站協(xié)會(huì)”並填寫所需的數(shù)據(jù)：站點(diǎn)域和應(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路徑中提供的文件。我不會(huì)描述如何使其在該路徑上可用，因?yàn)樗^於特定於項(xiàng)目，並且超出了本文的範(fàn)圍。

我們可以通過單擊“鏈接並驗(yàn)證”按鈕來測(cè)試關(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)：這是整個(gè)商店中使用的512×512 PNG圖像。
• 功能圖形：這是Google Play在應(yīng)用程序詳細(xì)信息視圖上使用的1024×500 JPG或24位PNG（無alpha）橫幅。
• 屏幕截圖： Google Play將使用這些屏幕截圖來展示用戶在下載之前可以查看的應(yīng)用程序的不同視圖。

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

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

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

使用我們之前生成的APK（位於AndroidStudioprojects目錄中），我們需要轉(zhuǎn)到Google Play控制臺(tái)以發(fā)布我們的應(yīng)用程序。我不會(huì)描述在商店中發(fā)布應(yīng)用程序的過程，因?yàn)閲粚?dǎo)使它變得非常簡(jiǎn)單，並且在整個(gè)過程中提供了分步指導(dǎo)。

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

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

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

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

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

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

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