PWA（プログレッシブWebアプリ）は、しばらく前から私たちと一緒にいました。しかし、クライアントに説明するたびに、同じ質(zhì)問(wèn)が表示されます。「ユーザーはアプリストアを使用してアプリをインストールできますか？」答えは伝統(tǒng)的にノーでしたが、これはTWA（信頼できるWebアクティビティ）と呼ばれる新しい機(jī)能を出荷するChrome 72で変更されました。

信頼できるWebアクティビティは、カスタムタブに基づいたプロトコルを使用して、PWAなどのWebアプリコンテンツをYourandroidアプリと統(tǒng)合する新しい方法です。

この記事では、NetGuruの既存のPWA（WordGuru）を使用し、アプリケーションを利用可能にし、Google Play App Storeから直接インストールする準(zhǔn)備ができているために必要なことを段階的に説明します。

ここで説明するもののいくつかは、Android開(kāi)発者にとっては愚かに聞こえるかもしれませんが、この記事は、特にAndroid Studioを使用したことがないか、Androidアプリケーションを作成したことがないフロントエンド開(kāi)発者の観點(diǎn)から書(shū)かれています。また、ここでカバーしているものの多くは、Chrome 72に限定されているため、まだ非常に実験的であることに注意してください。

ステップ1：信頼できるWebアクティビティを設(shè)定します

TWAをセットアップする必要はありませんが、Javaコードを作成する必要はありませんが、Android Studioが必要です。以前にiOSまたはMacソフトウェアを開(kāi)発した場(chǎng)合、これはXcodeによく似ており、Android開(kāi)発を合理化するために設(shè)計(jì)された?jī)?yōu)れた開(kāi)発環(huán)境を提供します。それで、それをつかんで、ここで私に會(huì)いましょう。

Android Studioで新しいTWAプロジェクトを作成します

Android Studioを手に入れましたか？まあ、私は実際にあなたを聞いたり會(huì)ったりすることができないので、私はあなたがしたと思います。先に進(jìn)み、それを開(kāi)いてクラックし、「新しいAndroid Studioプロジェクトを開(kāi)始する」をクリックします。そこから、「アクティビティを追加しない」オプションを選択しましょう。これにより、プロジェクトを構(gòu)成できます。

構(gòu)成はかなり簡(jiǎn)単ですが、何が何であるかを知ることは常に良いことです。

• アプリケーションの名前に名前を付けます（しかし、私はあなたがそれを知っていたに違いない）。
• パッケージ名： PlayストアのAndroidアプリケーションの識(shí)別子。それは一意でなければならないので、私はPWAのURLを逆の順序で使用することをお?jiǎng)幛幛筏蓼梗ɡ篶om.netguru.wordguru）。
• 保存場(chǎng)所：プロジェクトがローカルに存在する場(chǎng)所。
• 言語(yǔ)：これにより、特定のコード言語(yǔ)を選択できますが、アプリが既に書(shū)かれているため、その必要はありません。これは、デフォルトの選択であるJavaに殘すことができます。
• 最小APIレベル：これは、私たちが攜帯しているAndroid APIのバージョンであり、サポートライブラリ（次に説明します）が必要とします。 API 19を使用しましょう。

これらのオプションの下にはチェックボックスがほとんどありません。これらはここでは無(wú)関係ですので、それらはすべてチェックされていないままにしてから、終了してください。

TWAサポートライブラリを追加します

TWAにはサポートライブラリが必要です。良いニュースは、その要件を入力するために2つのファイルを変更するだけで、両方が同じプロジェクトディレクトリ、Gradleスクリプトに存在するだけであることです。どちらもbuild.gradleという名前ですが、括弧內(nèi)の説明を調(diào)べることで、それを區(qū)別できます。

Androidアプリ専用に作られたJitpackというGitパッケージマネージャーがあります。それはかなり堅(jiān)牢ですが、一番下の行は、私たちのWebアプリを簡(jiǎn)単にすることです。有料サービスですが、Google Playストアに何かを入手するのが初めてであれば、費(fèi)用がかかると思います。

編集者注：これは、Jitpackのスポンサープラグではありません。この投稿は、Androidアプリにほとんど精通していないか、Google Playにアプリを送信することはないと仮定しており、ストアに直接接続するAndroidアプリリポジトリを管理するための摩擦が少ないためです。とはいえ、それはまったく要件ではありません。

JitPackに參加したら、プロジェクトを接続しましょう。そのbuild.gradle（project：wordguru）ファイルを開(kāi)き、アプリリポジトリのjitpackを見(jiàn)るように指示します。

 allprojects {
  リポジトリ{
    ...
    maven {url 'https://jitpack.io'}
    ...
  }
}

さて、他のbuild.gradleファイルを開(kāi)いてみましょう。これは、プロジェクトに必要な依存関係を追加できる場(chǎng)所であり、実際には次のことを行います。

 // build.gradle（モジュール：アプリ）

依存関係{
  ...
  実裝 'com.github.googlechrome：custom-tabs-client：a0f7418972'
  ...
}

