This article introduces how to make your WordPress site PWA compatible using the Super Progressive Web Apps plugin.

Prerequisites

• WordPress 5.2.2
• Super Progressive Web Apps 2.0.2

Super Progressive Web Apps Configuration

First, install the Super Progressive Web Apps plugin.

Initial Setup for Super Progressive Web Apps

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.

PWA Operation Verification

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.

How to Fix "Manifest: Line: 1, column: 1, Unexpected token." Error

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.