Official PWA for Shopware 6: How to Make Your Customers Go WOW in 2020?

eCommerce Jan 29, 2020

Official PWA for Shopware 6: How to Make Your Customers Go WOW in 2020?

Main / Blog / Official PWA for Shopware 6: How to Make Your Customers Go WOW in 2020?

The line between websites and native applications is being blurred for mobile e-commerce. Creating a mobile app for your eCommerce company and then attracting users to download is no longer relevant. Why? Because PWA (progressive web apps) appeared and they combine the pros of websites and native applications. Though PWAs for Magento 2 showed up earlier, Shopware stores can already be successfully turned into PWA. And with the release of the official PWA for Shopware 6, it has become much easier.

Have a project in mind?

Lets talk about it

Request a quote

The number of mobile customers is steadily increasing. On the image below from Statista, you can see that 25% of users make purchases via mobile devices frequently, while 20% do it almost always. However, if your eCommerce website is not mobile-friendly, it’s unlikely that customers will download a native app just to buy a product. To maximize your profit, you need a technology that provides convenient user experience on every device.

Share of customers who buy via mobile devices in Germany in 2019
Image Source: Shopware

In this article, we’ll explain what is PWA app and reveal the benefits they bring to your business. Also, we’ll tell you about the most market-proven PWA platform for creating front-ends - the Vue Storefront that serves as the Shopware 6 native PWA. Thus, you’ll find out the gains of integrating it into the Shopware eCommerce site.

PWA definition and why use it?

Progressive Web Application first appeared in 2015. To cut a long story short, it’s a mixture of websites (or web apps) and mobile applications. They combine features provided by web browsers to deliver the native mobile app experience. 

So what exactly is PWA? PWA has all the signs of a regular website. They can be opened in a browser on every device that has an internet connection. They have a URL and can be found in the search engines. And you’ve probably seen a PWA before, only you didn’t know about that. For instance, did you know that Instagram, Tinder or Pinterest are now  PWAs?

The difference between PWAs and regular websites or web apps is the following. When you open a PWA in a mobile browser, it feels like you’ve opened a native app. Moreover, you don’t even need to download an app to do that! However, a PWA will offer you to add it to the home screen and therefore, install it as an app on your device. Once you do it, there will be no  browser UI so you can enjoy the native app experience.

Instagram proposes to add it as a mobile app to home screen
Image Source: Googleusercontent

PWA apps provide great opportunities for every organization existing on the web, including eCommerce stores. Now let’s dig deeper to find out more about the benefits of the groundbreaking PWAs for your business:

Fast performance

According to Google page speed benchmarks, 53% of users will leave your e-Store if its loading time is more than 2 seconds.

In contrast, PWAs are incredibly fast so if you go for them, you may forget about any worries concerned with page loading speed. In short, they use an additional Service Worker JS file to cache data. For instance, Vue Storefront, which is an official PWA for Shopware 6 that we’ll talk further, achieved the speed of e-store catalog loading amounting 0.1 seconds.

Small app size

Native apps consume a decent amount of disk space. They can weigh more than 100 megabytes. And I bet, no user likes to pollute their memory space with apps they seldom use e.g. once a week. They why users frequently delete apps as quickly as they download them. It’s because a lot of them want to use the device’s memory for audio, images, video and other multimedia content.  

Properly developed websites should weigh low. If we don’t take videos and images into account, their size can be less than 100 kilobytes

PWAs effectively solve the problem of highly consuming native apps. They consume far less storage space. Let’s look at Twitter which recently became a PWA. 

PWA size

Android app size

iOS app size

600 KB

23.5 MB

116,5 MB

That is 39 times size reduction compared to the Android app and 194 times compared to the iOS one.

Work offline

Progressive web apps can access the pre-cached data regardless of having an internet connection or not. Thus, users can browse products as well as order them offline. The ordered goods are sent to the server, once the internet connection is restored. This makes the user experience seamless. The shopping process won’t be interrupted in case of a poor internet connection or no connection at all. 

Read also:  Follow these tips if you need to choose a reliable web development company

No installation, upgrading or app store publishing needed

Publishing your application on the popular app stores is an unavoidable step if you need to make it available to the public. It takes some time. In reverse, users also need to download, install an application as well as upgrade it occasionally. However, the progressive web application is rather a web app in its core so it relieves you and your customers from all of this. 

