web-dev-qa-db-ja.com

プログレッシブWebアプリPlayストア/アプリストアを追加する

PWAは、新しいAngularを使用して完全にビルドされます。ツリーシェーキング、uglify、AOT、サービスワーカーなど、すべての最適化を実装しました。非常にうまく機能し、モバイルアプリとして動作します。ユーザーがホーム画面に追加した場合、違いを見分けるのは困難です。

PWAにはいくつかの大きな制限があります。

  • ビジネスに関するすべての通知（重要）はSMSとして送信する必要があります。これには明らかに大きなコストメリットがあります。 Androidで「web」プッシュ通知を使用することを検討しましたが、多くのiOSユーザーもいます。
  • 「バックグラウンド」で地理的位置を「追跡」する機能が必要であり、HTML5 Geolocation APIはそれをカットしません。
  • 現在、ユーザーがURLに移動するたび（SMSリマインダー）としてブラウザーで新しいタブを開く傾向があります（電話によって異なります）。ユーザーが実際にホーム画面にアプリを追加してもこれにより、読み込み時間が明らかに増加し、タブが多くなりすぎます。アプリをフォアグラウンドに移動して特定のルートに移動するか、プッシュ通知を使用します。
  • 一部のアクティブユーザーは1日に10件の通知を簡単に受信でき、アプリに簡単に移動する方法が必要です。

NativeScriptとIonicを調査しました。どちらもAngular appを開発する機能を提供しますが、すべてモバイル向けのアプリを書くことを前提に設計されているようです（または、ゼロから始めます）。

私は何かを見逃しているかもしれませんが、プログレッシブWebアプリにラッパーを配置して「ハイブリッド」アプリとしてインストールできるようにする場合のベストプラクティスは何でしょうか。アプリは単純にパブリックURLに移動し、サービスワーカーをサポートし、一部のネイティブ機能にアクセスすることもできます。

ここでPWAの要点を見逃している可能性があることを理解していますが、別の「ネイティブ」アプリを作成することは、私たちにとって本当に選択肢ではありません。

プログレッシブウェブをGoogle PlayストアまたはApple App Storeのアプリとして公開する最良の方法は何ですか？

androidiosangularprogressive-web-apps
26
Adam Kundrat

Hosted Web Appを始めるのに最適な場所は PWABuilder.com です。このツールは、オンラインまたはCLIから使用できます。その一部はサービスワーカーとスタッフを作成しますが、AndroidおよびiOSのCordovaプロジェクトも作成します。

出発点を作成するためだけにPWABuilderを使用しました。最終的に、生成されたiOSとAndroidプロジェクトをiOS用の1つに結合します。AndroidとWindows。Cordovaであるため、プラグインも使用できます。

9
Sorskoot

2019年更新

GoogleはGoogle PlaystoreのPWAアプリに対してオープンになっているため、 PWA2APK などのツールを使用して、既存のPWAをGoogle Playstore対応アプリに変換できます。ツールによって生成されたAndroid APK（PWApk）は、Playstoreにアップロードできます。

このツールは、PWAの発明者の1人であるAlex Russelによってツイートされています。

https://Twitter.com/slightlylate/status/109368179129718784

5
Felix josemon

ディープリンクを検索することをお勧めします。

https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen#Android_intent_filters

新規および改善されたホームへの追加画面

ポール・キンランポール・キンランポールは開発者であるChrome最初に「ホーム画面に追加」バナーをChrome 42で導入しました。これは大きな一歩でした。ネイティブアプリのように、お気に入りのサイトをホーム画面に簡単に保持できる機能をユーザーに提供しました。Alibabaのような開発者から、ユーザーがサイトをホーム画面に追加すると4倍の頻度で再エンゲージすることがわかりました。また、ホーム画面に追加するためのヒューリスティックをチューニングしてPromptをより早くインストールすると、インストールが48％増加することもわかりました。

