Skip to main content

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.















Comments

  1. Hotel Casino Las Vegas, NV Jobs - MapYRO
    The hotel casino at 전주 출장안마 the Casino Las Vegas is located in Las Vegas, Nevada and offers 2,500 slot machines and video 제천 출장안마 poker games. 광주 출장안마 It 밀양 출장샵 has a restaurant on 서귀포 출장마사지 site,

    ReplyDelete

Post a Comment

Popular posts from this blog

Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpage speed using th

Build A Simple Sales System using Google Drive

Google Drive is a free-to-use cloud service with a 15 GB limit storage. 15 GB is large enough to store documents, and "program" too. Yes, it's correct. We can program Google Drive. This blog is a step-by-step tutorial to show you how to build a simple P.O.S. system on Google Drive. Create a Google Sheets to define the products 1. Login to Google Drive using your Gmail account and create a Google Sheets: 2. Input the products in the Google Sheets Create a Google Forms for sale input 1. Create a new Google Form 2. Edit the form and the first field Note that leave the option field unchanged. We'll assign it programmatically in below 3. Add a quantity field 4.  Add a last field for the price input How to copy data from Google Sheets to Google Forms? We need to add a script to do that. Google developed Google App Script (GAS) for us to achieve that. Now go back to the Google Sheet we just created above. Then enter to the script editor You'll see the below screen. Then