it’s becoming clear that Progressive Web Apps are going to impact on how users interact with e-commerce sites and how we build them. Magento recently predicted that headless commerce will be the future for both B2C and B2B businesses.
Fortunately, new PWA solutions are arriving to the Magento ecosystem, a new frontend stack is emerging and e-commerce sites are about to become a whole lot faster.
In this post we’ll give you answers to some of your questions around PWAs and Magento, including a look at the new PWA Studio to be released in Magento v2.3 later this year.
What are PWAs?
There are many different features which can be included in a PWA, but to sum it up they provide…
They achieve this by utilising the latest web capabilities to deliver native app-like experiences, effectively removing the need for many organisations to invest in both a web app and native phone apps.
Why PWAs?
In addition to lightning fast load times, consistent and engaging user experiences, PWAs also come with…
“the reach of the web with native app capabilities”
Native phone apps have much higher conversion rates over web apps, but with much less usage. How often do you download new apps to your phone? Compared to how often you visit websites. It’s much less. So while Native apps have better conversion rates, they just don’t have the same reach as web apps.
PWAs take the best of both.
PWAs make use of a collection of different technologies, some or all of which can be used, depending on the features required.
Web App Manifest
The web app manifest is a simple configuration file which provides information about the PWA to the users device. It enables the user to save the app to their home screen. With it you can also create a branded splash screen and set the launch style of your app, eg: to remove the address bar.
Service Workers
A service worker is a JavaScript file which runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. They can provide features such as push notifications and caching content to be available offline.
IndexedDB
IndexedDB is a client-side NoSQL storage system. It lets you store just about anything in the user’s browser. It is used hand-in-hand with service workers to manage state between events.
Application Shell
An app shell is the minimal HTML, CSS and JavaScript required to load the user interface. It is cached and only loaded once. Content for the app is then loaded dynamically by API calls only as the user requires it. This means the application shell is not loaded from the network every time the user visits a URL, dramatically increasing the speed of the application.
JavaScript Libraries & Frameworks
To implement an app-shell and many of the features above, JavaScript libraries & frameworks are the go-to approach, the most popular of which are React, Vue.js and Angular. They have long been used to develop single-page applications of which PWAs are a natural evolution.
PWAs are likely to have a greater impact on web development than the arrival of Responsive Web Design in the early part of this decade. And businesses are similarly likely to want to adopt a PWA solution to capitalise on the benefits!
It’s still early days for PWAs and eCommerce, we’re unlikely to see the full feature set which platforms like Magento offer out-of-the-box anytime soon. However it’s very encouraging to see PWA solutions for eCommerce coming along.
The arrival of these solutions to Magento are going to make PWAs a more viable solution for many B2C & B2B businesses. The benefits and improved performance that Progressive Web Apps offer to increase online revenues, are too great to ignore.