rogressive Web App is the future of web design. Thanks to PWA, users can easily install the store's website on their smartphones. It's a big change for e-commerce. A change that responds to the need to provide customers with the best possible experience in mobile shopping. Is now the right time for online stores to invest in PWA?
PWA shortcut
What is PWA? During Imagine 2019 in Las Vegas, James Zetlen described PWA as a very successful website. This was possible due to the fact that PWA utilizes modern-day technologies, providing its users with an experience comparable to that of native mobile applications. Theoretically, the explanations could finish here. In practice, it is not that simple.
Is PWA technology completely new? In fact, Steve Jobs already mentioned it in 2007 when he introduced his first iPhone to the world. Jobs wanted developers to build iPhone apps using standard web technologies. The apps were supposed to be used by the Safari web browser. Unfortunately, it didn't work out then, and soon a real mania for native applications started.
The term "Progressive Web App" was introduced in 2015 by Frances Berriman and Google Chrome engineer Alex Russell. It was first meant to describe web applications that use new features supported by modern browsers, such as service workers and web app manifests.
However, PWA is such a new solution in e-commerce that only a few online stores can boast the implementation of this technology.
What's behind the PWA abbreviation?
- Progressive – works for every user, regardless of browser choice, using progressive enhancement principles.
- Web – PWA websites are written in languages typical for the Internet e.g. HTML, CSS, JavaScript
- App – working just like a native mobile (or desktop) application, a consistent interface, user experience and functionality.
What does PWA give its users? First of all, it provides an improved usability, thanks to the combination of what is best in the Internet use when accessed with a browser and with an application.
“Progresive Web App is a very good website”
Jemes Zetlen – PWA Studio Magento contributor
PWA provides:
- Easier access to the site directly from the search engine – the user does not have to download the application from Google Play or the App Store. Just one click and the page will be saved on his phone (as an icon). Importantly, the saved page will take up much less space than a native application. For example, the native Twitter app is 62.49 MB, while the PWA version of Twitter is only 160 KB.
- More convenient browsing, searching for information or buying on a mobile device – all of this happens without installing the application.
- Faster loading – compared to websites that do not use this technology. PWA assumptions require it, for this purpose can be used the possibilities offered by browsers e.g. content caching in the browser or lighter media format (webp format instead of jpg/png/gif).
- Offline access – thanks to the service workers (JavaScript file), if there are problems with the network, the application still works. Some of the application resources are saved in the device cache so that they run faster and are always available.
PWA benefits for business
Speed
This is one of the most exciting functions of PWA. Mobile sites that load in 2 seconds or less have a 15% higher conversion rate than an average mobile site. This means that users leave the site when it is loading for more than 2 seconds. Therefore, changing from an ordinary mobile website to a PWA website will bring significant benefits for businesses. Pages using this technology charge even 1 second. There are several examples in the e-commerce market that confirm this, e.g. the online store Jumia (Africa), which - thanks to a PWA - reduced the bounce rate on the website by 50%. The cosmetic giant Lancôme, on the other hand, implemented PWA in 2017 and recorded an 84% decrease in the page loading time.
Page loading speed is important to increase conversion but it also crucial from the SEO perspective. In January 2018, Google officially announced that the mobile version of its website loading speed will be the key factor when considering the visibility of websites in organic search results.
Engagement
Today's smartphone user has an average of more than 80 apps, but apparently makes use of merely 9 applications per day. Most often these are social media, games, music or video apps. In fact, it is very difficult to engage a user to re-enter a native shopping application. Therefore, from the perspective of e-commerce, PWA can be very useful, thanks to the possibility of using push notifications. With their help, the shop will provide users with current information of various types, such as order status, delivery date or promotions. In this way, shops will have an additional opportunity to engage their users and encourage them to make further visits.
This is confirmed by the case studies. For example, thanks to PWA and push notifications, the eXtra online store from Saudi Arabia has increased user engagement 4 times. After installing a PWA, users who agreed to notifications spent twice as much time on the site. As a result, the brand recorded a 100% increase in sales from their web push notifications.
Conversion
There are already implementations of PWAs, after which websites have significantly increased conversion. A good example here is the search engine of Trivago hotels. Approximately half a million people have already added Trivago PWA to their home screen and, as a result, the site has managed to increase its engagement whereas the conversion rate has gone up by 97%. What about e-commerce? One of the most frequently mentioned case studies in the context of PWA and conversion is the one of AliExpress. After the implementation of a PWA, this online store recorded an increase in conversion of 82% to iOS.
Is PWA a golden solution?
First of all, PWA is a relatively new solution in itself, especially in the case of Magento. This can result in high implementation costs. Prices are rising, especially when creating dedicated solutions. However, Magento has met the demand for this technology and created a set of tools named PWA Studio which allow building online stores in PWA way. This tool helps developers learn PWA techniques, build interfaces, create components and extensions for reuse or sale on the Magento Marketplace.
PWA flaws
- Less access to some functions - PWA can connect to the camera, microphone etc., but in the native applications, the access to the features is wider. Despite this in typical implementations of online stores, what PWA offers will be enough.
- Limited functionality on iOS devices – unfortunately, the PWA technology is not yet fully implemented on iOS devices.
- Unable to collect user data – unlike native mobile applications, PWA pages do not have access to user personal data, such as contact lists, connections and messages.
How much does it cost to implement a PWA?
Building a website based on a PWA is much cheaper than creating a native application, which makes it possible to optimize costs. A company that needs a native application will need to create one for both Android and iOS devices. This can be very expensive because each of these systems will require a separate team of programmers for each browser and mobile application. One team and one technology are enough to create a PWA.
Building a PWA from scratch costs $400k- $1m. The implementation of existing solutions such as PWA Studio, Vue Storefront, Deity, etc. is a closing cost of 300-600 WH (working hours), so the estimated total cost of such a project would start from $15k.
What technologies does PWA use?
- frameworks and libraries of JavaScript such as React.js, Vue.js and Angular,
- web app manifest - manifest.json (defines accents of mobile and desktop browsers, such as the color of the top bar and the page icon)
- Service Workers - is a script that runs in the background, separate from the web page (allows browsing content without access to the web).
Verification of compliance with the PWA is done by checking the Progressive Web
App Checklist (published by Google) and passing the Google Lighthouse benchmark.
Many PWA solutions for e-commerce appear on the market. The important information for merchants is that not all of them are the same. What is the difference? Approach to building PWA. Developers can create custom PWA from scratch or they can use already existing frameworks to do that. Example? In the first case, they can use PWA Studio, which is a collection of tools that lets developers build complex Progressive Web Applications. While in the second case, they can lunch a ready-to-use frameworks like Vue Storefront or Deity and connect with Magento backend through the API.
PWA success story in e-commerce
AliExpress
Before AliExpress invested in the PWA, the brand tried to gain conversions through a mobile website. However, it did not bring satisfactory results. The website did not provide users with adequate experience on mobile devices.
After the implementation of the Progressive Web App, AliExpress increased the conversion rates for new users by 104%. This investment has also resulted in an 82% increase in Safari's conversion rates. What's more, users now visit twice as many pages per session, and the session time has increased by an average of 74% across all browsers.
George
George is one of the leading fashion brands in the UK. The company wanted to provide a better quality of shopping through mobile devices, which was achieved after the implementation of a PWA. In accordance with the best practices, the PWA managed to significantly reduce the page loading time. The company also recorded a 31% increase in conversion and a 20% increase in page views per visit.
In addition, the brand has introduced "Add to home screen" notifications that appear to the users when they enter the site. The use of notifications has increased the time of customer service by 28%.
LuxMart
LuxMart, a Canadian manufacturer of luxury accessories for mobile phones and laptops, was struggling with low conversion rates on mobile devices, with 85% of the traffic on the brand's website coming from mobile users. To improve the brand’s mobile customer experience, they had to come up with a solution that would be both features-rich and fast enough to generate conversions. For this reason, the brand decided to use a PWA. The effect? Thanks to the PWA, the conversion rate on mobile devices doubled from 0.6% to 1.24%, and on some days of the month, after the implementation of the PWA, it increased up to 3.1%.
Join the PWA movement
Should online shops invest in PWA? It is worth noting that native store applications are mainly used by the most loyal and engaged customers. It is hard to expect all users to download the application to their phones, e.g. during one-off and random purchases. In this case, PWA will prove to be the right choice, as it will provide users with an experience similar to that of an application, which will contribute to an increase in conversion.
Secondly, the brand conversion on mobile devices is still low and most brands are not satisfied with it. The number of users using the Internet on a mobile basis is growing year by year. Unfortunately, this does not lead to an increase in conversion, which usually achieves 1/3 of the results of the desktop. The use of PWA technology can change this.
That is why, following the Forrester Research specialists, the message to e-commerce business owners would be: Join the Progressive Web App Movement.
