What is Shopware PWA?

The PWA frontend is designed to deliver an outstanding customer experience. But what exactly is a PWA?

PWA means progressive web app. A progressive web app is a website. It has many features that, before its development, used to be limited to native apps. Progressive web apps can be built like a traditional website. By using HTML5, CSS3 and Javascript. Shopware PWA is a modern JS-based frontend design for Shopware 6 with a headless API approach.

But we can simplify it even further: PWAs are a "mixture" of website and app. That ensures that the advantages of both systems are combined.

There is a certain idea behind progressive Web Apps. In the future, apps will not have to be downloaded from the app store. They will simply function via the Internet browser. The advantage here is simply, because every device uses an Internet browser.

There are already several sites with PWAs on the market. The Washington Post, Google I/O, QR Code Scanner and Booking.com are among them. Incidentally, PWAs are also supported in Google's search engine rankings. PWAs are also very beneficial for e-commerce, as 48% of e-commerce sales were already made via mobile devices in 2018. So it's no wonder that Shopware is also taking this approach.

Learn everything you need to know about PWAs. But let us start with a little explanation what Shopware PWA is. Or try Shopware PWA now! 

The history of Shopware PWA

Shopware has already indicated in 2018 through the "Shopware Playground" that they are not inactive in terms of PWA. This is why Shopware is questioning the entire core of the software. With the Playground, they worked on a  "headless" architecture. Shopware has completely redeveloped the PWA for Shopware 6. In addition, Shopware 6 increasingly relies on API solutions, which are the basis for PWAs. The software is divided into different components and follows the "API First" concept. The first step has been taken by a much modernized backend based on Symfony and Vue.js.

In mid-2020, the time finally came and Shopware launched its new Progressive Web App. This storefront came in collaboration with the open source Vue Storefront platform. All of the usual Shopware features are supported within the PWA. These included the experience worlds, product variants, the checkout function, and the plug-in system.

Cooperation with Vue Storefront

What makes Shopware PWA unique? Shopware PWA performs incredibly high and is compatible with a lot of Shopware 6 features. It allows you to be creative unlimitedly. You can realize all your frontend ideas without worrying about the backend. Vue.js offers an extensive documentation, which gives you an easy start into frontend development. That's all possible through the cooperation with Vue Storefront.

Shopware was challenging themselves to be one of the first to adopt the PWA. When Shopware realized this goal, they launched their own product. The new frontend of Shopware 6 was developed in cooperation with Vue Storefront. The Vue Storefront platform already existed and is based on vue.js. It's an open-source PWA framework built on headless eCommerce architecture. This makes it possible to change the frontend without changing the backend. The Vue Storefront counts as a high-functional solution to create online stores with full functionality. Shopware typical, this solution is meant for companies of all sizes.

But why has Shopware done a new Storefront? The reason is that Shopware PWA is more than just another frontend. The Shopware PWA opens a whole new domain of application architectures on a technical level.

Developed specifically for e-commerce, Vue Storefront is fully backend-independent. It can thus connect to a wide variety of backends using APIs. Shopware takes care of the smooth technology for the online store, yet Vue Storefront provides an interface which is efficient, fast and perfectly adapted to the mobile world.

By the way, the Vue Storefront also offers some advantages. For example, the website can be used as an app via a connection on the home screen of the device. The site has quick loading and running times. It is crawler- and SEO-friendly as well. In addition, you have the option of a connection to Google Analytics and Google Adwords included. Other advantages include fast loading times even with low speed internet and 90% less disk space than an Android mobile app.

PWAs can also be used partially offline. The Vue Storefront of Shopware already loads all data in advance. So even an order can be placed in the local browser cache, when you are online again, the order will be placed.

In addition, Vue Storefront provides the advantage of using the front camera of the mobile device to scan barcodes, as an example. It is also possible to connect voice-controlled assistants like Alexa or Google Home.

In the following point we will explain you, how progressive web apps do working.

Shopware PWA in the raw form, before styling.

How do progessive web apps work?

A PWA gets started by entering the URL into a browser. The web server thus accepts the request. Then the PWA generates the HTML source code for a website.
The responsive design adapts the PWA to the device. While the PWA is opened, all contents are loaded online. This makes sure that the content can also be opened offline in the following process.

The process in the background goes as below: The code for the API interface is provided via a subdomain. The frontend gets called. Through this method, countless connections in the backend are possible. In addition, a lot more elegant frontend solutions can be realized. The requirement to be able to create a PWA is a classic website, which is responsive. Here it doesn't matter from which host the website is hosted. Basically every website can be upgraded to a PWA. This is because it's not an API or a vendor specific technology. Progressive Web Apps are an add-on.

An important element of PWAs are the service workers. Service workers are carried out by websites in the background. Their purpose is caching, i.e. the temporary storage of all information that is entered. This caching gives you the possibility to use the website offline as well. Thus, all information that was already accessed online can now also be regenerated offline. However, such service workers have to be programmed in JavaScript and registered separately. But there are also some frameworks that provide service workers. So you don't have to program them yourself. By the way, there is also a Service Worker "Cookbook" from Mozilla. This offers you some scripts to program the service workers. From the simple "Network or Cache" switch to the complex Push Subscription you can find everything that your PWA could use.

To implement a PWA in your store, you need SSL encryption, a "ServiceWorker" (this can be a small Javascript file) and a Manifest.json. In the manifest.json file (or simply web app manifest), simple information like the app name and the icon are specified. If these three requirements are met, any website can be installed on any device. No matter if it's a MacBook, Chromebook, Microsoft PC, Android or iPhone device. It looks like a normal app on the homescreen. You can also download the PWA from Google as an app.

