knowledge base

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

【PWA】ミニ情報バーを表示する

まず、PWAについての概要については後ほど記事にしてゆきたいと思います。

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

ミニ情報バーとは

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

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

下記はPWA対応しているサイトの実例としてよく挙げられるsuumo.jp(SP実機表示)のものです。赤く網かけした部分がそれにあたります。

 

f:id:ShinImae:20190217002024p:plain

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

medium.com

Web App Bannerを表示させるための最低限の条件は(PWAとして成立させるための条件と若干重複しますが)以下の通り。

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

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

www.suzukikenichi.com

manifest.json

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

Web App Bannerを表示させるために必須となる項目がありますので、以下は必ず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上でもWeb App Bannerに相当するバナーを表示することができます。

ServiceWorkerの登録

ServiceWorkerを登録するためのJSと、ServiceWorker本体となるJSを用意します。

ファイル名はもちろん任意ですが、ここでは前者をregisterServiceWorker.js、後者をserviceworker.jsとします。

HTML側で読み込みが必要なのは前者のみです(ただし後者も記述のない空のファイルですが用意はしなければいけません)。

Web App Bannerの表示にはまずServiceWorkerの登録のみで大丈夫です。原則は専用となるAPIの記述は必要ありません。

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
}