Progressive Web Apps for eCommerce with Vue Storefront
Big updates go in Web Application Word! eCommerce will change in 2018 with the entry into the market of Progressive Web Apps (PWA), which are actively advertised by Google.
In this article, we will explain why business should invest in the development of PWA for its stores and what benefits they will receive.
What is PWA?
To put it simply, eCommerce Progressive web apps is a combination of web pages and native mobile apps. In this case, you do not need to install the application. It is enough to go to URL, as on a regular site, and the browser will save the user interface of the website into browser cache.
Then, with the following downloads, the user will open the PWA instantly, and only dynamic data will be synchronized with the server. The user can save your site on the home screen, and open it through the shortcut.
Progressive web app for Magento can be separate frontend app, so you could setup when you want to show this app and on what devices.
More academic definition of PWA you can find at Google page:
Why eCommerce should start building apps with PWA. What are the main benefits
Okay, let’s see why the business is paying for the development of PWA applications.
We believe that Progressive Web Apps will be one of the top solutions for increasing user experience, mobile traffic and reducing bounce rate. Mobile traffic continues to grow, and in order for your site to work on mobile devices qualitatively and quickly – you need to implement PWA.
Also, a big plus is that PWA will help you increase the SEO ranking for your website on Google.
Quotes from the directors of the popular engine for eCommerce – Magento:
Comment from Peter Sheldon in 2017 (Vice President of Strategy, Magento Commerce)
“As 2017 draws to a close, we encourage commerce leaders to make sure that Progressive Web Apps are on your 2018 Magento roadmap and start planning for a migration from your current Responsive site to Progressive Web Apps next year.”
Mark Lavelle, CEO of Magento, stated
“We see PWAs as a natural evolution of the mobile web, and by working with industry leaders such as Google to develop PWAs, we plan to keep merchants ahead of the curve.”
Let’s look at real cases.
AliExpress increases conversion rate for new users by 104% with new Progressive Web App
- 104% of new users across all browsers
- 82% increase in iOS conversion rate
- 2X more pages visited per session per user across all browsers
- 74% increase in time spent per session
One of the largest online destinations for classified ads in India, OLX provides communities in high-growth markets with vibrant online marketplaces. They connect local people so they can buy, sell, or exchange used goods and services, making it fast and easy for anyone to post a listing on the web.
OLX boosts re-engagement on the mobile web by 250% with a Progressive Web App
- 23% less time until the page is interactive
- 80% lower bounce rates
- 146% higher CTR on Ads
- 250% more re-engagement
Jumia, a leading e-commerce website in Africa, showcased their eCommerce Progressive Web App (PWA) journey in 2016, outlining how they delivered an app-like experience to users through modern web capabilities. PWA has since proved to be far more than a buzzword—it’s now the de facto way Jumia builds for mobile devices. They’ve integrated Progressive web apps across many of their operations, including Jumia Travel. Jumia sees 33% increase in conversion rate, 12X more users on PWA.
- 33% higher conversion rate
- 50% lower bounce rate
- 12X more users versus native apps (Android & IOS)
- 5X less data used
- 2X less data to complete the first transaction
- 25X less device storage required
Many another Case Studies with PWA you read here:
How to create PWA for your website. Which technology to use.
Let’s look at the practical question of how online stores can quickly implement Magento Progressive web apps for their business.
- Use a ready-made technology stack that will be “attached” to the backend of your website using the API
The MageDirect team offers you a second option.
Vue Storefront – headless PWA for eCommerce
Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg., Magento, Pimcore, Prestashop or Shopware) through the API.
Vue Storefront was created by Divante Ltd and currently supported with the help of a growing community. It’s open source application under MIT License. With these solutions, it was already created a live website that works pretty well.
More information you can find here: https://www.vuestorefront.io
How it works
Vue Storefront was built as an all-in-one front-end for eCommerce. This application consists of the following popular libraries:
- vue.js as a front-end library
- Node.js + Express as a server-API
- Elastic Search as a database of products and full PWA/offline support
Then you connected the Vue Storefront with the eCommerce Platform and synchronized the data.
The product, category, etc. migrate to the NoSql database on the side of the Vue Storefront.
At the moment there is an excellent plug-in for the eCommerce platform – Magento.
More technical details you can read here:
So the next main benefits you could get it from this solution:
- you make one application for the frontend and next time if you want to change the backend – you do not need to migrate the theme
- the application is convenient for scaling, you can store the front on a separate server
- more traffic to your site, an extremely fast website and as a consequence more conversion
MageDirect offers development of PWA with Vue Storefront. So if you want to convert your amazing ideas in modern Progressive Web Apps – just let us now.
More details about our solution for Magento: