Adobe

A Seamless User Experience with PWAs: The Best of Both Worlds

Webp.net Resizeimage

Modern businesses must invest in eCommerce to keep up with their competition. Over the last several years we have seen a drastic increase in B2C eCommerce sales, and many of those orders are placed on a mobile device such as a smartphone or tablet. These days, it’s easy for a person who sees an advertisement to purchase the product right there on the spot, no matter where they are, with a device in their pocket. We are now seeing that B2B is on course to follow the same path. 

  1.     US B2B eCommerce sales are projected to hit $1.2 trillion by 2021
  2.     Over 13% of all B2B revenue will be eCommerce in 2021
  3.     80% of B2B buyers use mobile in some form at work (2-3 hours per day)
  4.     60% of B2B buyers say mobile played a significant role in a recent purchase

Traditionally, companies have prepared for an increase in mobile sales in one of two ways…

Responsive Site Design

Customer Experience and Design - Build a Better Customer Experience with AEM on Microsoft Azure
Build a Better Customer Experience with AEM on Microsoft Azure

Businesses leveraging the two technologies together would now be able to harness their data for critical insights and predictions, connect customer touchpoints across their business, and drive brand loyalty and growth.

Get the Guide

When sites are built to be responsive, they are designed so that the code works in all browsers. However, they tend to still be designed primarily for desktops, which may not fully meet mobile user demands. But even with a mobile-first design in mind, there are still limitations. While there are templates and themes that allow for little to no code and accelerate page development, responsive sites often cannot access device features such as the camera for scanning, the microphone for voice interactions, or the GPS for finding locations and getting directions. In general, designing and developing responsive pages is faster than mobile app development, but these pages still take time to load, especially with limited internet connections, and the experience is usually lacking.

Native Web Apps

The early answer to responsive design issues on mobile was native apps. These apps work the device features mentioned above into the overall user experience, but development takes much longer. While native apps provide much more control over the user experience, they must also be managed for various different operating systems and devices, such as Apple’s App Store for iOS devices, and Google Play for Android device apps. In most cases, native apps perform better than websites accessed in a browser, but they take time to download and install initially, and updates are often needed for new content and features. These downloads require large amounts of cell data, and could render the app useless in low-connection areas. Have you ever tried to use a retail store’s app while standing in line, only to find out you need to update to use it, and there’s no cell service in the store? It’s quite a frustrating experience.

Progressive Web Apps

Progressive web apps (PWAs) bring the best of both worlds, and show great promise for the future. They provide an app-like experience, but in a browser, similar to a responsive design. There is no need to install anything, just to save an icon on the device home screen. The icon opens a browser and uses pre-cached data, giving it a native app feeling. A few other highlights of PWAs include:

  1. PWAs are found in web search results, unlike native apps, and various SEO techniques can be used to make them more visible. Native apps do not allow for this, and require an app store download instead.
  2. PWAs are updated in the background, like standard websites, so there is no need for updating apps on a regular basis.
  3. Behind the scenes, scripts and APIs manage network traffic and store data locally as needed. This allows pages to load much faster, after the first visit, which helps SEO as an added benefit.
  4. All information is stored on the device in offline mode, and when the internet connection is resumed, the data is sent to the website. This can allow for purchases even with a spotty (or no) connection, such as a busy trade show floor, or a remote area.
  5. They allow access to the camera, microphone, and GPS on the device, and can send push notifications, which is great for customer service.

There are still some disadvantages with PWAs, but they are mostly around the devices that the sites are accessed on, and should not be a major factor when it comes to eCommerce. At least at this time, PWAs cannot access smartphone features such as contact lists, Bluetooth, or NFC. Also, users who are used to browsing app stores will not come across their PWA counterparts. For example, many people have apps installed for Uber and Starbucks, but both have recently released PWAs.

Magento 2 PWA Studio

Magento’s PWA Studio is a suite of tools for PWA development, maintaining and following best practices and industry standards. It’s the future of web development, and will work well with headless commerce on Magento. So Magento still runs, but the output to the browser is disabled. Instead, JavaScript tools and Magento APIs are used to request data and build the front-end more efficiently, all while improving the user’s experience. The Magento PWA Studio project allows for the development, deployment, and maintenance of a PWA based storefront for versions 2.3 and above. 
In the latest version, Magento has even upgraded Page Builder to provide PWA Studio compatibility. This introduces the easy content editing of Page Builder to these new PWA Studio-based storefronts. Magento is also making additional improvements with each release of PWA Studio, such as switching from REST APIs to GraphQL, and optimizing images through pre-fetching and lazy loading, to improve page loading times.
Not sure where to start? Contact one of our Magento experts today to learn more about Magento for Mobile Commerce and how PWAs can help overhaul your site for the optimal user experience.

About the Author

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.