EBISUCOM エビスコム
  1. 著者NOTE

Lighthouse 6 で追加されたPWAの要件にGatsbyJSで対応する

先日リリースされた Google の Lighthouse 6 では、チェック項目の追加や変更が行われました。機能拡張などにはまだ反映されていませんが、下記のサイトでテストできます。

Lighthouse Metrics
https://lighthouse-metrics.com/

GatsbyJS で作成した『Webサイト高速化のための 静的サイトジェネレーター活用入門』の サンプル(https://gatsby-essentials.netlify.app/) を Lighthouse 6 でテストしてみると、パフォーマンスなどの項目は「Audits passed(合格)」と表示されますが、「PWA」に関しては合格できなかった項目が表示されます。

これは「Maskable icon(マスカブルアイコン)」の用意を求めるもので、Lighthouse 6で追加された新しい要件です。

Maskable iconとは

PWAのマニフェストファイルでアイコンが「maskable」であることを明示すると、対応したデバイスではアイコンの内側(セーフゾーン)を残し、切り出した形で使用されます。
一方、「maskable」と明示していない場合、アイコンのまわりにホワイトスペースが追加された形で使用されます。

セーフゾーンについてはW3Cの「Web App Manifest」で規定されています。Maskable​.app Editor を利用すると、セーフゾーンで切り出したアイコンがどのように表示されるかを確認することも可能です。

GatsbyJSでの設定

GatsbyJS で PWA のアイコンが「maskable」であることを明示するためには、gatsby-config.js の gatsby-plugin-manifest の options に、次のように「icon_options」を追加して purpose を「maskable」と指定します。

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        …
        icon: `src/images/icon-maskable.png`,
        icon_options: {
          purpose: `maskable`,
        },
      },
    },

これで、マニフェストファイル(manifest.webmanifest)のアイコンの設定に「”purpose”: “maskable”」が追加されます。Lighthouse 6 の PWA のチェックも通ります。

なお、iconで指定するアイコン画像は「maskable」でなかったもの(icon.png)から「maskable」なもの(icon-maskable.png)に変更しています。

Webサイト高速化のための 静的サイトジェネレーター活用入門

2020年6月 マイナビ出版刊
B5変型 320ページ / 978-4839973001

HTML&CSS コーディング・プラクティスブック

デザインカンプと指示書に従い、
Webページをコーディングしてみる実践シリーズです。