Magento PWA: Features, Technical and Business Insights

The number of mobile purchases is growing rapidly.
In 2019, almost 44.7% of retail eCommerce sales customers made from mobile devices. By 2021, this number will grow to 53.9%. Statistics stress heavily on the importance of having a mobile-optimized eCommerce website.
The development of a website with a responsive design is one of the possible solutions. Yet, there is a better way to reach the goal – with progressive web apps. AliExpress, Alibaba, Flipkart, and other companies are already using PWAs.
This article uncovers the following aspects of progressive web apps development:
- what Magento PWAs are and technical overview of their work
- reasons to invest in the development of Magento 2 PWA
- GoMage’s experience in Magento PWA storefront development
- difference between Magento PWA vs native app vs responsive website
- successful Magento PWA examples
- costs associated with PWA development
Let’s jump right into the business and technical secrets of Magento PWA.
The Basics of Progressive Web Apps
The popularity of progressive web applications has surged in recent years. All small, medium and large enterprises are actively adopting new technology in their eCommerce operations. Reduced development costs, faster project delivery, and improved user experience cover only a fraction of benefits.
Let’s review the basic details of Magento PWAs.
What are Progressive Web Apps?
The concept of PWA was first introduced in 2015 by the Google PWA team.
PWA is a type of software that shares features of websites and apps. Such applications aim to provide excellent user experience and are considered a great substitute for native apps. Since PWAs operate in web browsers, customers don’t have to install them on their mobile devices.
Progressive web apps are very beneficial for businesses, exploring new ways to interact with customers. Such solutions eliminate the need to develop separate apps for web, iOS, and Android or even release cross-platform solutions that don’t provide the best user experience. Thus, PWAs reduce the time and budget needed for web development.
Since 2018, Magento store owners can also develop progressive web apps. Same year Magento released PWA Studio, a set of tools for PWA storefront development and maintenance. Now Magento 2 store owners can create progressive web apps on the platform they are already using. Adobe also provides tools that allow to migrate an existing store to Magento 2 PWA, but this only applies to the stores running on the latest versions of the platform (2.3.X).
Benefits of PWA for Magento 2
Many companies already use Magento PWA. Businesses look in this direction because of the promoted features and benefits. These positively influence both eCommerce businesses and users.
Let’s investigate the top-10 benefits of Magento 2 PWA for your business.
- Device-agnosticism
The main benefit of Magento 2 PWA is device-agnosticism. In simpler words, it means that such applications work on any device and browser. Customers can navigate through an online store on the devices they prefer.
- Top position in Google SERP
PWAs share a lot of properties with websites. These include top rankings in search engines like Google, which makes them highly accessible and convertible to all users. As compared to native and hybrid apps, this is the superior advantage of Magento PWAs. You can make them even more discoverable with the help of SEO practices, marketing activities, and paid ads. Traditional apps can be promoted mainly in app stores.
Tired of reading the article?
You can learn about Magento PWA in our video.
- Linkable
This is another feature that PWAs share with websites. Availability of Unified Resource Identifier (URI) allows to retain information and reload its state. It means that customers can save links to your Magento 2 PWA, share URL with others, and even load the same pages they saved in tabs. In this instance, progressive apps behave like traditional websites.
- App-like functionality
While the domain of websites is browsers, Magento PWAs move beyond them. They look and feel like native applications and can be used regardless of the mobile device type. This feature makes Magento 2 PWAs superior to hybrid apps, as the latter ones often don’t provide a smooth user experience on all mobile devices. Developers don’t need to find workarounds to overcome certain restrictions on some mobile devices.
- Reduced development cost
Creation of native mobile apps is associated with high development cost, as you need to develop separate apps for Android and iOS. When we talk about Magento PWA, you don’t have to spend a lot of money on two versions. You can create a single application and be sure that it will work great on any mobile device. Thus, development costs are lower as compared with the creation of traditional applications.
Interested to know how much it will cost to develop a website on Magento 2?
Check out the article How Much Does a Magento 2 Website Cost: Editions, Services, & Additional Expenses. You will learn about the main influencing factors, features, and development cost based on business needs.
- No user-side updates
Everyone knows about the need to update an app from time to time. End-users are responsible for installing those updates on their devices. Magento PWA updates are performed automatically without user permission. As a result, users get the latest features regardless of their decision to upgrade.
- Offline operation
The best advantage of a Magento 2 PWA is the ability to work offline. Even without network connection, users can access the information they viewed online. This is possible thanks to the built-in cache system that automatically saves information about all visited pages.
If your target audience is located in countries with an average or poor network connection (or perhaps they are just shopping while commuting, e.g. while in the subways), Magento 2 PWAs are a great solution to the problem. Also, this functionality reduces catalog abandonment rates by at least 35%, as when users go offline, they can continue shopping inside a store.
- Push notifications
Progressive app solutions make push notifications accessible to everyone. In the past, they were available to online stores with dedicated mobile apps. Google states that 60% of PWA’s users permit these apps to send push notifications. You can easily turn the feature into a powerful sales generation machine and notify users about special offers, holiday season discounts, remind them about products in their shopping cart, and urge them to buy them while products are not sold out.
- Security
Magento 2 PWAs are highly secure. HTTPS protocol ensures data safety and protection from man-in-the-middle and Magecart attacks. Also, it prevents precluding shopping and content tampering.
- No app store requirements
With Magento PWA, you don’t need to pass all requirements advanced by Google Play and App Store. App stores can ban your app or remove the accepted app if it fails to comply with the requirements. Even more, they don’t even send prior notifications, leaving you without a chance to fix problems.
Progressive web apps help businesses sidestep such restrictions. You don’t need to comply with rules and regulations, which reduces the risks of your app being banned.
The listed advantages make small and big companies turn to Magento 2 PWA in their efforts to improve customer experience and connect with more users.
GoMage’s Experience in Magento PWA Development
GoMage sees Magento PWA as the biggest trend in eCommerce. While the trend is still forming at the moment, it will reach its peak soon.
The percentage of users that make purchases from mobile devices will grow rapidly. Users are less willing to download eCommerce native apps on their mobile devices, even if they regularly make purchases on these websites. That’s why Magento 2 PWA is definitely the future for eCommerce businesses since it allows users to have the same level of speed and user experience as on native apps. Yet, they don’t need to open a website URL in the browser.
At GoMage, we already built our GoMage PWA storefront for the Magento platform and are going to launch it soon.
We chose to build our Magento PWA storefront with the help of the default Magento PWA builder (Venia Storefront). We consider it a much better option than VueStorefront and other solutions because Magento is going to create a separate section for such extensions in Magento Marketplace. GoMage PWA storefront will be compatible with all those extensions that Magento development companies will build in the future.
The beta version of the Magento PWA storefront by GoMage is not publicly available yet. Once the 1.0 live version is released, we will launch a demo site for it only.
Take a sneak peek at our GoMage PWA storefront below.
Technical Aspects of PWAs
While having a lot of commons with websites and native applications, PWAs differ significantly. We’ll overview the main technical specifications of progressive apps and compare them with other solutions.
Let’s see who’ll win in this battle.
How Does PWA Work?
Magento PWA relies on headless architecture, which means that the presentation layer is separated from the data and business logic layer. Four components help to ensure such an architecture, namely:
- Web app manifest
- Service worker
- Shell architecture
- Transport Layer Security (TLS)
Let’s examine each component and their roles in Magento 2 PWA development in more detail.
- Web app manifest
The Web app manifest is presented in the form of a JSON file. The file is responsible for the Magento PWA’s native-like interface. In this file, developers specify how the app will operate on mobile devices, how users can launch it, and how the content will be displayed to users. For example, it is possible to enable full-screen mode with an invisible URL bar.
Web manifest should include metadata like short and long name of an application, icons, description, display mode and orientation, and other specifications. The file can also contain a splash screen, theme and app colors.
To enable PWA settings, all website pages headers should have a link to the JSON file with the web manifest added.
- Service worker
Service worker is a technical element responsible for the support of offline work mode, background information syncing, native-like push notifications, content fetching, connectivity changes, etc. It is represented in the form of a JavaScript file that runs in the background of Magento 2 PWA and responds to different user actions.
- Offline mode
The main task of the service worker is to enable caching of the application interface. After visiting a website once, users can use it offline without differences in the provided information. All dynamic content is refreshed every time a device connects with the network. As a result, a progressive app doesn’t need to make API calls to the backend every time a user visits a site.
- Push notifications
Push notifications are the main benefit of Magento PWA. Such an app can send them when the browser is closed, and even when the app is not active.
- Background syncing
This functionality allows for an uninterrupted shopping experience. If a user places an order with an online store right before the device loses connectivity, the app marks the order as placed and will send it as soon as connectivity is restored.
- Shell architecture
The creation of such an architecture requires static content to be separated from dynamic content. The app shell (also called the base of the UI) consists of the design elements that form the core of the app’s user interface. These are required for offline operations of the application.
Want to get an insight into the basics of designing successful websites?
Check out the article eCommerce Website Design: Essentials, Examples, & Cost. You will find out the best practices in eCom design, why your business needs to invest in it, the timeline and cost of eCommerce web design [infographic inside].
- Transport Layer Security
TLS is used to ensure privacy and data security of a website. Its primary use is the encryption of data exchange between web applications and servers. Magento 2 PWA must have an SSL certificate, and data should be served via HTTPS protocol.
Responsive websites and native apps are the main competitors of Magento PWA.
Native applications are those designed and developed for a particular operating system, Android or iOS. Responsive websites are designed to operate great on all mobile devices.
What is the difference between a native app, a responsive website, and a PWA?
Let’s find out!
Feature | PWA | Native App | Responsive Website |
---|---|---|---|
Linkable | + | - | - |
SEO-indexed | + | - | - |
Offline mode | + | + (depending on app’s functionality) |
- |
Multi-platform compatibility | + | - | + |
Installable | + | + | - |
Behind-the-scenes updates | + | - | + |
Push notifications | + | + | - |
Cost-efficient | + | - | + |
Distribution | Web | App Store or Google Play | Web |
Mobile-first design | + | + | - |
Requires more space | - | + | + |
Hardware-heavy | - | + | - |
Limited by app stores’ requirements | - | + | - |
Progressive web apps have adopted key features of native and web applications. What makes them superior is the ability to operate on all devices and being used without connectivity. Magento 2 PWA improves user experience, as they are installed in a click, can be shared with others, provide automatic updates, and allows access to content in offline mode.
Top-10 PWA Examples: Key Benefits & Real Numbers
Many eCommerce companies have already implemented PWAs and are reaping the benefits of their integration. Among the companies, you can find such names as Alibaba, Lancôme, AliExpress, and others.
Below are some examples of successful PWA implementation by world-famous brands. The table provides insight into the best benefits these companies got thanks to moving to PWA.
Company | Monthly users | Issues | Main benefits |
---|---|---|---|
AliExpress | 600+ million | Low level of mobile app downloads Low user engagement |
104% increase in new users across all browsers 82% increase in iOS conversion rate 2x increase in pages visited per session 74% increase in sessions time |
Jumia | 8.72 million | High level of shopping cart abandonment Poor connectivity 65% of web traffic was coming from mobile browsers |
38% increase in open rate 9X increase in conversions on abandoned carts 50% lower bounce rate 12x more users vs native apps (Android & iOS) 5x decrease in data usage |
Alibaba | 755 million | Difficulties with building engagement on mobile web | 76% increase in conversion rate across browsers 14% more monthly active users on iOS 30% more monthly users on Android 4x higher interaction rate from Add to Homescreen |
Flipkart | 177 million | Needed seamless user experience on mobile web that was similar to the one on native apps | 3x increase in time spent on the site 40% higher re-engagement rate 70% increase in conversion from Add to Homescreen 3x lower data usage |
George | 733.9K | Poor customer experience with online shopping | 3.8x increase in page load time 2x lower bounce rate 31% spike in conversion rate 20% more page views per visit 28% increase in average visit session from Home Screen |
Ele.me | 1.72 million | Poor user web experience Too high load time |
11.6% decrease in loading time across pre-cached pages 6.35% decrease in loading time across all pages Time-to-consistently-interactive dropped to 4.93 seconds |
Lancôme | 113.22K | Low conversion rate on mobile (15% against 38% on desktop) | 17% increase in conversions 53% increase in mobile sessions on iOS 8% increase in conversion rate on recovered carts via push notifications |
330 million | Slow and unreliable mobile web experience | 65% increase in pages per session 75% more Tweets sent 20% drop in bounce rate |
|
Make My Trip | 43.4 million | Low level of app downloads Problems with building engagement |
3X spike in conversion rate 38% improvement in page load times 160% increase in shopper sessions |
Housing.com | 50 million | Slow load times negatively impacted the conversion rate | 38% increase in conversions 40% lower bounce rate 10% longer average session 30% faster page load |
The above examples demonstrate the real benefits of PWA adoption. If you don’t have much time and budget needed for native app development, need to improve web mobile conversion rate, and want to improve customer experience, create a progressive web app.
What Benefits do You Get from Magento PWA?
If you choose to develop a progressive web app, it will reward you with the number of advantages, including:
Benefit 1 – Development cost reduction
Benefit 2 – Faster development time
Benefit 3 – Increase in web mobile conversion rate
Benefit 4 – Improvement in page load times
Benefit 5 – Spike in shopper sessions duration
Benefit 6 – Bounce rate decrease
Benefit 7 – Increase in pages visited per session
Benefit 8 – Push notifications
Benefit 9 – Improved conversion from previously abandoned carts
Benefit 10 – Increase in new users across all browsers