TWAライブラリはJava 8機(jī)能を使用しているため、Java 8を有効にする必要があります。それを行うには、同じファイルにコンパイルオプションを追加する必要があります。

 // build.gradle（モジュール：アプリ）

Android {
  ...
  compileOptions {
    sourcecopatibility javaversion.version_1_8
    ターゲットcompatibility javaversion.version_1_8
  }
  ...
}

また、次のセクションで説明するマニフェストプレイスホルダーと呼ばれる変數(shù)もあります。とりあえず、以下を追加して、アプリがホストされている場(chǎng)所、デフォルトのURL、アプリ名を定義しましょう。

 // build.gradle（モジュール：アプリ）

Android {
  ...
  defaultconfig {
    ...
    manifestplaceholders = [
      ホスト名：「WordGuru.netguru.com」、
      defaulturl： "https：//wordguru.netguru.com"、
      発売名：「WordGuru」
    ]
    ...
  }
  ...
}

Androidアプリマニフェストでアプリの詳細(xì)を提供します

すべてのAndroidアプリには、Androidアプリマニフェスト（AndroidManifest.xml）があります。これは、パッケージ情報(bào)、デバイスの互換性など、Google Playがアプリの要件を表示するのに役立つ多くのものなど、アプリに関する重要な詳細(xì)を提供します。

私たちがここで本當(dāng)に関心を持っているのは、アクティビティ（）です。これがユーザーインターフェイスを?qū)g裝するものであり、「信頼できるWebアクティビティ」の「アクティビテ?！工吮匾扦?。

面白いことに、Android Studioでプロジェクトをセットアップするときに「アクティビティを追加」オプションを選択しました。これは、マニフェストが空で、アプリケーションタグのみが含まれているためです。

まず、ManFifestファイルを開(kāi)くことから始めましょう。既存のパッケージ名を獨(dú)自のアプリケーションIDに置き、ラベルを前のセクションで定義したManifestPlaceholders変數(shù)の値に置き換えます。

次に、タグ內(nèi)にタグを追加して、実際にTWAアクティビティを追加します。

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

 //ハイライト

  

     //ハイライト

       //ハイライト

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      <intent-filter>
        
        <category android></category>
      </intent-filter>

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      <intent-filter android>
        
        
        <category android></category>
         //ハイライト
      </intent-filter>
    
  

そして、それは私の友人、ステップ1です。ステップ2に進(jìn)みましょう。

ステップ2：ウェブサイトとアプリの関係を確認(rèn)します

TWAには、AndroidアプリケーションとPWAの間の接続が必要です。そのためには、デジタル資産リンクを使用します。

接続は両端に設(shè)定する必要があります。ここで、TWAはアプリケーションで、PWAはWebサイトです。

その接続を確立するには、マニフェストプレイスホルダーを再度変更する必要があります。今回は、PWAに関する情報(bào)を保持するAssetStatementsと呼ばれる追加の要素を追加する必要があります。

 // build.gradle（モジュール：アプリ）

Android {
  ...
  defaultconfig {
    ...
    manifestplaceholders = [
      ...
      assetStatements： '[{"relation"：["delegate_permission/common.handle_all_urls"]、'  
        '"Target"：{"namespace"： "web"、 "site"： "https://wordguru.netguru.com"}}]'
      ...
    ]
    ...
  }
  ...
}

次に、アプリケーションタグに新しいメタデータタグを追加する必要があります。これにより、Androidアプリケーションに、マニフェストプレイスホルダーで指定されたアプリケーションとの接続を確立したいことを通知します。

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



  
    ...
      
    ...
  

それでおしまい！ウェブサイト関係への申請(qǐng)を確立しました。それでは、ウェブサイトのアプリケーションへの変換に飛びつきましょう。

接続を反対方向に確立するには、アプリの /.well-known/assetlinks.jsonパスで使用できる.jsonファイルを作成する必要があります。このファイルは、Android Studioに組み込まれたジェネレーターを使用して作成できます。ほら、Android StudioがAndroid開(kāi)発を合理化するのに役立つと言った！

ファイルを生成するには3つの値が必要です。

• ホスティングサイトドメイン：これは私たちのPWA URL（https://wordguru.netguru.com/など）です。
• アプリパッケージ名：これは私たちのTWAパッケージ名（例：com.netguru.wordguru）です。
• アプリパッケージフィンガープリント（SHA256）：これは、Google Playストアのキーストアに基づいて生成されるユニークな暗號(hào)化ハッシュです。

すでに最初と2番目の値があります。 Android Studioを使用して最後のものを入手できます。

まず、署名されたAPKを生成する必要があります。 Android Studioに移動(dòng)してください：ビルド→署名付きバンドルまたはAPK→APKを生成します。

次に、すでに持っている場(chǎng)合は、既存のキーストアを使用します。必要な場(chǎng)合は、最初に「新しい…」に移動(dòng)します。

次に、フォームに記入しましょう。資格情報(bào)は、アプリケーションが署名されるものであり、アプリケーションの所有権を確認(rèn)するため、資格情報(bào)を覚えておいてください。

