主要なアプリストアへのPWAの公開：理由と方法

Google Playストアを皮切りに、次々とアプリマーケットプレイスがプログレッシブウェブアプリ（プログレッシブウェブアプリとは何ですか？）をストアに迎え入れるという大騒ぎに飛びつき、ソフトウェア配信の新しい頼りになるアプローチになりました。 これらすべてが機能しているので、この新しく発見されたテクノロジーを利用してアプリのリーチを拡大しないのはもったいないでしょう。

プログレッシブウェブアプリの動き全体、特に公開プロセスについてより明確な視点を提供するために、本日は、主要なアプリ市場におけるPWAの現状と、それらのストアにPWAを公開する方法を確認します。

プログレッシブウェブアプリを主要なアプリストアに公開する必要があるのはなぜですか？

以前は、プログレッシブWebアプリはWebインストール（ホーム画面に追加）のみに制限されていました。 しかし、時間の経過とともに、GoogleやMicrosoftなどのアプリマーケットプレイスはPWAの可能性を認識し始め、将来このテクノロジーの採用を促進するためのイニシアチブを取りました。

あなたが能力と資金を持っているなら、私たちの専門家の意見はあなたがそれのために行くべきであるということです—あなたのPWAオムニプラットフォームを作ってください。 結局のところ、Twitter、Uber、Spotifyなどの大手ブランドはすべて時流に乗って素晴らしい結果を出し、このテクノロジーがすべてのマーケティングではなく、検討する価値があることを証明しています。 Microsoft自身も、プログレッシブWebアプリをWindowsの主要なエクスペリエンスにすることを計画することで、さらに一歩進んだ。

 推奨読書：プログレッシブウェブアプリの12のベスト例。

PWAを主要なアプリストアに公開する方法

Google Playストア

PWA運動の先駆者であるため、プログレッシブウェブアプリのオープンアームを保持しているGooglePlayストアを見るのは当然のことです。 TWA （Trusted Web Activities）を導入することで、公開シーケンス全体がはるかに簡単になり、すぐに終了するはずです。

要件

• AndroidStudioがインストールされています
• Google開発者アカウント
• 動作し、品質がチェックされたプログレッシブウェブアプリ。

ステップ1 ：TWAスターターAndroidアプリのクローンを作成し、変更します

• 次のコマンドを使用して、 svgomg-twaプロジェクトのクローンを作成します。

 git clone https://github.com/GoogleChromeLabs/svgomg-twa.git

• [ファイル] >[新規]>[プロジェクトのインポート]を使用して、プロジェクトをAndroidStudioにインポートします。

/app/build.gradleで、目的に合わせてtwaManifestを変更します。 何をどのように変更するかについての詳細は、build.gradleファイル内にあります。

注： applicationIdは、 <com>.<your-brand>.<your-app>の形式に従う必要があります

変更後、 /app/build.gradleは次のようになります。

 def twaManifest = [
    applicationId：'com.simicart.app'、
    hostName：'simicart.com'、//TWAで開かれているドメイン。
    launchUrl：'/'、//TWAの開始パス。 ドメインに関連している必要があります。
    name：'SimiCart PWA'、//AndroidLauncherに表示される名前。
    themeColor：'＃ED8A19'、//ステータスバーに使用される色。
    NavigationColor：'＃303F9F'、//ナビゲーションバーに使用される色。
    backgroundColor：'#bababa'、//スプラッシュ画面の背景に使用される色。
    enableNotifications：false、//通知の委任を有効にするにはtrueに設定します。
    //ここにアプリのショートカットを追加します。 すべてのショートカットには、次のフィールドを含める必要があります。
    // --name：ショートカットに表示される文字列。
    // --short_name：|name|の場合に使用される短い文字列長すぎます。
    // --url：アプリを起動するためのURLの絶対パス（例：'/ create'）。
    // --icon：アイコンとして使用するドローアブルフォルダ内のリソースの名前。
    ショートカット：[
        名前：'SimiCartを開く'、 
        short_name：'開く'、 
        url：'/ open'、 
        アイコン：「スプラッシュ」
    ]
、
    //スプラッシュ画面を削除するときに再生されるフェードアウトアニメーションのミリ秒単位の期間。
    splashScreenFadeOutDuration：300
]

ステップ2 ：キーストアを作成してAPKを確認する

APKの検証には、キーストアまたはアップロードキーが必要です。 キーストアを作成するには、 Android Studioを起動し、[ビルド]→[署名済みバンドル/ APKの生成]に移動して、必要なフィールドに入力します。

