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

2020年06月01日

先日リリースされた 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 のチェックも通ります。