Skip to content

PWAの基礎知識(その7)「Web App Manifestを提供する上で知っておくと良いこと」

by : 2018/07/18

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Web App Manifestを作る時に便利なテクニックを紹介します。

Web App Manifestとは?

Web App ManifestはWebアプリをスマートフォンアプリのようにインストールできる技術です。アプリストアを経由せずに配布できるのが魅力です。

インストール数を知る

どれくらいのPWAアプリが使われているか、それは皆さんが知りたいことだと思います。この時使えるのはGoogleアナリティクスです。例えば、manifest.jsonのstart_urlを次のように指定します。

こうすることでGoogle Analyticsを使って、起動数を測定可能になります。

PWAの場合だけ表示を変える

Webブラウザから使った場合と、PWAとして立ち上げた場合で表示を変えたいこともあるでしょう。PWAではオフラインで使うことも想定してキャッシュされるので、サーバサイドでの表示出し分けはよくありません。そこでJavaScriptを使います。例えば manifest.json で次のように設定します。

こうすることで、JavaScript側でlancherというパラメータの有無によって表示を変えられるようになります。不要なフッター情報などを削除しても良いでしょう。

オンライン/オフライン判定

これはPWAに限りませんが、 navigator.onLine がtrue(オンライン)/false(オフライン)によって判定できます。ムダなアクセスをなくしたり、デフォルト画像を表示したりするのに使えます。

インストールプロンプトの抑止

サイトを閲覧中にインストールしませんか、というバナーを出してもなかなかOKされないでしょう。インストールしたくなるような文脈が必要なはずです。そこで、インストールプロンプトを抑止し、任意のタイミングで出せるようにします。

まず抑止は beforeinstallprompt イベントで行います。

そして、任意のタイミングで deferredPrompt.prompt(); を実行します。

ただし、現状では beforeinstallprompt がいつ実行されるかが分からず、かつ一度離脱した後、確実に次も呼ばれるかは分かりませんので注意してください。

インストール状況を調べる

PWAをインストール済みかどうかは event.userChoice で判別できます。 accepted であればインストール済み、dismissedであればキャンセル済みです。

ネイティブアプリのインストールを進める

manifest.jsonに related_applications を指定することでネイティブアプリを進められるようになります。

さらに preferrelatedapplications を true として指定するとPWAのインストールバナーは出さず、アプリのバナーのみになります。


PWAはネイティブアプリとWebアプリの中間とも言える存在です。単純にWebアプリ + インストールできる程度に扱うのではなく、ちょっとした工夫で解析や、よりユーザビリティの高い仕組みが提供できます。

via ウェブアプリのインストール バナー  |  Web  |  Google Developers

via ウェブアプリ マニフェスト  |  Web  |  Google Developers

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。