Lighthouseのバージョンが6.3.0に変わってしばらく経ちました。

基準はどんどん厳しくなっているように感じない？

PageSpeed Insightsでも常に高速化を意識して改善に取り組んでいないと、ハイスコアキープは難しいです。

などと言っておきながらですが、Lighthouse6.3.0で満点のスコアを取れましたヾ(≧▽≦)ﾉ

満点のスコアを取るには、表示速度高速化以外にもアクセシビリティやSEOなどに加えて、PWAの合格も必須です。

その他はばっちりなんだけど、PWAだけがうまくいかないなんて人もいるのでは？

以前のわたしもそうだったんだけどね(*´ω`*)

ということで、今回はPWAで合格するための軌跡をメモします☆

WordPressのPWA化プラグインといえば？

目次へ戻る

過去には以下のような記事を書きました。

WordPressをとっても簡単にPWA化するプラグイン4選

一番おすすめだった「Super Progressive Web Apps」なんだけど、現在のLighthouseでは警告が出るようになっちゃったんだよね。

だから違うのでエラー出ないプラグインはないかな～と探したんだけど、見つかりませんでした(´；ω；`)ｳｩｩ

いずれのプラグインも何らかのエラーが出ちゃって、わたしが調べた限りではプラグインの有効化で一発OK！っていうのはなさそうです。

そんな中たどり着いたのが、「PWA」というプラグインを使う方法です。

PWA

このプラグイン、有効化するだけでPWA化することはできるものの、設定メニューが無くて使いやすい反面、かゆいところに手が届かないものと思っていましたが。。。

なんとフィルターフック　web_app_manifest　が使えるようで、PHPをいじれる人ならめちゃめちゃ汎用性がありました♪

Lighthouseで指摘される項目

目次へ戻る

PWAプラグインを有効化しただけだと、以下の警告が出ます。

  • Web app manifest does not meet the installability requirementsFailures: Manifest does not have short_name.
  • Manifest doesn’t have a maskable icon

要するに、マニュフェストに「short_name」と「maskable icon」がありませんよってことです。

原因は分かったので、あとはフィルターフックでこの2つを追加すれば大丈夫！

マニュフェストの確認方法

目次へ戻る

マニュフェストを修正する前に、その確認方法について。

まずhtmlソースを見てみます。

すると以下のようなメタタグが出力されているはず。

<link rel="manifest" href="https://yws.tokyo/wp-json/wp/v2/web-app-manifest">

このURLにアクセスするとマニュフェストが確認できます。

{"name":"\u3088\u3063\u3057\uff5e\u305a\u30a6\u30a7\u30d6\u30b5\u30fc\u30d3\u30b9\u3010Yws\u3011","start_url":"https:\/\/yws.tokyo\/","display":"minimal-ui","dir":"ltr","lang":"ja","background_color":"#fff","theme_color":"#fff","description":"Yossy's web service\u3068\u3044\u3046\u5c4b\u53f7\u3067WordPress\u306e\u8a2d\u7f6e\u4ee3\u884c\u3084\u753b\u50cf\u4f5c\u6210\u306a\u3069\u683c\u5b89\u3067\u627f\u308a\u307e\u3059\u3002\u30c6\u30fc\u30de\u306e\u8ca9\u58f2\u3082\u3057\u3066\u3044\u307e\u3059\u3002\u3054\u76f8\u8ac7\u306f\u304a\u6c17\u8efd\u306b\u0669(\u02ca\u15dc\u02cb*)\u0648","icons":[{"src":"https:\/\/yws.tokyo\/wp-content\/uploads\/2020\/02\/bnplogo.png","sizes":"192x192","type":"image\/png"},{"src":"https:\/\/yws.tokyo\/wp-content\/uploads\/2020\/02\/bnplogo.png","sizes":"512x512","type":"image\/png"}]}

見てみると、確かに「short_name」と「maskable icon」も記述がないね。

①「short_name」を追加する

目次へ戻る

まずは「short_name」を追加してみよう。

方法は以下のディスカッションが参考になります。

https://wordpress.org/support/topic/second-word-doesnt-show/#post-11684864

わたしのブログの場合だと以下のような感じになります。

function get_manifest_update( $manifest ) {
	$manifest['short_name'] = 'YWS';
	return $manifest;
}
add_filter( 'web_app_manifest', 'get_manifest_update' );

②「maskable icon」を追加する

目次へ戻る

次に「maskable icon」です。

Lighthouseからリンクされてるドキュメントは以下。

https://web.dev/maskable-icon-audit/?utm_source=lighthouse&utm_medium=lr

これによると、”icons”　に　”purpose”: “any maskable”　を追加すればいい模様。

これをフィルターフックで追加しています。

short_name の時はそもそもマニュフェストに項目がなかったので追加するだけで良かったのですが、icon はすでにマニュフェストに項目があります。

しかも階層付きで（汗

さてどうしたものかと思いましたが、、、

そのまんま配列で上書きすればOKでした。

以下のような感じです。

function get_manifest_update( $manifest ) {
	$manifest['short_name'] = 'YWS';
	$manifest['icons'] = array(
		array(
			'src' => 'https://yws.tokyo/wp-content/uploads/2020/02/bnplogo.png',
			'sizes' => '192x192',
			'type' => 'image/png',
			'purpose' => 'any maskable'
		),
		array(
			'src' => 'https://yws.tokyo/wp-content/uploads/2020/02/bnplogo.png',
			'sizes' => '512x512',
			'type' => 'image/png'
		)
	);
	return $manifest;
}
add_filter( 'web_app_manifest', 'get_manifest_update' );

icons には2つ画像がありましたが、192×192 の方（小さい方）に　’purpose’ => ‘any maskable’　を追加してみてください。

これでLighthouseのPWA審査に合格だー( *´艸｀)

あとがき

目次へ戻る

WordPress.orgにPWAのプラグインはいくつか登録されていますが、今後はこの「PWA」一本でいこうと思う。

プラグイン名もうちょっと分かりやすくならないかな（ﾌﾞﾂﾌﾞﾂ

このフィルターフックを使えば、今後仕様変更があったとしても、サクっと対応できるだろうからね。

それにしても、マイナポイント。

めんどくさ過ぎて登録する気になれない(;´･ω･)