[WordPress] Super Progressive Web Apps プラグインで PWA 対応

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

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

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

Super Progressive Web Apps Settings

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

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

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

Application - Manifest| Chrome DevTools

Application - Service Workers | Chrome DevTools

もし 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 対応した、現場からお送りしました。

CodeNote