[WordPress] Make Your Site PWA Compatible with Super Progressive Web Apps Plugin
This article introduces how to make your WordPress site PWA compatible using the Super Progressive Web Apps plugin.
First, install the Super Progressive Web Apps plugin.
Configure from https://example.com/wp-admin/admin.php?page=superpwa.
The following screenshots show this site’s configuration. I only set the Icon and left everything else as default.
After pressing the Save Settings button, PWA compatibility is immediately enabled.
Finally, I verified PWA operation from Chrome DevTools, referencing Debug Progressive Web Apps | Tools for Web Developers | Google Developers.
If you can confirm from the Application tab’s Manifest and Service Workers as shown below, you’re done.
If you see the following error in Chrome DevTools Console, it might be because https://your.example.com/superpwa-manifest.json is not accessible.
Manifest: Line: 1, column: 1, Unexpected token. superpwa-manifest.json:1
In this site’s case, Nginx had the following configuration:
location ~ \\.(css|js)$ {
charset UTF-8;
access_log off;
expires 7d;
}
I fixed this as follows:
$ diff your.example.com.conf-old your.example.com.conf
104c104
< location ~ \\.(css|js)$ {
---
> location ~ \\.(css|js|json)$ {
I allowed access to .json files and completed the fix:
location ~ \\.(css|js|json)$ {
charset UTF-8;
access_log off;
expires 7d;
}
That’s all from the Gemba on quickly making a WordPress site PWA compatible with the Super Progressive Web Apps plugin.