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:
- Fast – PWAs perform well in preparing and using content
- User loyalty – PWAs retain users long-term because of their core features
- Reliability – some PWAs even support limited offline usage
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.
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.
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.
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.
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.
More on the topic:
Progressive Web Apps in eCommerce - are they worth your while?
