Simon Ho | Software Developer Blog

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.

After I read two articles: Progressive Web Apps Are The Next Big Thing and More Surprising Statistics About WordPress Usage . I decided to build a Wordpress theme which integrated Progressive Web Apps (PWA) to see how cool it is when two “Big Thing” mix together. TL;DR To avoid Too Long; Didn’t Read. I break the whole procedure into two blogs. In part 1, I will build a Progressive Web App in the local server. What PWA features to be built here? According to PWA wiki , the PWA will be progressive enhancements. The final webapp will be: Responsive design: I choose Bootstrap 4 because it’s mobile-first design. Contents retrieve from Wordpress CMS via REST API . It’s a natural way the App is developed in Javascript. Offline support: The PWA still can run and display the contents when no Internet connection. Installable on Android home screen: I w