Before you can finally start with your PWA, one step is missing. The browser has to be informed that your website is now available as a PWA. To do this, simply include the manifest file in the head of the HTML page and integrate the service worker via script. 

That's it: the website is PWA-ready and you can install it as a Web app from the browser.

So let's recap what is necessary to create a PWA:

1. Website (Responsive)
2. Service Worker
3. App Manifest

But the question is, how do you start? In the next step, we will find out if you need to generate a completely new website or whether you can upgrade the PWA as well.

Once everything is in place, check that the offline cache is working well. You need to check if the PWA is displayed correctly. Make sure that the PWA is partially running when there is no network available. All web browsers offer a "Network" tab in their developer tools. This tab can generally be opened by pressing F12. Here you can choose between offline and online to test the app.

The browser plug-in Lighthouse is a useful tool for testing the App. This tool checks your PWA from performance to general PWA optimization and SEO. With Lighthouse you can see how your PWA performs.

Now we've talked a lot about Progessive web apps. But maybe you're still wondering what the concrete benefits are... We'll figure that out in the next step!

The Shopware PWA Code during the development.

Specifics of PWAs:

• Push-Notifications:
  PWAs are able to alert the user about discounts, events, or anything else by push notification.
• Partially offline functionality through caching:
  All files loaded once in the online state can be partially recalled on a terminal device that is offline.
• Apps which do not require installation:
  Installing an app and wasting storage space. That's a big challenge for many users. It's much easier just to go visit a website.
• Drop to the home screen
  Put the PWA on the home screen of the device. Use it even without working internet connection and on any device you want without any expensive platform-specific development.
• Performance:
  Fixed content is loaded from the server only once or after a change. CSS - and Javascript - files or specific images like the logo get charged from the browser cache. Dynamic content is integrated through a lean API.
• Multiple backends in one frontend:
  Not so much with small shops, but quite the rule with larger ones. It is a fact that there are different systems for different needs. Through the "API First" - concept, the store content from Shopware 6 and CMS content from another CMS system can be loaded in one frontend. The user will not notice this in the frontend.
• Separation of front and back end:
  This separation is the definition of the buzzword "headless" and a result of the "API First" concept. Because dynamic content is loaded into the frontend via API, the frontend doesn't have to be in the same place as the backend. The benefits are diverse, for example that the backend processes do not have a direct (mostly negative) impact onto the frontend. In theory, it is possible to continue using the frontend while the Shopware 6 backend cannot be called.

After all, we've already talked about how PWAs combine the benefits of websites and native apps. But are there also things that a PWA can't do?

But a PWA still can’t do everything. So let’s talk about the two points what a PWA can’t do. These things are not given with a traditional website as well, but they are given with native apps.

•  A PWA cannot access contacts and calendar.
• Calling functions are not available: SMS or calls, send SMS/MMS, get phone numbers, etc.

Well, if PWAs combine the benefits of a website and a native app. Then you will probably decide to create a PWA as well. The question is how much it will cost.

Let’s talk about the price of an PWA. Today, a PWA is available to any business if they are ready to commit the technology. The quickest and most cost-effective way to get the PWA working is to use a ready-to-go PWA technology.

Still, it has to be said that the base price of a PWA turns out to be significantly higher than a traditional website. Yet this can be worth it in the end due to the more flexibility. Essentially, the goal of a PWA is not to have less costs, it is to have a flexible frontend.

Each PWA vendor has its own value proposition. All PWA solutions use different setups. This can be relevant for your business in selecting a solution.

You want to commission the PWA development? The development of a PWA is cheaper than a classic app. But it is more expensive than a normal website. The developer has a lot of extra steps, which result in a higher price. As a client, you have to decide if you want to pay for these additional functions. 

You can' t get around a PWA, if you have the following expectations for your website: 

• Offline capability: the app has to be available without an Internet connection. It must at least show the most frequently accessed data.
• The ability to send push messages
• Larger amounts of data (more than 5 MB) should be stored offline

A lot of other requests can be solved with the browser caches as well. These are partly standard functions of the browser and thus much easier to implement

The different advantages of native Apps and PWA´s

Native Apps and PWA´s have a few advantages that are different. So let us talk about it.

The first point: What are the advantages of native apps over PWAs

• Ideal for very complex applications due to the specialization on one operating system
• Data storage in any quantity
• Easy installation for the end user, easy to identify icon for simple invocation
• Convenient distribution for the provider through stores 
• Use of device hardware such as a camera

The second point: What are the advantages of PWA´s over native apps

• Work on all operating systems
• More favorable development
• Partially offline storage of data through HTML5, the page can be used partially without Internet access
• Locatable in the search engines
• Faster updates possible

If the advantages of a PWA are more important to you, you might want to have one as well. But development isn't your thing? Then let's talk about your needs. Let's see if it's worth it for you to commission the development.

Conclusion: Is Shopware PWA the right solution for you?

In the end, if you have a target group that buys a lot from mobile devices, you should consider a progressive web app. Shopping via mobile devices is becoming more and more important. In any case, a PWA is very helpful for offering users an optimal user experience. The Shopware PWA with Vue Storefront technology is useful in various e-commerce projects. Although, its also important to say that such a platform can't be managed without a lot of technical know-how. A lot of smaller vendors try to compensate the missing know-how with plugins. This works only to a point with Shopware PWA, however. The plugins have to be specially adapted to PWA.

After all, PWAs can help increase customer loyalty. For the reason that the user experience is much easier and user-friendly. But the implementation is very complex and needs to be thought out carefully. But PWA is a clear benefit for innovation-driven and long-term thinking stores. If you are thinking of upgrading to Shopware 6 anyway, it would only be an improvement to choose VueStorefront directly.