SEO-friendliness

Although PWA provides native app UI as well as capacities, it remains to be a web page. Therefore, it will be indexed by the search engines and can be shared by users. In addition, Google ranks higher those sites that have a faster loading speed. Thus, by incorporating PWA software into your e-store, more users will be able to find it.

Dinarys is an expert in eCommerce business analysis. If you need a free consultancy on PWA implementation for your business, feel free to write us a message.

User engagement boost

On Google I/O 2017, it was said that user engagement of native apps is twenty-fold higher compared to web applications. PWA apps have these native app benefits. In particular, you can add them to the mobile device’s home screen and send push notifications. These capabilities make users return to your app time and again. Besides, tapping an app icon is quicker and easier than writing a website URL. Thus, PWA offers great usability and, therefore, boosts your e-store’s conversion rates.

Cross-browser and cross-device compatibility

Progressive web apps run great on every browser and device that you utilize - desktop computer, smartphone, tablet, etc. Just as native mobile apps, they can interact with your device internals e.g. camera, GPS sensors, etc. 

Read also: How to optimize checkout page to increase your sales

Cheaper development and maintenance

If you decide to develop one app for iOS and one for Android, you have to spend approximately twice more costs. In contrast, PWA technology uses only one code base but works on both Android and iOS.

To sum up the PWA differences compared to native apps, have a look at the image below:


The differences between native and progressive web apps

Progressive web app examples and their marketing results

Here are some of the user engagement results of the best progressive web apps created by famous brands:

  1. AliExpress

AliExpress is an international online marketplace. The number of their mobile customers is increasing three times quicker than users from other devices. This company wanted its website both to engage users well and work as quickly as their mobile app

They also wanted to use the mobile web as a tool to draw attention to their mobile app. Later on, AliExpress discovered that engaging users to install the mobile app is a complicated and expensive task. Hence, they’ve come to the solution to develop a cross-browser PWA to gain the benefits of both native mobile apps and the wide scope offered by websites.

As you can see below, AliExpress almost doubled their engagement rates. They acquired +104% new users and improved their conversion rates on iOS by 82%. Due to the improved usability, their customers also started to watch 2 times more pages per session and spend 74% more time per session.     

AliExpress user engagement results after PWA implementation
Image Source: Divante

  1. Forbes

Forbes is a world-famous business magazine that is published every two weeks. The company wanted to develop a PWA to improve usability for mobile users. Particularly, they wanted their website to work faster and provide more personalization.

With the help of PWA, Forbes effectively achieved the above-mentioned goals. Their website loading time used to amount from 3 to 12 seconds. Now it is only 0.8 seconds! Forbes also changed their site design to a new format that relies on the Snapchat Stories layout.        

Forbes user engagement results after PWA implementation
Image Source: Divante

The results after implementing a PWA didn’t keep waiting for long. Their users started to visit Forbes more often and read more. Also, ads became more viewable. Look at the figures in the image below.

  1. Twitter

A globally known social network wanted to make a PWA to re-engage users of their website on mobile. They needed to implement push notifications and make them work like in native apps. It means users can receive them even when the browser is closed. 

By making the site a PWA, their app started to consume less data by the maximum utilization of caching. Also, PWA undertakes image optimization to reduce their size and help them load faster. Twitter also provides the data saver mode to let users manage when the app is downloading media files. The social network started to perform faster, work on poor internet speed conditions and to consume less mobile traffic. The PWA helped Twitter to increase user engagement and to decrease the bounce rate.

Twitter user engagement results after PWA implementation
Image Source: Divante

  1. Lancome

Lancome is a manufacturer and international distributor of luxury perfumes and cosmetics from France. The number of their mobile users was steadily growing. However, the conversion rates on mobile were significantly lower than on the desktop. Lancome’s customers experienced numerous nuisances during the mobile purchasing process. 

Lancome decided to turn their site into PWA to improve their conversion rates and deliver the spectacular user experience. Here are the results they managed to achieve:


Image Source: Divante

What is Vue Storefront?

Vue Storefront is a progressive open-source PWA framework for eCommerce. It is intended to build online store UI and is compatible with any backend (like Shopware backend or Magento). Since it brings all PWA benefits, it is also used as a tool to improve the shopping experience and user engagement. Starting from April 2017, its popularity is rapidly growing among online store owners and developers. Because of the increasing dev community and open-source code, Vue Storefront receives testing and code fixes on short notice.

