What are PWAs?
Progressive Web App (PWA) is a web application developed as a result of combining the best of native apps and mobile web pages. These applications can progressively load and run in a mobile browser and can deliver an app-like experience.
PWAs are not new. They were introduced by Google in 2015. Due to its irresistible features, PWAs are being incorporated by global businesses.
Magento and PWA
In 2017, Magento collaborated with Google to bring the best of PWA features to Magento platform by the end of 2018. Magento 2.3 was released on November 28, 2018, with a ton of impressive updates and Magento PWA was one of it.
Check out Magento Open Source 2.3 release notes and Magento Commerce 2.3 release notes to know more.
Magento, in fact, is one of the first e-commerce platforms to enable its users to fully utilize the potential of PWAs. Magento has also introduced PWA Studio which offers the required tools for developers to successfully create and maintain a PWA storefront on top of Magento.
Google has also released an open source tool called Lighthouse using which developers can audit a PWA site.
Why is Magento concentrating on PWAs?
Image source: Statista
The graph shows that 63.5% of e-commerce sales in 2018 took place through mobile phones and tablet devices. In 2019, sales via handheld devices are expected to reach 67.2%.
Since m-commerce is driving more online sales, Magento has made a wise move to bring advanced trends like PWA to its platform.
How can Magento PWA improve my business?
Remarkable speed – The one vital factor for all online stores is speed. If a mobile site takes more than three seconds to load there will be a 53% drop in mobile visits. In other words, 53% of customers will leave a website if it takes more than three seconds to load. PWAs will be playing a major role here as they are blazingly fast.
The reason for PWAs to be faster is browser-level caching which is possible because of service workers. PWAs use service workers to precache part of the web app to load instantly when the user opens it the next time.
Cross-platform compatibility – PWAs can run smoothly on almost all the widely used mobile browsers and platforms. This includes browsers such as Chrome, Safari, Edge and Firefox. Single web code base is enough to run on multiple platforms, including desktops. Hence, businesses don’t have to develop and maintain apps for different platforms. Furthermore, PWAs don’t have to be updated from the app store. Updates can be delivered real-time just like a website.
Responsive design – Implementing PWA will result in consistent experience across devices like desktop, mobile phones and tablet devices. This will help in improving customer experience. Google has said that sites with responsive web design will rank better in Google search results. Hence, implementing PWA can make your site rank higher in Google search results.
Offline support – A part or the complete PWA site can be made to work offline. For example, customers can browse the products of your e-commerce site and can add it to the cart without internet connectivity, provided if they have visited the pages previously. Customers can even place orders offline, once the internet is connected the order will be processed.
SEO-friendly – Since PWA sites are highly engaging and reliable, visitors might stay for a longer than the usual time. Also, factors such as speed, offline support and so on will contribute to high user engagement.
Another significant advantage of using PWA in terms of SEO is “mobile-first index”. Google recently announced that the mobile version of a site would be indexed first. This means that sites that don’t have a mobile friendly version would not perform well in rankings.
Push notifications – Push notifications are the messages that are sent as notifications from the application. They are said to increase engagement by up to 88%. Push notifications are important to e-commerce businesses to keep customers informed about the latest deals, offers and order updates.
Add to home screen – The app icon, which looks like a native app icon, of PWA sites can be added to the home screen of smartphones. Users can click the icon and visit the site directly instead of going to the browser and then to the website. This will increase the time spent by the user on the app which will eventually result in a higher conversion rate.
You can witness the features of Magento PWA by yourself in this live Magento 2 PWA demo (Venia theme) deployed by us. The demo is still in the beta stage and use Chrome browser for maximum experience.
Why should businesses implement PWA?
Apart from the advanced features mentioned previously, PWAs are also a solution to the software distribution problem. If you from a non-IT industry, you might not be aware of what software distribution problem is. Let me explain.
Customers prefer apps on mobile, not browser.
To use Google Maps on a desktop, you will head straight to the browser and access Google Maps from there. But, to use Google Maps on your mobile device, you will directly go to the Google Maps app and use it, instead of going to the browser.
This behaviour is not only in the case Google Maps but for all websites that have a robust native application. Users prefer mobile applications because native apps have wonderful user experience as they can start up fast, use sensors, send push notifications and synchronize data.
When looking at the engagement rate, mobile web has only 13% engagement whereas native apps have 87% engagement. This is because websites cannot provide a rich user experience which leads to poor engagement.
Mobile web has a huge reach
Chrome browser on mobile has one billion monthly users. Even if the engagement is low, people use mobile browsers to access the internet. On average, Android users visit almost 100 sites per month using Chrome.
Mobile web vs mobile app
In short, websites on Chrome have poor user experience and better reach whereas mobile apps offer rich user experience and poor reach.
Also, there’s one major problem – smartphone users in the US download almost zero apps in a typical month.
But, as mentioned before, mobile phones and tablet devices were responsible for the majority of e-commerce sales in 2018.
Though 87% of the time spent by mobile users is on native applications, only three apps account for 80% of users’ time.
While users are not downloading any mobile apps and yet mobile phones are responsible for the major part of the sales, this points out only to one possibility. Only the mobile apps of well-established businesses like Alibaba and Amazon are being used.
If people are using only the apps of popular e-commerce businesses, how can you make people use your online store app?
This is where PWA comes into the picture.
When the user visits your PWA-powered website on a browser, an “Add to Homescreen” popup will appear. Once the user clicks on it, the PWA version of your site will be added to the user’s home screen.
That is it! You have now turned a mobile web user into a mobile app user.
From now on the user can directly access your app-like website like an actual native app without the need to go through the browser. Also, the user is not directed to Google Play Store or App Store to add the app on his phone.
Hence, PWA makes use of the huge traffic on mobile browsers and converts it to app installations (PWA to home screen). To put this into a graphical representation, this is how it looks.
PWAs provide the benefits of the rich user experience of native apps along with additional functionalities such as offline support, incredible speed, push notifications and so on. It also has the capability to drive traffic from the mobile web. All these factors combined make PWA the future of web development.
What benefits can PWAs promise for e-commerce businesses?
Since PWAs combine the best of two worlds – native app and mobile web, they solve two significant problems faced by the e-commerce industry at the same time:
1. Higher Conversion rate – Conversions on mobile web are less when compared to the conversions on mobile apps.
PWAs provide seamless app-like experience, and combined with features such as offline support, speed, and cross-platform compatibility; conversion rates can go up.
2. Increase in the number of users – Customers download only the mobile apps of well-established e-commerce businesses. With PWAs, customers can add the PWA of the online store to their phone’s home screen with just click of a button.
PWA: Hype vs Reality
I’m pretty sure you might have come across multiple technologies where everything might seem perfect in theory. But, it will turn out to be a failure when it comes to performing in the real market. PWA lives up to its reputation, and it has delivered amazing results to businesses that have tested or implemented them. Let us see a few examples.
PWA case studies
AliExpress
AliExpress is one of the largest e-commerce business, not only in China but globally. Once they implemented PWA, they saw results in days. There was a 74% increase in the time spent on their website, and the page views doubled.
But, all these mean nothing if the conversion didn’t improve, also there is a rumour going around that PWAs don’t work in iOS. Well, AliExpress saw 82% more conversion on iOS.
Flipkart
Flipkart is India’s biggest e-commerce store and launched Flipkart Lite as its PWA.
Users time on site increased to 3.5 minutes with PWA, earlier it was 70 seconds in the case of the native app. The engagement rate increased to 40% and 70% greater conversion was seen from the customers who arrived via Add to Homescreen feature. The data usage also reduced to one third.
OLX
OLX is a leading marketplace in India, and the bounce rates were high for mobile-web. Half of their traffic was from mobile-web, and they chose PWA to solve their problems.
After implementing PWA, the bounce rate went down by 80%, and the Click Through Rate (CTR) on Ads went up by 146%. With the help of push notifications, the engagement rate went up by 250%.
Jumia
Jumia is a popular e-commerce store in Africa, and after witnessing the benefits of PWA, they have applied PWA to their other operations such as Jumia Travel.
Traffic to their PWA increased by 12 times more than the combined traffic of native apps – both Android and iOS.
The data usage reduced by five times and 2x less data was required to complete the first transaction. In addition to that, the data storage required was reduced by 25x.
Konga
Konga is a big player in Nigeria, and they used PWA to reduce data consumption. By implementing PWA, the initial load took 92% less data and to complete the first transaction 82% less data was required.
Businesses that utilize limited features of PWA.
To utilise the full potential of PWA, the site should be built from scratch. This can be quite expensive. However, it is also possible to integrate only the required PWA features to the existing website.
Businesses can concentrate on the features that will create maximum impact, and implement it. This will also increase customer experience considerably. Let us see examples of some businesses that use selected features of PWA.
AirBerlin
AirBerlin utilized the offline functionality of PWA to offer reliable offline support to their customers at airports. Offline support was added and the initial load time was reduced to less than a second. This allowed their passengers to access boarding pass and journey details without internet connectivity.
The Washington Post
The Washington Post built a simple PWA version using PWA demo for their top news feed. They focused on speed. The page load time was reduced to 80ms. You can see the live demo of this product at WAPO.com/PWA. Since they saw an incredible result, they decided to use PWA for their core mobile web experience.
When is the right time for e-commerce businesses to build PWA?
When it comes to the retail industry, the only channel that is consistently growing year-over-year is mobile. Hence, it is important for businesses to launch PWA as soon as possible to gain more customers and increase sales.
According to Think with Google, a business making an annual revenue of $20 million can lose up to $1.4 million for waiting a month to deploy PWA and $6.8 million by waiting for six months.
Hence it is recommended to build PWA as soon as possible to drive better sales.
What about the updates for PWA Studio?
PWA Studio is an open source initiative, and therefore it might receive updates regularly. Update releases for PWAs are not related to Magento updates. Hence timely arrival of new features and enhancements can be expected.
What are the drawbacks of PWA?
UI problem in large screens
Since PWAs are deployed as a mobile-first approach, UI might not work perfectly in larger screens like desktops. In other words, UI in larger screens might not be fine-tuned. However, this can be rectified by altering the UI code to be compatible with large screens.
Absence Of Presence in Google Play Store and iOS App Store
PWAs are directly added from the mobile browser. But the current practice is that the user goes to app stores like Google Play or App Store to download the app. Hence, the default way is still downloading via app stores. This could result in missing out some traffic from app stores. However, in the near feature, as more and more businesses roll out PWAs, this situation is expected to change.
Magento PWA is built on top of React JS and applications developed on React JS cannot be added to app stores. However, applications built on React Native, which is closely related to React JS, can be added to app stores. Hence, PWAs with few modifications can be added to app stores.
PWAs miss out some features of native apps
Though most important features of native apps are available in PWAs, some features such as the ability to use NFC (Near-field Communication), Bluetooth and so on are absent. Hence, PWAs can’t provide all the exact features of a native app.
Therefore, PWAs have the main features of an actual app, but not the real potential of a native app. But, these features that are absent might not be useful for al businesses.
The statistics and images in this blog are added from the below video and presentation by Google.
Source
Images and statistics are taken from –
