knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

【PWA】シリーズPWA (2) ミニ情報バーを表示する

今回は、PWAの機能の中でもっともシンプルなミニ情報バーの表示をしたいと思います。

ミニ情報バーとは

PWAをブラウザで表示した時に画面下部に現れる、ホーム画面へのインストールを促すバナーのことです。

このバナーは正しい設定のもとPWA化されているWEBサイトであれば必ず表示されます。

下記はsuumo.jpをAndroidChromeで表示した際のキャプチャですが、赤く網かけした部分がそれにあたります。

 

f:id:ShinImae:20190217002024p:plain

ちなみに、2019年2月現在この機能があるのは、 Androidの対応ブラウザのみです。iOSのブラウザは PWAには対応していても表示はされません。

medium.com

ミニ情報バーを表示させるための最低限の条件は以下の通りです。

見てお分かりの通り、PWAとして成立させるための条件と重複します。すなわち、PWAになっていればこのミニ情報バーはデフォルトで表示されるのです。

  1. manifest.jsonを読み込んでいること
  2. サイトがSSL対応していること
  3. サイトにServiceWorkerが登録されていること

エンゲージメントについて言及されている記事もありますが、2019年2月現在仕様が変わったようで、初回訪問時には必ず表示されるようです。

www.suzukikenichi.com

manifest.json

manifest.jsonについては公式リファレンスを見ながら作成でも良いですが、ジェネレータも多数存在しますので、そちらを利用してもよいでしょう。

ミニ情報バーを表示させるために必須となる項目がありますので、以下は必ずmanifest.jsonにて指定してください。

  • short_name は必須
  • nameは必須
  • iconsは必須(192×192のpng画像であること)
  • 読み込み先の start_url は必須
  • displayの値は「standalone」または「fullscreen」

認証がかかっているテスト環境などでは、このmanifest.jsonをHTMLが読み込むことができずエラーとなってしまうので、その場合は下記のいずれかにて読み込めるようになります。

  • .htaccessでmanifest.jsonのみ認証を解除する
  • manifest.jsonを読み込んでいるmeta要素に「crossorigin="use-credentials"」を指定

htaccessで認証を解除する場合

<files manifest.json>
Satisfy any
order allow,deny
allow from all
</files>

crossorigin属性を指定する場合

<link rel="manifest" href="manifest.json" crossorigin="use-credentials">

github.com

確認方法

ChromeDevToolにて、「Applicationタブ > Manifest」にて指定した値が正しく表示されているか確認できます。

f:id:ShinImae:20190217002014p:plain

「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」の内容をみて、正しく登録されているか確認しましょう。

f:id:ShinImae:20190217002020p:plain

基本的にはこれだけで表示されることになっているのですが、実際に確認するとエラーが表示されてしまいインストールはおろか表示もできませんでした。

そのため、serviceworker.jsに以下を記述します。

self.addEventListener('fetch', function(event) {});

詳細はこちらを参照ください。

pawafuru.com

基本的には以上でWebAppBannerを表示することができるようになります。

ミニ情報バー対応状況の判定

Android版PWAは対応していますが、2019年2月現在、iOS版PWAは対応していません。

Google公式によると、対応ブラウザにはWeb App Bannerが表示される時に発行される「beforeinstallprompt」イベントと、バナーを表示する「installPromptEvent.prompt」メソッドがAPIとして用意されているようです。

developer.mozilla.org

その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
}