Diese Seite ist auch auf Deutsch verfügbar. Zur deutschen Seite wechseln

Vue Storefront - the PWA for Shopware 6

Blogja1ByARyr9lcm

Shopware 6 is increasing its use of API solutions as a basis for Progressive Web Apps (PWAs). This article introduces you to Vue Storefront, and you can learn more about the advantages and target groups of this PWA by Divante

What you should know about PWAs

The newly envisioned technological basis of Shopware 6 provides many new options to help your eCommerce business grow - one of which includes linking a Progressive Web App.

What is that exactly? Progressive Web Apps (PWAs) aren’t anything new, but they are increasingly popular. The term was officially coined by Frances Berriman (designer) and Alex Russell (Google Chrome engineer) in 2015. Since then, several large brands have discovered this technology for themselves. Google’s giant search engine also contributes heavily by taking PWAs into consideration for its ranking, which means that PWA features can influence the mobile score, among other things. Google is also the originator of many basic PWA concepts and emphasises three features above all: 

  • Reliability – PWAs work offline or even when the internet connection is poor
  • Fast – PWAs perform well in preparing and using content
  • User loyalty – PWAs retain users long-term because of their core features

Simply put, PWAs are a mixture of classic websites and apps. Since they join the benefits of both systems, they close an important gap.

Technically they are a combination of HTML, CSS and JavaScript frameworks (Angular, React or Vue.js). Service Worker, Local Caching, Web App Manifest or other modern browser technologies support essential functions such as offline access and push notifications. Depending on the scope and function of the PWA, linking it to a backend is also necessary.

Why are PWAs useful for eCommerce?

PWAs are particularly valuable for eCommerce strategies - especially since increasingly more purchases are made from mobile devices. In fact, according to a survey by McKinsey in Germany, one fourth of all respondents frequently use mobile devices for their purchases, whilst 20 per cent almost always use their mobile device.

Vue_Storefront_Blogbeitrag_Diagramm-Englisch

PWAs are particularly well suited for merchants with a large number of sales via mobile devices, or that see a potential there. In particular, PWAs can improve your mobile conversion rate when the problem is probably due to bad usability or another obstacle that could be improved with a PWA. A look at the web application from Divante shows what exactly a PWA can do.

Vue Storefront was specially developed for eCommerce

Divante offers the first exclusive PWA for Shopware 6. It’s called Vue Storefront and was written in the popular web framework Vue.js It can be used independently of the platform and can be linked to various backends via API. 

Here are the advantages: 

Native app experience

Opening your browser and typing in a URL? That was then. Now a PWA can be shown like a shortcut for a common app on the home screen of the mobile device. The user can then conveniently open it and go directly to the online shop. This increases reactivity enormously.

High speed

The link between PWA and AMP (Accelerated Mobile Pages) results in impressively fast loading and running behaviour. Tests with Google Lighthouse have proven that, and they are also relevant for Google’s Mobile First ranking. 

Surf offline and shop

Unreliable internet connection or a service hole? With a PWA, a short-term loss of internet connectivity is no longer a disturbance. Users can even shop offline with Vue Storefront and browse and order products. Vue Storefront grabs the necessary data beforehand. Orders that are made offline are saved in the local browser cache and sent as soon as the user is reconnected to the internet.

Shopware checkout

Shopware’s standard checkout is also available offline with Vue Storefront. Common payment methods and shipping methods can be integrated.

SEO boost

Vue Storefront supports the best SEO practices for PWAs. For one thing, Vue Storefront is based on Vue.js which is one of the most SEO-friendly applications recommended by Google. For another, it is possible to render it on the side of the server without any problems, whereby JavaScript based applications are also crawler-friendly.

Push notifications

Push notifications let you grab your customers’ attention for discounts, sales, new products or even a restored internet connection. External services can also be connected.

Google Analytics link

Google Analytics, Google AdWords and other services are supported. Analyses and reporting function just the same as with a standard website.

Configurable products

Users can configure products before they put them into the shopping cart. This includes, for example, colour choices, different sizes and so on. The data is directly transferred from the Shopware 6 backend. In addition, the PWA display is highly dynamic and offers considerably more options than common applications.

vue_storefront_image938wPxwYxpn79qV

Barcode scanner

Users can use their smartphones as a barcode scanner with Vue Storefront. The front camera of the mobile device serves as the scanner. This feature allows users to easily add products to their order without first having to search online for them. It is also very practical for warehouse staff, for example: The product on the warehouse shelf can be directly scanned and reordered – even without an internet connection.

Voice Commerce integration

Voice-user interfaces are increasingly important for the future. This integration allows you to control your online shop through voice command. Alexa or Google Home can be easily connected, and the browser voice recording function can be addressed, for instance to make a search.

Headless

Vue Storefront is platform independent to the greatest extent possible thanks to its internal architecture. That also means: Changes can be made in the backend – without needing to modify the frontend.

Open source

Vue Storefront is free with the MIT license and available through GitHub.

Functional scope

A comparison between PWA, native apps and responsive websites shows: A PWA combines the strengths of both systems and covers the complete range.

vue_storefront_vergleichstabelleG408r48qg6xVZ 

Important for implementation

PWAs are available with various functional scopes because it also depends on the functionalities desired. Normally, the implementation represents a larger project. However, the PWA can also be expanded step-wise, for example, with plugins or using a pre-configured adaptor for the implementation or connection.

Who should have a PWA?

As already mentioned above, PWAs are suited particularly for companies that want to get a better foothold in mobile commerce. Poor connections, difficulties paying and a bad UX often lead to frustration for potential customers and ultimately abandonment. You can effectively counteract this with PWAs.

In addition to online merchants who want to improve their opportunities in terms of mobile commerce, PWAs are also particularly suitable for merchants who

  • are thinking of upgrading from Shopware 5 to Shopware 6,
  • want to migrate from another shop system to Shopware,
  • have a strong social media presence,
  • are active in the fashion, beauty or furniture and lifestyle sectors,
  • are seeing losses in organic searches,
  • want to improve their search machine ranking,
  • use Google PageSpeed scorecard,
  • are driven by innovation and plan long-term and strategically.

Bottom line

You can considerably increase your customer loyalty with PWAs. It interrelates with various functions and features: from offline viability and push notifications to performance. Users say using a PWA is simply fun – and also influences conversions.

Implementing a PWA is a time-consuming project, but, for many online shops driven by innovation, it is thoroughly worth the effort.

Questions? Let us advise you! 

 

More on the topic:

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

Our PWA demo developed specially for Shopware

Vue Storefront on GitHub