このブログでは、HugoでFull AMPなHTMLを生成し、GitHub Pagesでホストしています。 AMPの最適化を行う際、Lighthouseを利用してWebパフォーマンスを測定しているのですが、PWA Readyになっていないことが気掛かりでした。

個人ブログをPWA化しても自分しか使わないため、自己満足に他なりません。 しかし、PWAがグリーンにならないのは気持ちが悪いため、今回エラーを見直してPWAを有効にしました。

対応前

既にService Workerは導入しているため、単純に設定漏れによるエラーを解消していきます。 エラーは次の3つでした。

• start_url does not respond with a 200 when offlineTimed out waiting for start_url ( https://www.meganii.com/ ) to respond
• Web app manifest does not meet the installability requirements
• Manifest doesn’t have a maskable icon

start_url does not respond with a 200 when offlineTimed out waiting for start_url ( https://www.meganii.com/ ) to respond.

オフライン時、start_urlに指定したURLから200のレスポンスコードが返ってこないというエラーです。 次の対応をしました。

• offline.htmlを用意する
• ServiceWorkerの初期化パラメタに、オフラインページの設定を追加

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
  offlinePageOptions: {
    url: '/offline.html',
    assets: [],
  },
}); 

• Add offline #14
• start_url does not respond with a 200 when offline

Web app manifest does not meet the installability requirements

マニュフェストファイル（manifest.json）のdisplayの値は、minimal-ui | fullscreen | standaloneのいずれかを指定しないければならないようです。 現時点では、browserを指定していたため、standaloneに変更しました。

Web app manifest does not meet the installability requirements

Manifest doesn’t have a maskable icon

下記の通り、各iconサイズ毎に"purpose": "any maskable"を追加しました。

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
  …
}

Manifest doesn’t have a maskable icon

対応後