Google PlayストアにプログレッシブWebアプリを入手する方法

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

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

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

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

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

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にはサポートライブラリが必要です。良いニュースは、その要件を入力するために2つのファイルを変更するだけで、両方が同じプロジェクトディレクトリ、Gradleスクリプトに存在するだけであることです。どちらもbuild.gradleという名前ですが、括弧内の説明を調べることで、それを区別できます。

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

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

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（モジュール：アプリ）

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

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

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

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

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

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

私たちがここで本当に関心を持っているのは、アクティビティ（）です。これがユーザーインターフェイスを実装するものであり、「信頼できるWebアクティビティ」の「アクティビティ」に必要です。

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

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

次に、タグ内にタグを追加して、実際に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に進みましょう。

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

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

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

その接続を確立するには、マニフェストプレイスホルダーを再度変更する必要があります。今回は、PWAに関する情報を保持する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 -->



  
    ...
      
    ...
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ステップ4：Google Playに公開！

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

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

アプリケーションがレビューおよび承認されるまでに数時間かかる場合がありますが、そうであれば、最終的にストアに表示されます。

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

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

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

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

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

以上がGoogle PlayストアにプログレッシブWebアプリを入手する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。