キーストアを作成したら、次のコマンドを使用して、キーストアからSHA256フィンガープリントを抽出する必要があります。

 keytool -list -v -keystore〜/ dlbr-keystore.jks -aliastwa-storepass••••••-keypass•••••• 

 エントリタイプ：PrivateKeyEntry
..。
証明書のフィンガープリント：
         SHA1：..。
         SHA256：2A：9B：A8：64：32：0A：69：99 ...：？ この行をコピーします

ステップ3 ：デジタルアセットリンクを構成する

後でAPKにリンクするために使用できるWebコンテンツの所有権を確認するには、デジタルアセットリンクが必要です。

ステートメントファイルを生成する

以前に抽出したSHA256フィンガープリントを使用し、StatementListGeneratorおよびTesterを使用してステートメントファイルを生成します。

ステートメントファイルを生成したら、次のステップは、デジタルアセットツールからの情報を含む公的にアクセス可能なファイルを作成することです。 ファイルは、Webホストと次の場所に配置する必要があります。

 .well-known / assetslinks.json

このファイルの場所は、Webアプリのビルドプロセスによって異なりますが、通常は、デプロイされたディレクトリ、つまり「public」または「dist」ディレクトリにある必要があります。

すべてが完了したら、次の最後のステップはアプリをデプロイすることです。

ステップ4 ：GooglePlayでアプリをビルドしてリリースする

Google Play Consoleをデフォルト設定にして、[すべてのアプリケーション]→[アプリケーションの作成]に移動します。

内部テストを作成する

アプリのリリース→内部テストトラック→リリースの作成に移動して、アプリの内部テストトラックを作成します。

署名されたAPKを作成する

Android Studioで、[ビルド]→[署名付きバンドル/ APKの生成]に移動し、前に抽出したSHA256キーストアを使用します。 必ず両方の署名バージョンボックスをチェックしてください。

APKをアップロードする

これで、このプロセスは終了です。 apkをアップロードするには、Google Playストア、アプリリリース→内部テストトラック→リリースの編集に移動します。

ストアリストを完成させることを忘れないでください

アプリをレビュープロセスにリストする前に、すべての必須フィールドに入力する必要があります。 これらのフィールドは、価格の詳細、ストアのリスト、コンテンツのレーティングなどの重要な情報に必要です。このプロセスが完了すると、すべての必須フィールドに入力されていることを示す4つの緑色のチェックマーク️が表示されます。

以上です。 これで、PWAを確認する準備が整い、数時間以内に一般にダウンロードできるようになります。

Apple App Store

すべての主要なアプリマーケットプレイスの中で、Apple App Storeは、PWAに対して少しでも歓迎的であるか、敵対的でさえあるかもしれません。これは、SteveJobsがプログレッシブウェブアプリでいっぱいの未来を最初に構想したことを考えると皮肉なことです。

完全なSafariエンジンはiPhoneの内部にあります。 そのため、iPhoneのアプリとまったく同じように表示され、動作するすばらしいWeb2.0およびAjaxアプリを作成できます。 そして、これらのアプリはiPhoneサービスと完全に統合できます。 電話をかけたり、メールを送信したり、Googleマップで場所を検索したりできます。

スティーブジョブズ、2007年

iOSでは、PWAは機能の点で厳しく制限されています。 プッシュ通知はサポートされておらず、Webアプリマニフェストは部分的にしかサポートされておらず、NewAppGalleryなどの新機能はPWAを完全に無視することがよくあります。 このため、AppleのApp Storeレビューガイドラインに従って、PWAがAppleAppStoreで歓迎されないことは理にかなっています。

アプリには、再パッケージ化されたWebサイトを超えてアプリを向上させる機能、コンテンツ、およびUIを含める必要があります。 アプリが特に有用、独自性、または「アプリのような」ものでない場合、そのアプリはAppStoreに属していません。

最小限の機能、AppStoreレビューガイドライン

AppleはPWAのすべての機能を無力化しようと懸命に努力しているため、Cordovaのようなネイティブアプリラッパーを使用している場合でも、PWAを公開する努力は無駄です。 今のところ、将来のiOSバージョンでPWAのサポートが向上することを期待できますが、現時点では、PWAをApple App Storeに公開することはできません。そのため、ターゲットオーディエンスのほとんどがネイティブアプリのアプローチを検討する必要があります。 iOSベースのデバイスを使用します。

 続きを読む：iOS 14ベータ版のPWA：微妙な変更

Microsoft Store

Windows 10とPWA：Software Deliveryの未来に関する記事で述べたように、マイクロソフトはプログレッシブWebアプリストアの基盤をかなり前からレイアウトしており、段階的に実現しています。 より人気のあるブランドのPWAは、すでにアプリマーケットプレイス全体に存在しており、他の人がフォローできる模範的な結果も少なくありません。

