The global e-commerce business continues to grow. But with growth, customer behavior is shifting from desktop computing to a more convenient way to shop. Mobile e-commerce is on the rise.
In this blog we take a look at the new Progressive Web App (PWA) technology and how it can help you with your mobile sales.
About Mobile Commerce
According to Google 40% of consumers will leave your page if it takes longer than three seconds to load it. Furthermore 73% of the customers will switch to a different shop if it offers a better and easier way to purchase on mobile devices.
In the upcoming years the Mobile Commerce revenue will rise from 1.8 billion USD in 2018 to over 3.5 billion USD in 2021. So to get a slice of that cake eCommerce operators should optimize their shopping experience for mobile devices.
With the latest Magento update (2.3) the new Magento PWA Studio was introduced to developers. It provides tools to develop Progressive Web Apps for your Magento 2 store.
What’s a Progressive Web App?
Short: Progressive Web Apps (PWA) are a mix of responsive websites and a native apps.
The two old approaches to a mobile friendly experience both have their advantages and disadvantages.
The native app comes with a lot of possible features like offline availability, usage of mobile features like the camera and a good user experience. But the development of an app is expensive. Furthermore the app has to be approved by the big App Stores of Apple and Google and needs to be promoted so the customer actually uses it.
On the other hand the provision of a responsive web design is cheaper and the page can be reached in the classic web browser. However the UX is based on the code of the desktop version which often can’t fulfill the users’ expectations on mobile devices.
Initiated by Google, the PWA combines the two approaches. It runs in the standard browser while the appearance is very similar to a native app and can make use of a better user experience.
Advantages & Features
No App Store or Download necessary
The PWA runs in the standard browser, therefore it needs no download from any App Store. A short link to the Progressive Web App can easily be created. The PWA can alert the user that a Icon can be placed on the Home screen of the mobile device with just one simple touch on the screen. Experience shows that the mental hurdle of installing an app on a smartphone or tablet is much higher than just going to a website and creating an icon.
For the developer this also means no separate development and approvals for Android and iOS which results in more freedom of creating PWA.
Getting access to the content of a page without internet connection is possible for Progressive Web Apps. So if the connection gets lost the customer can still surf on the app. The scope of this functionality is determined by the application itself. Especially users travelling will know the struggle of bad connections in some rural areas.
Improved User Journey
Not only is there no download required so the user won’t have to take this hurdle but also the whole purchasing process can be optimized for the mobile device. This will lead to higher engagement and will increase the conversions and revenue. Furthermore the PWA can be used across multiple platforms. Switching from Laptop or Desktop to the phone is possible without a loss in user experience.
It is also able to re-target the user with a push notification on his phone about products he had a look at or that might be interesting for him.
Fast respond & Low Data Usage
Progressive Web Apps are developed to guarantee a fast response on any interaction with a user. Due to the possibility of caching parts of the page, the required bandwidth and data is reduced drastically. One of the main challenges for developers will be the choice of what parts of the page should be cached and for how long. This will optimize the low data usage for users and safes your company costs of server capacity.
Because Progressive Web Apps are run in the standard browser, it is possible for search engines like Google to crawl the app and index it in their search rankings. Therefore the URL and the content should be Keyword optimized.
The mobile first approach of PWA and the improved loading time matches with the Google requirements. You can check the speed of your PWA with the Page Speed Tool by Google.
Moreover the optimized user experience for mobile users will improve KPIs like lower Bounce Rates and longer time on site. Google uses those indicators to predict the relevance and the experience for the user.
For more tips about SEO have a look at our Top 5 SEO Beginner Tools for Magento Developer
Magento PWA Studio
Released with the latest version of Magento 2.3 it is now possible to be an early adopter of the PWA technology and boost your shop experience. The Magento PWA Studio offers a variety of tools for developers to develop Progressive Web Apps for their Magento 2 storefront:
- pwa-buildpack CLI tools
Contains the main build and development tools for a Magento PWA.
- Peregrine hooks and components
Contains a collection of UI components and custom React hooks for a Magento PWA.
- Venia store and UI components
The Venia package contains proof of concept Magento 2 storefront built using the PWA Studio tools. It also provides UI components you can use in your own projects.
You can have a look at the preview here: Venia Live Demo
The project provides documentation to help guide developers towards creating a Magento PWA storefront.
- Shared Magento server
Developers have access to a Magento application running in the Cloud to help jumpstart storefront development. This server contains sample data and is maintained by the team to ensure that you are developing on the latest version of Magento. This shared instance is open to all PWA Studio developers.
The new Progressive Web Apps come with a lot of advantages. The combination of the best characteristics of responsive design and native apps makes it a powerful technology for the future. At the moment there are also a few downsides to the technology due to the lack of a complete support of all functions depending on the used browser (Apple is not supporting every feature yet). Developer should improve their knowledge to PWA even if it might take a few more years for the market to adapt the new technology.
Let us know what you think about Progressive Web Apps!