Some figures about the Vue Storefront project:

Vue Storefront is based on headless eCommerce architecture. It means that the front-end and back-end of an online shop are separated from each other. Vue Storefront handles the front-end part and supports integration with various back-ends including Shopware, Magento, Spree, Episerver, Coreshop, etc. The advantage of headless architecture is you can replace the back-end of your store anytime. For example, you can migrate from Magento 1 to Magento 2, and no changes occur to the front-end. 

Vue Storefront is the only market-proven PWA storefront. More than 20 PWA projects for famous brands were developed using it. Among them are Tally Weijl, Danone Direct, Philip Stein, Klebefieber, Gasto Hero, and others.

Vue Storefront can significantly boost crucial eCommerce metrics. Here are the record-high indicators the customers achieved using this PWA platform:

Why use Vue Storefront as PWA for Shopware 6 release?

Shopware 6 update was redesigned from scratch and received an entirely new technological basis. The changes are so drastic that the manufacturer can’t offer a “one-click” migration tool to update from Shopware 5 to Shopware 6

Among the major changes in Shopware technologies of the version 6 is incorporating the API-first approach. It simplifies connecting third-party software to Shopware in order to control as well as to automate every shop functionality through various APIs. Consequently, Shopware 6 update enables connecting diverse e-shop front-ends as well as sales channels. And that’s why Vue Storefront became compatible with Shopware.

Vue Storefront is a native progressive web app framework for Shopware 6. Vue Storefront provides a more seamless experience for you and your customers compared to other PWA solutions. Here are some technical details why using Vue Storefront for Shopware 6 websites is better:

  1. Both Vue Storefront and Shopware use the same technology for their frontend which is Vue.js. What does it give to us? A relevant analogy for this is it’s always easier to cooperate if you speak the same language. So this is not only the case regarding ordinary human communication but the interaction of different software components as well. Because of this, the integration between Vue Storefront and Shopware proceeds easier and more stable.
  2. Every change done to the store is automatically transferred to the PWA.
  3. Shopware 6 and Vue Storefront are from the same source. Let’s say, if some technical issues would occur with your store, it could be caused either on the Shopware side or the PWA side. If you use an external PWA, all their developers can do is fix the issue on their side or refer you to the Shopware support. But if you use a native PWA, Shopware developers can provide you comprehensive support to fix troubles related both to their CMS and PWA.
  4. No additional middleware between Shopware and PWA. Other platforms use adapters for PWA integration as a middleware for transferring data between the PWA and the Shopware CMS.

No middleware is used for interaction of Shopware and Vue Storefront
Image Source: Youtube

However, the benefit of native integration of Shopware with Vue Storefront is that no middleware adapters needed. That results in higher and more stable performance and a decreased possibility of software errors. 

Shopware and Vue Storefront
Image Source: Youtube​​​

As a result, Shopware and Vue Storefront can communicate directlySo why should you consider PWA implementation?

So why should you consider PWA implementation?

PWA is the future of software development. The fact that such big players as Airbnb, Alibaba, Forbes, Twitter switched to PWA, proves its big potential. Every business will likely utilize a PWA. Currently, incorporating a PWA is your chance to impress the clients and stand out from the competitors. Do you want to be among the early adopters of eCommerce novelties or lag behind?

Certainly, it’s only your choice whether to invest in creating a PWA or not. Hence, we can assure that PWA benefits greatly exceed the expenses of implementing this technology. Eventually, you get an incredibly fast, light and secure app. Besides, PWA development replaces the need for developing a website, iOS and Android apps. 

The only issue is that implementing PWA for Shopware 6, Magento or other CMSs is a complex task that demands a great deal of coding. But there’s a solution! At Dinarys, we have solid expertise in eCommerce site development including building progressive web apps. Clutch, a customer reviews platform named us a top web developer in 2019. If you want to develop a PWA, eCommerce site or redesign it, feel free to drop us a line.

Do you want to be the first to find out the changes in the software development or eCommerce worlds? Subscribe to our blog on LinkedIn, Facebook or Twitter.

Want to read more

Get fresh articles, news and case studies to your email firstly

Subscribed successfully!