Googleと同様に、MicrosoftはPWAを歓迎し、さらに、ネイティブのUWPアプリを普及させてハイブリッドアプリに置き換えることも計画しています。これは、ネイティブシェルにラップされた一種のプログレッシブウェブアプリです。

理論的には、プログレッシブWebアプリをMicrosoft Storeに公開することは、元々、高品質のPWAのクロールメカニズムとしてBingを使用する自動プロセスであることが計画されていたため、まったく労力を要しません。 ただし、全体はまだ実験段階であり、計画どおりに効果的に機能しません。そのため、PWAをWindowsアプリパッケージ（.appx）として手動で送信する必要があります。 しかし、心配しないでください。このプロセスは、特定のアプリストアほど神経質なものではありません。

要件

• WindowsDevCenterアカウント
• PWABuilder
• ストアポリシーを満たす、機能し、品質がチェックされたプログレッシブWebアプリ

ステップ1 ：アプリの名前を予約する

Microsoft Storeでアプリを公開する最初のステップは、名前を予約することです。 1人の狂った若者が存在するすべての名前を予約することにした場合はどうなるのか疑問に思っている場合は、心配しないでください。名前の予約は3か月後に期限切れになります。

この情報は後で必要になるため、必須フィールドに入力し、どこかにメモしてください。

ステップ2：PWABuilderを使用してAppXを生成する

上記のように、PWABuilderは、主要なアプリマーケットプレイスで公開可能な機能パッケージを生成するための優れた方法です。 これは、PWAの採用を前進させることのみを目的として、Microsoftによって開発された市場で最初のツールの1つです。

マニフェストを生成する

PWABuilderで、PWAのURLを入力し、[開始]をクリックします。 この手順は、 manifest.json内の不足している情報を自動的に識別および/または入力するため、非常に重要です。これは、MicrosoftStore用に特別に構築されていないPWAで必要になることがよくあります。

 推奨読書：PWAマニフェスト：Webアプリマニフェストを簡単な方法で作成する

次のステップは、PWAのサービスワーカーを構築することですが、サービスワーカーがすでに統合されている典型的なプログレッシブウェブアプリであると仮定すると、このステップはスキップされ、最後のステップである.appxパッケージの取得に進みます。

AppXを生成する

[AppXの生成]をクリックすると、次のようなポップアップが表示されます。

ここで、以前の情報が役立ちます。 フィールドに入力すると、.appxパッケージを含むダウンロードボックスが表示されます。 ダウンロードすると、PWAをMicrosoftStoreに公開する準備が整います。

PWAをストアに公開する前にテストする場合は、開発者モードを有効にしてWindowsでテストするオプションが常にあります→ test_install.ps1を右クリック→ PowerShellで実行します。 これを行うと、PWAがデスクトップと[スタート]メニューに自動的に追加され、そこからPWAを起動してテストし、すべてが正しく機能しているかどうかを確認できます。

手順3：アプリパッケージをMicrosoftStoreに送信する

PWAをMicrosoftStoreに公開するには、前にダウンロードした.zip内のパッケージフォルダーに移動する必要があります。 このフォルダーには、MicrosoftStoreに公開する必要があるすべてのものがあります。 明確にするために、このフォルダーにはコードが含まれていません。これは、Web上のPWAおよびその他の無関係なストアメタデータへの送信メカニズムとしてのみ機能するためです。

windows.appxを見つけたら、開発センターの送信ページに移動し、必要な情報を入力します。

すべての手順を完了し、すべての必須フィールドに入力すると、[ストアに送信]ボタンが点灯し、PWAがレビュープロセスの準備ができたことを示します。 このプロセスが完了するまでに1時間から数日かかります。 PWAが終了すると、PWAが認定され、パブリック/プライベートダウンロードで利用できるようになります（Dev Centerの可用性設定によって異なります）。

結論

結局のところ、プログレッシブWebアプリを作成する必要があるのはなぜか、まだ疑問に思っているかもしれません。ましてや、このような問題をすべて解決して公開する必要はありません。 そして、あなたはそのような基本的な質問をするのは正しいです。

プログレッシブウェブアプリは、ソフトウェア配信の未来であり、ウェブ技術の進化における次の自然なステップであることを段階的に証明しています。 現在のところ、eコマースの世界ではすでに広く使用されており、すべてのデバイスで統一された魅力的なエクスペリエンスが高いコンバージョンの鍵となります。

新しいテクノロジーであるため、1つのプログレッシブWebアプリをそのまま構築することはすでに十分に困難です。 SimiCartを使用すると、市場で完全で最高の費用対効果の高いソリューションを提供するため、 MagentoPWAの開発フェーズについて心配する必要がなくなります。