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

対応後

スポンサーリンク
Load more

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.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対応のブログカードを作る

TECH

2019.11.16

Cloudflare AMP Real URLをブログに導入する