Progressive Web App for WordPress & WooCommerce with ReactJS

Progressive Web App for WordPress & WooCommerce with ReactJS

If you’ve followed the conversations in the WordPress community lately, you’ve realized that JavaScript is here to stay, either we’re talking about ReactJS, Angular/Ionic, VueJS or Polymer. In addition, if we combine it with the energy that Google is investing in advocating Progressive Web Applications, it really seems like the Web is entering a new and exciting development phase.

A few months back we announced that we’re building our first e-commerce Progressive Web Application by integrating with WordPress & WooCommerce REST API. Our CTO and main contributor for WordPress Mobile Pack, Alexandra Anghel, presented our progress at Bucharest WordCamp last week in front of an audience of 250 WordPress enthusiasts and we’re now excited to release the alpha version of our first PWA-Commerce theme.

Why did we build it?

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions. There are several examples of companies that have successfully used PWAs to improve their metrics, you can find some of them on the Google Developers website. Here are just 2 examples:

  • Alibaba.com built a PWA that led to a fast, effective, and reliable mobile web experience. The new strategy delivered a 76% increase in total conversions across browsers and 4 times higher interaction rate from Add to Homescreen.
  • In another use case, OLX wanted to re-engage mobile web users by using Add to Homescreen and Push Notifications. They increased engagement by 250% and improved other metrics too: the time until the page became interactive fell by 23%, with a corresponding 80% drop in bounce rates. Monetization also improved, with clickthrough rate (CTR) rising 146%.

Since eCommerce is one of the main areas where a PWA can bring immediate benefits, the WooCommerce Progressive Web App theme that we’re releasing is set to bring a new level of excitement for your users and increase your business bottom line.

Here are some of the capabilities that we’ve implemented for you:

  • Products & Categories Navigation
  • Minimalist Product Section
  • Product Photo Gallery
  • Product Ratings & Reviews
  • Flexible Shopping Cart
  • Social Sharing (Facebook, Twitter, G+)

You can give it a try here: http://bit.ly/pwacommerce (use an Android/iOS device)

What’s the PWA score on LightHouse?

First of all, being progressive is a score, not a Yes or No, and there’s a Chrome plugin called Lighthouse that you can use to measure this score. Lighthouse generates a report with all the PWA capabilities, basically, it lets us know what we need to change for a web app to become progressive. For our alpha version of the WooCommerce PWA, we managed to hit a 91 score on Lighthouse.

What’s next?

As you’ve probably realized from the list of features that I listed earlier, PWAs are framework agnostic. Many are built using Angular JS or React Js, which are the most popular JavaScript frameworks at the moment. Both AngularJS and React have their advantages:

  • The Angular / Ionic combination is pretty popular nowadays. Ionic is a great framework that was originally built for mobile apps, but has expanded to PWAs and even desktop applications.
  • ReactJs is really intuitive and easy to understand. It benefits from a great boilerplate, create-react-app, which comes with PWA support by default.
  • Besides these 2, VueJS is also gaining in popularity.

Since all of our PWA themes we’ve prepared for bloggers, newspapers & magazines have been built using Angular/Ionic, it was time to give ReactJS a try. Hence, the WooCommerce PWA is built with ReactJS and you can check out the video below if you want to go deeper into the technical aspects of building a ReactJS application.

 

This is just the alpha release and we’re already working on the beta version. Here’s just a part of our roadmap:

  • Add offline mode capabilities
  • Add push notifications
  • Finalizing the checkout process

You can still order the WooCommerce PWA for just $49 for a few more weeks and benefit from frequent updates whenever we have a new release. Getting to a stable version is hard work and requires many development hours, that’s why by pre-ordering the $49 version you’ll not only get a discounted deal (from the $99 regular price) but you’ll also support us in implementing new features & capabilities.

Want to get involved in contributing to the PWA-Commerce development? Check out our GitHub repository: https://github.com/appticles/pwa-theme-woocommerce

Enjoy!

Tech-Biz in between guy. CEO at WPMobilePack.com. Organizer at BucharestJS & JSHacks. Passionate about entrepreneurship. Love to play 🎾, squash and 🏓.

Leave a Reply