Progressive Web Apps in eCommerce - are they worth your while?

EN_Progressive_Webapss_-PWAs-860x325

Classic web design has seen a continuing trend towards the use of Progressive Web Apps (PWAs), which combine the features of a conventional website with those of a native app. PWAs can serve as an alternative in eCommerce or a means to expand your strategy. Here Shopware Solution Partner solutionDrive outlines two application examples:

PWAs are based on the same technologies as conventional web development: basically HTML5, CSS3 and JavaScript. “Service workers” (JavaScript files executed separately from the main browser thread) allow you to add other features, such as offline capability (via content caching) and push notifications.

Simply put, this will ultimately create a website that visually adapts to various end devices and largely offers the look and feel of a mobile app, replicating many of its features.

The benefits PWAs offer at a glance

Responsive

The need to develop multiple applications for various devices/display sizes is eliminated. 

Offline functionality

Content caching enables you to display content even with a slow internet connection or no internet connection at all while still offering short loading times. This can reduce bounce rates and considerably increase conversion rates.

Browser-based

There is no need to install an app via an app store; users don’t have to perform any software updates. Home screen shortcuts can be created to support the look and feel of an app. What is more, PWAs are indexed by Google as websites and run on HTTPS, boosting data transmission security.

Downsides include:

Browser dependency

The scope of the features and display ultimately depends on the browser’s functions. For a long time, Safari didn’t support PWAs at all, or only to a limited extent – this has now been remedied in iOS 12.2 or higher.

Real-time data processing

Especially in e-commerce, the handling of real-time data is an important factor, meaning some processes don’t work or may be impaired without an internet connection (e.g. payments). Implementation requires a sophisticated use case design and careful consideration of what kind of data can be cached.

PWA_solutiondrive_Imagebild

How to use PWAs for online shops?

The share of mobile traffic and turnover in e-commerce is constantly growing. Slow websites have poor conversion rates – you can offer a crucial advantage by providing content that can be accessed offline. Moreover, not every e-commerce scenario requires a complete online shop with each and every feature. In many cases, it’s enough to output only individual components. Relevant information can be retrieved, for example, via the Shopware API in line with “headless systems”, meaning a separation of frontend and backend. Different output channels can be used to optimise, represent and use content for different end devices. In fact, the online shop acts as data source that can be used to “serve” other frontends, such as the PWA.

The following application examples utilise the Shopware API as a data base to cover various use cases in the online shop.

Application example A: Covering field sales processes

In this customer project, the range of products available in the Shopware B2B shop can be accessed by field sales staff via a tablet or PC using a PWA.

Sales reps open the app via the desktop icon and update the product range data in the morning when they have access to an internet connection. During the day, orders can be taken. Inputting item numbers is supported by a hand-held reader that allows you to scan the products directly in the catalogue. If there is no internet connection on the customer’s premises, orders are cached in the PWA and can later be transmitted to the shop or an ERP system. This means orders are digitalised on site without the need for additional software to record the order. Once an internet connection is available, the data is synchronised.

Application example B: Additional information in brick-and-mortar stores

The Shopware Partner provided another PWA-based solution to a completely different customer scenario. Here, the objective was to provide additional product information, e. g. when at trade fairs or in brick-and-mortar stores. The PWA can be used to search for items among the shop products and then have the requested (additional) information displayed. It can be done on a mobile device or with a scanner connected to a screen, and allows store staff to provide product advice based on the additional information or to determine online availability and current prices.

In another possible scenarios, customers can call up additional information on individual products via a permanently installed self-service station, also offering an easy way, for example, to integrate product videos.

The advantage of using a PWA: it eliminates the need for creating or adapting an entire (sub)shop. Shop home pages, list pages and the entire checkout are no longer needed, and only targeted product information is provided. 

Conclusion

Retailers must offer their customers added value through innovative services and excellent usability. PWAs can offer crucial advantages. The first online shops using PWA frontends have gone online, and there are numerous other use cases. Innovative shop systems, such as Shopware 6, increasingly rely on API solutions that serve as a basis for PWAs.