🥶

WebManifestを使ってウェブからPlay StoreやiTunesにスマートに誘導

2022/08/01に公開

Android

「ウェブサイトからGoogle Play StoreやiTunes Storeへアプリをインストールを促す」際に、現在はAppBarのような方法が主流だと思われます。今回は別の選択肢としてアプリをウェブページから誘導する方法を紹介します。しかも超簡単。

アプリ誘導を行っているサイトの例↓

Chromeだとユーザーの邪魔にならないかつ、見やすい位置にPlayストアの誘導が表示されます。その上に、★の評価も一緒に表示されます。
下の通知を消しても、三点リーダー「︙」のところの「アプリをインストール」を押すと表示されます。

Manifest.jsonを作成

どのように導入するのかというと、PWAを実装する時によく使うウェブマニフェストに2行追記するだけ。これだけです、
これらのアプリ誘導の最大の利点はPWAアプリ/TWAアプリじゃなくて普通のネイティブアプリのインストールを促せる点です。
キャッシュうぜぇwwwwwwwPWAなんか使ってやるもんかwwwって方にもおすすめできます。

まずはベースとなるウェブマニフェストを以下の便利なジェネレータを使い作成します。様々な大きさのアイコンもリサイズしてバンドルしてくれる有能サービスです。
https://app-manifest.firebaseapp.com

manifest.json

{
  "name": "菊地真",
  "short_name": "菊地真",
  "theme_color": "#2196f3",
  "background_color": "#515558",
  "display": "standalone",
  "scope": "https://example.com",
  "start_url": "/"
}

色

related_applicationを活用

ここで、Google Play Storeへインストールを促すために、WebManifestのrelated_applicationsプロパティを使います。以下がフォーマット。

"related_applications": [
  {
    "platform": "play", // Playストアを明示
    "url": "https://play.google.com/store/apps/details?id=com.example.app1", // URL
    "id": "com.example.app1" // PlayストアのID
  }, {
    "platform": "itunes", // iTunesを明示
    "url": "https://itunes.apple.com/app/example-app1/id123456789" // URL
  }
]

related_applications フィールドはオブジェクトの配列で、基礎となるプラットフォームにインストール可能、またはアクセス可能なネイティブアプリケーション — たとえば、 Google Play ストアで入手可能なネイティブの Android アプリケーションなどを指定します。このようなアプリケーションは、ネイティブアプリの同等品のように、同様または同等の機能を提供するマニフェストのウェブサイトの代替品となることを意図しています。

ネイティブアプリを優先する設定

PWAアプリよりもネイティブアプリを優先する設定を最後に追記します。これも、便利なprefer_related_applicationsをtrueにするだけと超お手軽。

+ "prefer_related_applications": true

※余談ですがWebManifestファイルは本来、.webmanifest拡張子を使うらしいですが.jsonでも問題は無いです

Manifest.jsonを作成

related_applicationを活用

ネイティブアプリを優先する設定

Discussion