[WordPress] Super Progressive Web Apps プラグインで PWA 対応
Super Progressive Web Apps プラグイン で WordPress サイトを PWA 対応する方法をご紹介します。
まず、Super Progressive Web Apps プラグイン をインストールします。
https://example.com/wp-admin/admin.php?page=superpwa から設定します。
以下のスクリーンショットは、本サイトの設定内容です。Icon を設定したぐらいで他はデフォルトのままです。
Save Settings ボタンを押したら、すぐに PWA 対応が有効になります。
最後に Progressive Web App のデバッグ | Tools for Web Developers | Google Developers を参考にして Chrome DevTools から PWA の動作確認をしました。
Application タブから Manifest と Service Workers から以下のように確認できれば完了です。
もし 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 対応した、現場からお送りしました。