Super Progressive Web Apps プラグイン で WordPress サイトを PWA 対応する方法をご紹介します。

前提条件

• WordPress 5.2.2
• Super Progressive Web Apps 2.0.2

Super Progressive Web Apps の設定

まず、Super Progressive Web Apps プラグイン をインストールします。

Super Progressive Web Apps の初期設定

https://example.com/wp-admin/admin.php?page=superpwa から設定します。

以下のスクリーンショットは、本サイトの設定内容です。Icon を設定したぐらいで他はデフォルトのままです。

Save Settings ボタンを押したら、すぐに PWA 対応が有効になります。

PWA の動作確認

最後に Progressive Web App のデバッグ  |  Tools for Web Developers  |  Google Developers を参考にして Chrome DevTools から PWA の動作確認をしました。

Application タブから Manifest と Service Workers から以下のように確認できれば完了です。

Manifest: Line: 1, column: 1, Unexpected token. エラーの解決方法

もし Chrome DevTools の Console に下記のようなエラーが出ていたら、https://your.example.com/superpwa-manifest.json にアクセスできないのが原因かもしれません。

Manifest: Line: 1, column: 1, Unexpected token.      superpwa-manifest.json:1

本サイトの場合、Nginx に以下のような記述をしていたので、

    location ~ \\.(css|js)$ {
        charset  UTF-8;
        access_log off;
        expires 7d;
    }

これを、以下のような感じで修正して、

$ diff your.example.com.conf-old your.example.com.conf
104c104
<     location ~ \\.(css|js)$ {
---
>     location ~ \\.(css|js|json)$ {

.json ファイルへの access を許可して対応完了しました。

    location ~ \\.(css|js|json)$ {
        charset  UTF-8;
        access_log off;
        expires 7d;
    }

以上、Super Progressive Web Apps プラグインで WordPress サイトをサクッと PWA 対応した、現場からお送りしました。