チームがウェブアプリをAndroidの第一級市民にするホーム画面の追加機能の改善に取り組んできたことを喜んで共有します。単にショートカットアイコンである代わりに、WebアプリはAndroidに統合されます。つまり、PWAをホーム画面に追加するユーザーは、他のアプリを見る場所（アプリの引き出しやアプリの検索など）でPWAを見つけ、意図からサイトを開くことができます。これは多くの改善の最初のステップであり、今後数か月でホーム画面に追加するためのデフォルトのエクスペリエンスにする予定です。

改良されたホーム画面への追加機能は、Chrome Canaryで既に利用可能であり、今後数週間でChrome 57ベータ版に展開されます。

注：Chrome 59の時点で、Chromeの安定したチャネルですべてのユーザーにロールバックされています。サイトをテストするには、PWAにアクセスします。3ドットメニュー> [ホームに追加画面」またはホーム画面に追加するバナーを使用します。

この新しいエクスペリエンスは、ホーム画面に追加する元のバージョンよりも大幅に改善されていますが、インストールされたこれらのProgressive Web AppsとAndroid Apps。

アプリのアイコンと名前を更新するProgressive Web Appのアイコンと名前を更新して、ユーザーに反映できるようになりました。マニフェストのアイコンまたは名前を変更すると、ユーザーがその後サイトを開いた後にホーム画面のアイコンが更新されます。

Android Intent FiltersプログレッシブWebアプリがこの新しい改良されたホーム画面への追加エクスペリエンスを介してインストールされると、そのドメインのURLスペースのターゲットとなるようにシステムに登録されます。つまり、ユーザーがプログレッシブWebアプリのスコープ内に含まれるリンクをクリックすると、PWAを実行した状態でChromeを開くのではなく、アプリが開きます。

プログレッシブWebアプリをインストールすると、Webアプリマニフェストとその他のメタデータが確認され、ユーザーのデバイスにインストールされるAPK（Androidパッケージキット）が作成されます。これは、ユーザーが最初にインストールするとき、 Webアプリ。

注：Webアプリマニフェストが変更されるたびに、新しいAPKを生成する必要がある場合、マニフェストを頻繁に更新することはお勧めできません。マニフェストでユーザー固有の識別子（ユーザーごとのカスタムstart_urlなど）を使用しないようにすることが特に重要です。これにより、一意のAPKが生成されるため、インストール時間が予想よりもはるかに長くなります。そのAPKで、Android Webアプリケーションを開くタイミングを定義するインテントフィルターを定義します。たとえば、 https://airhorner.com アプリをいつでも開くには、そのリンクをクリックすると、Chromeは以下を作成します。

<intent-filter>
  <action Android:name="Android.intent.action.VIEW" />
  <category Android:name="Android.intent.category.DEFAULT" />
  <category Android:name="Android.intent.category.BROWSABLE" />
  <data
    Android:scheme="https"
    Android:Host="airhorner.com"
    Android:pathPrefix="/" />
</intent-filter>

これは非常に強力ですが、柔軟性はあまりありません。これは、Androidのドメイン全体で https://airhorner.com/ でクリックまたはインターセプトされたリンクを開いたときにアプリを開くときに単に表示されます。

しかし、ドメイン上のすべてのパスに対してPWAを開きたくない場合はどうでしょうか？ここで、スコープWebアプリマニフェストプロパティが使用されます。スコープは...です.

2
robert king

PWAをionic/Cordovaアプリとして簡単にパッケージ化できます。

  1. 現時点ではiOSでWebプッシュを実現する方法はありません。 Cordovaを使用します。
  2. バックグラウンド追跡はできません。定期的なプッシュ通知とバックグラウンド同期を組み合わせて、それが助けになるかどうかを検討してください。
  3. On Androidユーザーがする必要があるのは、リンクが最初に開いたときに常にクリックすることだけです。
  4. プッシュ通知を使用すると、URLを指定できます。

この記事を読んで、CordovaとPWAをどのようにミックスしたかについてもう少し理解してください。

https://medium.com/awebdeveloper/pwa-is-future-of-mobile-how-to-tame-it-855dd42df0ec

0
aWebDeveloper