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

Shopware PWA - the last PWA you need

SW6-PWA_EN-860x325

What is Shopware PWA?

Shopware PWA is a modern JS-based frontend designed for Shopware 6, making full use of its headless API approach. It is a completely separate and stateless web frontend and can be deployed and replicated over multiple nodes or edge networks. So it has nothing to do with the Shopware instance in terms of computing, state, or other shared resources. Shopware PWA is a project created in cooperation with Vue Storefront. This collaboration enabled us to focus on providing a great API while Vue Storefront makes sure that the Shopware PWA is efficient, fast, and adapted to the mobile world. This synergy is tremendous.

Why a new Storefront?

The current Shopware 6 frontend has a full-stack architecture. With Shopware PWA, we target more independence of frontend developers from the backend. Shopware PWA has been built from the ground up to incorporate modern approaches from the Vue and JavaScript space such as logic decomposition, server-side rendering, or code isomorphism. Shopware PWA is more than just another frontend - it opens up a whole new domain of application architectures on a technical level and ways to build individual customer experiences on a business level which will be a great asset, especially, but not exclusively, for experience-driven brands.

What differentiates Shopware PWA from similar solutions?

Shopware PWA has been developed in collaboration with Vue Storefront, building this next generation of PWA applications on years of experience and best practices. The close collaboration between both teams allowed us to align both approaches on a fundamental level, leading to an unprecedented sophistication of the integration. Architectural results like plugin support or integration of the CMS system and the checkout and payment demonstrate that. That being said, we’re focusing a lot on laying the proper ground for future implementations such as a theming system or an internal API that simplifies communication with the Shopware APIs and allows for extensions through third-party plugins. Since a lot of that takes place in the domain of consumer devices, it is also key for us to provide best practices for development and deployment, such as bundling procedures, building pipelines, or code reusability.

How do the Shopware Store API and the CMS play with PWA?

The PWA is a standalone application and can (and probably should) be hosted on a separate server from your Shopware backend. That architecture allows you to scale your commerce frontend almost independently from the underlying backend. The only runtime connection between the client application (PWA) and the backend application (Shopware 6) is the Store API. Despite this clear decoupling we have built some of the Shopware 6 core features into the PWA project. Such as the CMS mentioned above. We think that this is an important differentiator to other approaches because it leverages the unique visual editor from our administration and pursues the same approach from our CMS all the way to the PWA frontend.

Shopware Store API

With Shopware 6 we introduced the so-called Store-API as an abstraction of a storefront. It is a very functional, business-driven API. In contrast with the straightforward approach of data-driven APIs, you have to design these business-driven APIs with regard to the functionalities they cover. There are a hundred ways to design a checkout API, but only a few are actually understandable and behave predictably. These are the ones you have to find. Developing the API and the Shopware API in parallel, allowed us to quickly iterate and battle-test both against one another. However, we always made sure to not build the API for the PWA, but to keep it generic and powerful for other use cases.

Shopware CMS within the PWA

The Shopware PWA supports one of the most powerful things in Shopware 6 - the CMS. Within the CMS you can define layouts in the Shopware Admin panel and design visual experiences connecting static data as well as dynamic content with mappings as well as products or category information. This way non-technical people have great freedom to create content without developers having to be involved to a great extent. The PWA has a mechanism to resolve this configuration into a visual representation, just as in our Shopware storefront. Also, the same extension mechanisms apply if you want to provide custom elements or extend existing ones. We actually spent a lot of time to make sure the CMS structure feels as native to developers in the PWA as it does on the backend.

But you can simply extend our CMS by providing custom widgets (we separate between sections, blocks, and elements) and using the PWA frontend.

Shopware Plugins within the PWA

Plugins in Shopware 6 have the huge benefit of being vertically integrated. This means that they can interfere with the whole stack ranging from the database, through business logic, events, templates, and the API. Hence plugins are a very powerful way to have profound additions to the Shopware Core - like, for example, the Shopware B2B Suite.

However, when it comes to JS-based frontends, such as the PWA, the “sphere” of influence stops at the API. And in fact, everything else would contradict the approach of having a more decoupled architecture.

Since there are many more plugins that add a lot of value to Shopware we still wanted to provide a convenient way to “integrate” plugins with Shopware PWA. Which led us to implement a way that Shopware Plugins can provide resources (i.e. custom UI components or more sophisticated logic) which can be requested through the Admin API at build time.

Every time you re-build the PWA frontend, the CLI will try to fetch these resources from your Shopware Backend and “bake” them into the frontend application.

Is Shopware PWA the right solution for my project?

First of all, it is worth noting that choosing a headless approach is likely to increase the initial complexity of your project. Some things are going to work differently from the way you’re used to it within Shopware. On the other hand, having a clear view of responsibilities within your architecture and understanding the idea of the underlying APIs will lead to great freedom in the long run. You can build, maintain, and scale a fully custom frontend built 100% towards your requirements. You can have separate teams work on backend, APIs, and frontend which gives more independence, especially in bigger projects. You can work with state of the art frameworks like Vue.js or Nuxt.js. Of course, all features related to PWA like service workers, home screen installation, or notifications are great ways to improve website performance, resilience but also customer experience on a higher level. The universal nature of the PWA also weakens the argument of the PWA being an SEO killer. That being said, you have to keep things like bundle sizes, computation complexity, and common frontend guidelines in mind when you’re trying to build a high-performing frontend - just as for any other approach. Shopware PWA, however, comes with some smart mechanisms like ahead-of-time bundling & compilation or ES tree-shaking which help you optimize those.

How to get started?

If all these points make you wonder how it feels to build your own project - head to our GitHub and follow the Getting Started guide in the documentation to set it up. We are excited about your results, insights, and questions so please feel invited to share them on our slack channels or Twitter using #shopwarepwa.

This could be also interesting:

Shopware PWA for developers

Vue Storefront - the PWA for Shopware 6

Shopware PWA