Progressive Web App Wordpress Theme (Part 2/2)

This is the 2nd part of the blog: Progressive Web App Wordpress Theme Part 1. Last time the Progressive Web App performs in the local server properly. This part will integrate it with WordPress Theme. Test it in real WordPress server, and Android phone as well. Let’s get started.

Produce a Wordpress Basic Theme

As WordPress Theme Development document mentioned, it does require at least three basic files. I store those files in directory /wp-files were under the project root.

1. Theme Stylesheet /wp-files/style.css:

/*
Theme Name: PWAWP-Theme
Theme URI: https://wordpress.simonho.net/
Author: Simon Ho
Author URI: http://www.simonho.net
Description: Progressive Web App Wordpress Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pwawordpress
Tags: pwa, one-column
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

2. Functions File /wp-files/functions.php:

3. Theme Screenshot /wp-files/screenshot.png:

Bundle the wp-files and ZIP the distribution

I added below scripts into the package.json file:

...
"scripts": {
  ...
  "copy-wpfiles": "cp wp-files/* dist/ && cp dist/home.html dist/index.php && cp dist/home.html dist/index.html",
  "make-dist-zip": "cd dist && zip -r pwawptheme.zip * && cd  ..
}
...

Notes:

• there has a trick to make index.php & index.html just by copied and rename from home.html file
• The ZIP distribution theme file will be stored in directory dist/

Upload and activate the theme in WordPress

I login to my Wordpress server and go to the admin URL (https://wordpress.simonho.net/wp-admin):

(Notes: The server must be running HTTPS since it is one of Progressive Web App requirement)

Wordpress shows “Theme installed successfully”. I can’t wait to activate it and open the frontend immediately to see my works. Oh, it fails:

It seems the two asset files cannot be loaded. I am sure it must be there somewhere. Later I figure out those files are not in the root. It is storing in /wp-content/themes/pwawptheme/app.bundle.css instead of /app.bundle.css. Okay, I change all href paths for all source files: /src/pug/inc/layout.pug, /src/pug/inc/styles.pug, /src/pug/inc/scripts.pug and /src/registerServiceWorker.js, /src/app.js, /src/pug/inc/navigator.pug. Delete the existing WordPress theme and rebuild & re-upload the new theme. This time much better:

But it still has errors although the webpages browsing properly. I fix the errors. But then lot of errors following. I spend one day to solve all errors. The errors mostly caused by service-worker scoping problem. Finally, I try below codes to work around the SW scoping problem. Add below codes into /wp-files/functions.php:

The above piece of code solves the big problem. All errors are gone. Everything working fine:

Production Build

In Part 1 of this blog, the webpack produces debug version of bundle files (app.bundle.js & app.bundle.css). To produce production bundle, I add below script into /package.json:

...
scripts: {
  ...
  "prod": "npm run clean && webpack -p --env=prod --progress --profile --colors --config webpack.config.prod.js && npm run copy-assets && npm run copy-wpfiles && npm run make-dist-zip",
  ...

Run npm run prod for the production build. Now the file sizes of app.bundle.js & app.bundle.css are reduced from 1.2M & 144K to 159K & 112K respectively. Re-upload the theme to WordPress again. Of course, everything okay and runs faster. How fast of it?

Measure the quality of my PWA Wordpress Theme?

Google releases a Lighthouse to measure the quality of the website which meets what level for Progressive Web App standard. I install the Lighthouse Chrome Extension then measure my PWA Wordpress Theme. The report shows the score is:

Wow, nice one. What’s next?

Install the PWA in mobile phone

The final test is to install the PWA WordPress Theme on my Android phone. It runs smoothly and feels like a native app. Offline supports also no problem. The screen replay is:

Conclusion

My webapp has implemented the basic PWA features. It got very high score from Lighthouse. However, it is not perfect. It’s still missing:

1. Push Notification not implemented.
2. Tell the user when the content can’t load in offline mode.
3. Can’t debugging again in the local server since the hyperlinks are changed to /wp-content/themes/pwawptheme
4. The assets hyperlinks are hard-coded to path pwawptheme. It is not feasible for general use.

True, I should keep “Progressive” improvement on my theme. Please drop me comments if you want me to make it perfect. I maybe author part 3,4… in the future.

Final words:

• BTW, this is my first time writing blog. Hope does not put me to shame
• Celebrate to Ghost just released 1.0 in two days ago. I really love it and enjoy writing my first blog on it

The source code of this blog is here.