この 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

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

参考

対処方法 2018年2月

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 も一部実装しないと全ての警告には対処できないようです。

追記 2019年5月

上記の対応後に Workbox のVersion と lighthouse の Version が上がり、警告の内容も変わっています。
変更点として気になった部分について記載します。

start_url には相対 URL を記載する。

Web App Manifest | MDN に記載があります。

The URL that loads when a user launches the application (e.g. when added to home screen), typically the index. Note that this has to be a relative URL, relative to the manifest url.

start_url は マニフェストの URL からの相対 URL である必要があります。
以前は、絶対パスで記載があった気がするので、example が何処かのタイミングで変更されたように思います。

Current page responds with a 200 when offline、start_url responds with a 200 when offline について

前回の確認時に動作したと思っていた実装では Cache が効かない状態になっており、Cache の実装部を以下のように修正しました。
Workbox の Version は v2 から v4 に上がっています。
正規表現の記述は Workbox Routing  |  Workbox  |  Google Developers を参考にしました。

workbox.routing.registerRoute(new RegExp('(/$|/\?utm_source.+$)'), workbox.strategies.networkFirst({
    cacheName: 'root',
    plugins: [
        new workbox.expiration.Plugin({
          maxAgeSeconds: 60 * 60 * 24 * 10,
          maxEntries: 10,
        }),
    ],
}), 'GET');

workbox.routing.registerRoute(new RegExp('/\?page=.+$'), workbox.strategies.networkFirst({
    cacheName: 'pages',
    plugins: [
        new workbox.expiration.Plugin({
          maxAgeSeconds: 60 * 60 * 24 * 10,
          maxEntries: 10,
        }),
    ],
}), 'GET');

new RegExp('/\?page=.+$') を new RegExp('^/\?page=.+$') と記載していて一向に動きませんでした。

参考

以下、トラブル発生時に確認した記事になります。

以上です。

コメント

カテゴリー

最近の投稿