The ecommerce industry has evolved since Magento was first released over a decade ago. In 2008, shoppers visited stores on desktop machines. They were tolerant of slow-loading pages and complicated checkouts because ecommerce itself was a novelty. Apple released the first iPhone just a few months earlier, and smartphones were nowhere near as sophisticated or ubiquitous as they later became.
Today, over half of all web traffic is mobile. In many stores, most purchases are made from mobile devices. Shoppers search on mobile and expect to be able to buy on mobile too. They demand a fast, pleasant, and uncomplicated user experience. Progressive Web Apps are the latest attempt to bridge the divide between the web and mobile and to improve the experience of mobile shoppers.
Traditionally, ecommerce stores such as Magento were designed to be monolithic applications that ran entirely on the server. The back-end was on the server, and the interface was generated on the server before being sent to the browser.
In recent years, as mobile browsers have improved, interface functionality has gradually been moved into the browser. Progressive Web Apps (PWAs) are the logical culmination of this process, separating the front-end from the back-end entirely. Magento was an early mover in the PWA space, and today offers one of the most sophisticated and developer-friendly platforms for building and deploying Progressive Web Apps for ecommerce.
What Is a Progressive Web App?
The front-end PWA communicates with the back-end via an API, fetching data such as product details from the server and sending data such as cart contents to the server.
Together, these technologies allow web developers to build front-end applications that mimic many of the positive qualities of native applications while being reachable and searchable from the web.
What Are the Benefits of Progressive Web Apps for Magento Retailers?
PWAs are fast, compatible with any modern device, and provide far more freedom than server-side interfaces.
When a PWA is first visited, the browser loads and executes the app’s code, and then begins to download and cache data from the back-end via the API. This approach may slow the initial load slightly, but it allows much faster “app-like” page transitions.
The user experience feels faster than server-rendered web pages, which involve sending requests to the server, waiting for the page to be rendered, waiting for the rendered page to be returned, and then displaying the page in the browser.
If Magento PWA front-ends incorporate other advanced technologies such as GraphQL, load times can be even faster because GraphQL allows smaller and more precise data requests than is possible with REST APIs.
Service Workers and the Cache API also allow Progressive Web Apps to work while a device has no network connection. Network requests can be intercepted and the application’s interface populated with cached data. This may not be a key benefit for ecommerce, but it’s a significant step-up from server-rendered ecommerce stores that don’t work at all without a reliable network connection.
Performance is not the only benefit. PWAs are compatible with many more devices than native applications. A Progressive Web App will run on any device with a modern browser, whether it’s an Android phone, an iPad, or a desktop machine. Native applications may have the edge where device integration is concerned, but they are expensive to develop, and each native application only runs on a single platform.
Shoppers are often unwilling to install native ecommerce applications on their devices. They have to be made aware of the application, visit an app store, download the application, install it, log in, and remember to use it in the future. That’s why less than 4 percent of mobile ecommerce transactions come from native applications.
PWAs, on the other hand, are part of the web. They can be accessed from Google search results like any other web page. The only additional infrastructure they need is a web browser. And, like native applications, they can be installed onto device home pages.
In short, PWAs are less expensive to develop, don’t require multiple apps to support different platforms, provide a fast and app-like user experience, and can be installed on devices just like native applications.
How Does Magento Help Retailers Build PWAs?
Magento has enthusiastically embraced Progressive Web Apps. In addition to a robust REST API that can be used by client-side front-end applications, Magento’s developers created Magento PWA Studio, a collection of developer tools that make it easier to build and deploy PWA front-ends for Magento stores.
Magento PWA Studio includes PWA-buildback, a set of command-line tools and libraries for building Magento PWAs; Peregrin, a collection of hooks and functions that make it easier to build UI components; and Venia, a PWA proof-of-concept storefront with product pages and a checkout.
In addition, Magento offers a GraphQL API as an alternative to REST, which allows developers to take full advantage of this faster and more precise way to interact with Magento’s server-side component.
Progressive Web Apps are seeing expanding adoption by large-scale publishers, businesses, and ecommerce retailers. They offer a faster and more flexible alternative to native applications and more traditional websites. PWAs are a fully-supported part of the Magento ecosystem.