コンテンツへスキップ

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を次のように指定します。

"start_url": "/?utm_source=homescreen"

view raw
index.json
hosted with ❤ by GitHub

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

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

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

"start_url": "index.html?launcher=true"

view raw
index.json
hosted with ❤ by GitHub

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

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

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

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

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

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

var deferredPrompt;
window.addEventListener('beforeinstallprompt', function(e) {
e.preventDefault();
// ここでプロンプトを変数に入れておく
deferredPrompt = e;
return false;
});

view raw
index.js
hosted with ❤ by GitHub

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

btnSave.addEventListener('click', function() {
if(deferredPrompt !== undefined) {
// インストールプロンプト表示
deferredPrompt.prompt();
deferredPrompt.userChoice
.then(function(choiceResult) {
// キャンセルされた場合
if(choiceResult.outcome == 'dismissed') {
console.log('User cancelled home screen install');
} else {
// インストールされた場合
console.log('User added to home screen');
}
deferredPrompt = null;
});
}
});

view raw
index.js
hosted with ❤ by GitHub

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

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

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

window.addEventListener('beforeinstallprompt', function(e) {
e.userChoice.then(function(choiceResult) {
if(choiceResult.outcome == 'dismissed') {
console.log('User cancelled home screen install');
}
else {
console.log('User added to home screen');
}
});
});

view raw
index.js
hosted with ❤ by GitHub

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

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

"related_applications": [
{
"platform": "play",
"id": "com.google.samples.apps.iosched"
}
]

view raw
index.json
hosted with ❤ by GitHub

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

"prefer_related_applications": true,
"related_applications": [
{
"platform": "play",
"id": "com.google.samples.apps.iosched"
}
]

view raw
index.json
hosted with ❤ by GitHub


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

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

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

From → HTML5

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

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