これにより、アプリパッケージの指紋（SHA256）を生成するために必要なキーストアファイルが作成されます。このファイルは、あなたがアプリケーションの所有者であるという証拠として機(jī)能するため、非常に重要です。このファイルが失われた場(chǎng)合、ストアでのアプリケーションをさらに更新することはできません。

次に、バンドルの種類(lèi)を選択しましょう。この場(chǎng)合、プロダクションバンドルが提供されるため、「リリース」を選択しています。署名バージョンも確認(rèn)する必要があります。

これにより、Google Playストアでリリースを作成するために後で使用されるAPKが生成されます。キーストアを作成した後、それを使用して、必要なアプリパッケージ指紋（SHA256）を生成できます。

Android Studioに戻り、ツール→App Links Assistantにアクセスしましょう。これにより、アプリケーションとWebサイトの間に関係を作成するために必要な手順を示すサイドバーが開(kāi)きます。ステップ3、「Webサイト協(xié)會(huì)の宣言」にアクセスし、必要なデータを入力します：サイトドメインとアプリケーションID。次に、前のステップで生成されたキーストアファイルを選択します。

フォームに入力した後、「Digital Asset Linksファイルを生成する」を押して、assetlinks.jsonファイルを生成します。私たちがそれを開(kāi)くと、それは次のように見(jiàn)えるはずです：

 [{
  「関係」：["Delegate_permission/common.handle_all_urls"]、
  「ターゲット」：{
    「名前空間」：「Android_App」、
    "package_name"： "com.netguru.wordguru"、
    "Sha256_cert_fingerprints"：["8a：f4：....：29：28"]]
  }
}]

これは、アプリの /.Well-Nowned/Assetlinks.jsonパスで利用できるようにするために必要なファイルです。プロジェクト固有であり、この記事の範(fàn)囲外であるため、そのパスでそれを利用できるようにする方法については説明しません。

「リンクと検証」ボタンをクリックして、関係をテストできます。すべてがうまくいけば、「成功！」と確認(rèn)が得られます。

わーい！ AndroidアプリケーションとPWAの間に雙方向の関係を確立しました。ここからすべて下り坂ですので、家に帰りましょう。

ステップ3：必要な資産を取得します

Google Playは、アプリがストアでうまく表示されることを確認(rèn)するために、いくつかの資産を必要とします。具體的には、必要なものは次のとおりです。

• アプリアイコン： 48×48、72×72、96×96、144×144、192×192など、さまざまなサイズが必要です。または、適応アイコンを使用できます。
• High-Resアイコン：これは、ストア全體で使用される512×512 PNG畫(huà)像です。
• 機(jī)能グラフィック：これは、Googleがアプリの詳細(xì)ビューで使用する1024×500 JPGまたは24ビットPNG（アルファなし）バナーです。
• スクリーンショット： Google Playはこれらを使用して、ダウンロードする前にユーザーがチェックできるアプリのさまざまなビューを披露します。

それらすべてを持っているので、Google Play Store Developers Consoleに進(jìn)み、アプリケーションを公開(kāi)できます！

ステップ4：Google Playに公開(kāi)！

最後のステップに行き、最後にアプリをストアに押し込みましょう。

以前に生成したAPK（Androidstudioprojectsディレクトリにあります）を使用して、アプリケーションを公開(kāi)するにはGoogle Playコンソールにアクセスする必要があります。ウィザードはそれを非常に簡(jiǎn)単にし、プロセス全體で段階的なガイダンスを提供されているため、ストアでアプリケーションを公開(kāi)するプロセスについては説明しません。

アプリケーションがレビューおよび承認(rèn)されるまでに數(shù)時(shí)間かかる場(chǎng)合がありますが、そうであれば、最終的にストアに表示されます。

APKが見(jiàn)つからない場(chǎng)合は、符號(hào)付きバンドル / APKを生成し、既存のキーストアファイルを通過(guò)し、キーストアを生成したときに使用したエイリアスとパスワードを入力して、署名型バンドル / APKを生成して、新しいものを作成できます。 APKが生成された後、通知が表示され、「Locate」リンクをクリックしてファイルにアクセスできます。

おめでとう、あなたのアプリはGoogle Playにあります！

それでおしまい！ PWAをGoogle Playストアにプッシュしました。このプロセスは、私たちが望んでいるほど直感的ではありませんが、それでも少しの努力で間違いなく実行可能であり、私を信じて、それはあなたのアプリが野生で表示されているのを見(jiàn)ると、最後にその素晴らしい充填を與えます。

この機(jī)能はまだ非常に早い段階であることを指摘する価値があり、しばらくの間実験的であると考えるでしょう。これは、Chrome 72以降のみでのみ機(jī)能するため、今のところアプリケーションの制作リリースを使用することをお?jiǎng)幛?strong>しません。それ以前のバージョンはアプリをインストールできるようになりますが、アプリ自體はすぐにクラッシュします。これは最高のユーザーエクスペリエンスではありません。

また、Custom-Tabs-Clientの公式リリースはまだTWAをサポートしていません。公式ライブラリリリースの代わりにRaw Githubリンクを使用した理由を疑問(wèn)に思っているなら、それが理由です。

以上がGoogle PlayストアにプログレッシブWebアプリを入手する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。