lighthouse pwa の 警告 の対処をする


この Blog を pwa 対応 してみようと思いまして、現在 manifest.json を作成しています。
manifest.json は以下の webpack plugin を使用して生成しています。
danethurber/webpack-manifest-plugin: webpack plugin for generating asset manifests

一通り、webpack.config.js を書き上げて、サーバー上に、UP した後、lighthouse で 監査を実行したところ、以下 pwa 関連の警告が出力されました。

  • Contains Some Content When JavaScript Is Not Available

  • Does not redirect HTTP traffic to HTTPS

  • Does not respond with a 200 when offline

  • Page load is not fast enough on 3G

  • User will not be prompted to Install the Web App

  • Address bar does not match brand colors

上記、対処できるものできないものありました。対処方法について記載します。


参考


対処方法

Contains Some Content When JavaScript Is Not Available

JavaScript が無効の場合に、画面に何も表示されないことへの警告になります。
SPA サイトの場合出力される可能性が高いと思います。
html に 以下の noscript タグを追加し対処しました。

<noscript>
    <div id='noscript_warning'>当サイトを閲覧する場合は、JavaScript を有効化してください。</div>
</noscript>

Does not respond with a 200 when offline

Offline の場合、HTTP のレスポンスコード が 200で返却されないという警告です。
確かに Offline にすると 「ページが見つかりません」になります。
作り上すぐに対処するのは難しいので放置します。

Page load is not fast enough on 3G

3G回線の場合、遅いという警告になります。
広告を外すと多少早くなるかもしれませんが、これもすぐに対処できるものではないので、一旦放置します。

User will not be prompted to Install the Web App

ユーザーにWebアプリケーションのインストールを求めるメッセージが表示されないという警告です。
manifest.jsonの内容がホームへインストールの表示要件を満たしていないということです。

  • start_url の記載を変更する。
    start_url を以下のように記載をしていました。

    start_url: "https://www.monotalk.xyz/?utm_source=homescreen",
    
    この記載の クエリストリングがよくないと考え、以下の記載に変更しました。
    start_url: "https://www.monotalk.xyz/",
    
    再度、監査を実行してみましたが、特に警告の内容に変化はありませんでした。

  • start_url を動的Cache に追加する。
    start_url がオフライン時の Cache として設定されていないのが原因と考え、ドメイン直下を動的 Cache として追加してみました。
    Cache には、Workbox  |  Tools for Web Developers  |  Google Developers を使用しており、以下の記載を追加しました。

    workboxSW.router.registerRoute(/\/$|\/\?utm_source.+$|\/?page=.+$/, workboxSW.strategies.networkFirst({
        "cacheName": "root",
        "cacheExpiration": {
            "maxAgeSeconds": 60 * 60 * 24 * 10, "maxEntries": 1
        }
    }), "GET");
    
    監査を実行したところ、警告が消え、Does not respond with a 200 when offline も芋づる式に出力されなくなりました。

Address bar does not match brand colors

アドレスバーの色が、manifest.json で指定しているテーマカラーとマッチしていないという警告です。
これは、HTML 側に、meta タグ theme-color を付与することで対応できます。
manifest.json で指定している theme_color は、"#808080" なので、theme-color も同様の色を設定しました。

<meta name="theme-color" content="#808080"/>
再度監査を実行したところ、警告が非表示になりました。

manifest.json のみの記載で、lighthouse の pwa 警告は全て対処できると思っていたのですが、service-worker も一部実装しないと全ての警告には対処できないようです。
以上です。

コメント