【PWA】シリーズPWA (2) ミニ情報バーを表示する
今回は、PWAの機能の中でもっともシンプルなミニ情報バーの表示をしたいと思います。
ミニ情報バーとは
PWAをブラウザで表示した時に画面下部に現れる、ホーム画面へのインストールを促すバナーのことです。
このバナーは正しい設定のもとPWA化されているWEBサイトであれば必ず表示されます。
下記はsuumo.jpをAndroidのChromeで表示した際のキャプチャですが、赤く網かけした部分がそれにあたります。
ちなみに、2019年2月現在この機能があるのは、 Androidの対応ブラウザのみです。iOSのブラウザは PWAには対応していても表示はされません。
ミニ情報バーを表示させるための最低限の条件は以下の通りです。
見てお分かりの通り、PWAとして成立させるための条件と重複します。すなわち、PWAになっていればこのミニ情報バーはデフォルトで表示されるのです。
エンゲージメントについて言及されている記事もありますが、2019年2月現在仕様が変わったようで、初回訪問時には必ず表示されるようです。
manifest.json
manifest.jsonについては公式リファレンスを見ながら作成でも良いですが、ジェネレータも多数存在しますので、そちらを利用してもよいでしょう。
ミニ情報バーを表示させるために必須となる項目がありますので、以下は必ずmanifest.jsonにて指定してください。
- short_name は必須
- nameは必須
- iconsは必須（192×192のpng画像であること）
- 読み込み先の start_url は必須
- displayの値は「standalone」または「fullscreen」
認証がかかっているテスト環境などでは、このmanifest.jsonをHTMLが読み込むことができずエラーとなってしまうので、その場合は下記のいずれかにて読み込めるようになります。
htaccessで認証を解除する場合
<files manifest.json> Satisfy any order allow,deny allow from all </files>
crossorigin属性を指定する場合
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
確認方法
ChromeDevToolにて、「Applicationタブ > Manifest」にて指定した値が正しく表示されているか確認できます。
「Add to home screen」というリンクをクリックすることで、PC上でもミニ情報バーに相当するバナーを表示することができます。
ただし、2019年3月よりGoogle ChromeがデスクトップPWAに対応したことで、この確認方法はなくなりました。
実際にChromeのメニューからインストールをすることができ、その際にはデスクトップやLauncherにてアイコンが表示されます。
ServiceWorkerの登録
ServiceWorkerを登録するためのJSと、ServiceWorker本体となるJSを用意します。
ファイル名はもちろん任意ですが、ここでは前者をregisterServiceWorker.js、後者をserviceworker.jsとします。
HTML側で読み込みが必要なのは前者のみです。以下にその内容を記します。
if ('serviceWorker' in navigator) {
// ServiceWorkerを登録
navigator.serviceWorker.register('serviceworker.js', {
scope: './',
}).then(function(registration) {
// 登録成功時
console.log('登録成功です');
}).catch(function(error) {
// 登録失敗時
console.log('登録できませんでした');
console.log(error)
});
}
ChromeDevToolにて、「Applicationタブ > Service Workers」の内容をみて、正しく登録されているか確認しましょう。
基本的にはこれだけで表示されることになっているのですが、実際に確認するとエラーが表示されてしまいインストールはおろか表示もできませんでした。
そのため、serviceworker.jsに以下を記述します。
self.addEventListener('fetch', function(event) {});
詳細はこちらを参照ください。
基本的には以上でWebAppBannerを表示することができるようになります。
ミニ情報バー対応状況の判定
Android版PWAは対応していますが、2019年2月現在、iOS版PWAは対応していません。
Google公式によると、対応ブラウザにはWeb App Bannerが表示される時に発行される「beforeinstallprompt」イベントと、バナーを表示する「installPromptEvent.prompt」メソッドがAPIとして用意されているようです。
そのAPIの有無を利用することで、Web App Bannerへの対応状況を判定することができます。
しばしばタッチデバイスを判定する方法と同様に、以下の条件で判定します。
"onbeforeinstallprompt" in window
対応している場合は「true」、対応していない場合は「false」が返ってきます。
こちらをもとに、ServiceWorkerの対応とWeb App Bannerの対応を組み合わせることができます。
if ('serviceWorker' in navigator) {
// ServiceWorkerを登録
navigator.serviceWorker.register('serviceworker.js', {
scope: './',
}).then(function(registration) {
// 登録成功時
console.log('ServiceWorker登録成功です');
if ('onbeforeinstallprompt' in window) {
// Web App Banner対応
console.log('Web App Banner に対応しています');
} else {
// Web App Banner未対応
console.log('Web App Banner 未対応');
}
}).catch(function(error) {
// 登録失敗時
console.log('ServiceWorker登録失敗です');
//console.log(error);
});
} else {
console.log('ServiceWorker 未対応です')l
}
