1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Progressive Web Appを有効にする

Progressive Web Appを有効にする

更新日:2020.08.29 作成日:2020.08.15

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

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

対応前

Progressive Web Appを有効にする

既に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: [],
  },
}); 

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

対応後

スポンサーリンク

Related contents

TECH

2020.09.27

AMP OptimizerによるAMPのさらなる最適化

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

TECH

2020.11.01

HugoでTailwindCSSを利用しAMP Validなページを生成する

TECH

2020.04.10

Blog KPI Collector(GAS)で各種KPIを自動取得する

TECH

2020.03.31

小さな習慣・アウトプット駆動生活〜ブログメンタリングのふりかえり〜

TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する

TECH

2020.02.02

HugoでAMP対応のブログカードを作る