/ progressive web app

Progressive Web App WordPress Theme (Part 2/2)

The Story

This is the 2nd part of the blog: Progressive Web App Wordpress Theme Part 1. Last time the Progressive Web App performs in 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 where under 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.
*/
  1. Functions File /wp-files/functions.php:
<?php
/**
 * Requires WordPress 4.7 or later since REST V2 API started from 4.7.
 */
if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
	require get_template_directory() . 'back-compat.php';
	return;
}

/**
 * Enqueue scripts and styles.
 */
function scripts_setup() {
	$template = get_template_directory_uri();
	wp_enqueue_style('app', $template.'/app.bundle.css', false, null);
	wp_enqueue_script('app', $template.'/app.bundle.js', false, null);
}
add_action('wp_enqueue_scripts', 'scripts_setup');
  1. Theme Screenshot /wp-files/screenshot.png:
    (I simply capture the webpage and resize it to 1200x900px)

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:

  1. there has a trick to make index.php & index.html just by copied and rename from home.html file
  2. 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 admin URL (https://wordpress.simonho.net/wp-admin):
wpadmin1
(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:
fail1
It seems the two asset files cannot be loaded. I am sure it must be there in somewhere. Later I figure out those files are not in the root. It is storing in /wp-content/themes/pwawptheme/app.bundle.css rather than /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:
fail2
But it still have 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:

...
add_action('pre_get_posts', function($query) {
  global $wp;
  if (!is_admin() && $query->is_main_query()) {
    $template = get_template_directory_uri();
    if ($wp->request == 'service-worker-js') {
      header('Content-Type: application/javascript');
      readfile($template.'/service-worker.js');
      exit;
    }
  }
});

Above piece of codes solve 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 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:
Lighthouse_Report

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 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 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 used.

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 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 codes of this blog is here.